/* The press kit: the flag in the head, the fact sheet, two descriptions to copy, features, the story so far on a night
   plate, the downloads, logos with type and colour, and contact. */

/* ---------- head ---------- */
.press-head-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.press-head h1{max-width:none}
.press-head .lede{margin-bottom:1.4em}
.press-mark{width:100%;height:auto;filter:drop-shadow(4px 10px 10px rgba(50,30,12,.25));transform:rotate(-1.5deg)}
@media (max-width:860px){ .press-head-grid{grid-template-columns:1fr} .press-mark{max-width:560px;order:-1} }

/* ---------- facts ---------- */
.facts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:clamp(24px,5vw,80px);align-items:start}
.facts h2{font-size:var(--fs-3);position:sticky;top:calc(var(--head-h) + 24px)}
.fact-list{margin:0;border-top:2px solid var(--ink)}
.fact-list div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:8px 24px;padding:13px 0;border-bottom:1px solid var(--rule)}
.fact-list dt{font-weight:600}
.fact-list dd{margin:0;color:var(--ink-2)}
.fact-list dd a{color:var(--ink)}
@media (max-width:760px){
  .facts-grid{grid-template-columns:1fr}
  .facts h2{position:static}
  .fact-list div{grid-template-columns:1fr;gap:2px}
}

/* ---------- descriptions ---------- */
.descriptions h2{font-size:var(--fs-3)}
.desc-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(20px,3vw,36px)}
.desc{margin:0;background:var(--stock-hi);border:2px solid var(--ink);box-shadow:var(--shadow-block);padding:clamp(18px,2.4vw,30px)}
.desc figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 .8em;font-family:var(--text);font-style:normal}
.desc h3{font-size:var(--fs-1);margin:0;color:var(--ink)}
.desc blockquote{margin:0}
.desc blockquote p{margin:0;max-width:none;line-height:1.55;color:var(--ink)}
.copy{min-height:38px;padding:.3em .9em;background:transparent;border:2px solid var(--ink);border-radius:2px;font:600 .95rem var(--text);color:var(--ink);cursor:pointer}
.copy:hover{background:var(--ink);color:var(--stock-hi)}
.copy-status{min-height:1.5em;margin-top:14px}
@media (max-width:860px){ .desc-grid{grid-template-columns:1fr} }

/* ---------- features ---------- */
.features-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:clamp(24px,5vw,80px);align-items:start}
.features h2{font-size:var(--fs-3)}
.feature-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px)}
.feature-list li{margin:0;padding:16px 0;border-top:1px solid var(--rule);line-height:1.5;color:var(--ink-2)}
.feature-list b{display:block;color:var(--ink);font-size:1.12em;margin-bottom:.15em}
@media (max-width:860px){ .features-grid{grid-template-columns:1fr} }
@media (max-width:640px){ .feature-list{grid-template-columns:1fr} }

/* ---------- story ---------- */
.story h2{font-size:var(--fs-3)}
.story p{color:#d8ddd7;font-size:clamp(1.08rem,1.04rem + .2vw,1.2rem);line-height:1.6;max-width:none}

/* ---------- downloads ---------- */
.dl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(20px,2.4vw,36px)}
.dl{margin:0;display:flex;flex-direction:column;align-items:flex-start}
.dl.wide{grid-column:span 1}
.dl.full{grid-column:1/-1}
.dl img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--stock-2);margin-bottom:14px}
.dl.full img{aspect-ratio:auto;object-fit:contain;background:var(--stock-hi);padding:12px}
.dl h3{font-size:var(--fs-1);margin:0 0 .3em}
.dl-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.98rem;text-decoration:underline;text-decoration-color:var(--scarlet);text-decoration-thickness:2px;text-underline-offset:.2em}
.dl-link::before{content:"";width:14px;height:14px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v8l3-3 1.4 1.4L8 12.8 2.6 7.4 4 6l3 3zM2 13h12v2H2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v8l3-3 1.4 1.4L8 12.8 2.6 7.4 4 6l3 3zM2 13h12v2H2z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:980px){ .dl-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .dl-grid{grid-template-columns:1fr} }

/* ---------- logos, type and colour ---------- */
.logo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,3fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.logo-card{margin:0;display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2.4vw,32px);border:2px solid var(--ink)}
.logo-card img{width:100%;height:auto;margin:auto 0}
.logo-card.light{background:var(--stock-hi)}
.logo-card.dark{background:var(--night)}
.logo-card.dark figcaption{color:#c9cfcc}
.logo-card.icon{background:var(--stock-hi);align-items:center}
.logo-card.icon img{width:min(128px,60%)}
.logo-card figcaption{display:grid;gap:6px;font-family:var(--text);font-style:normal}
@media (max-width:860px){ .logo-grid{grid-template-columns:1fr 1fr} .logo-card.icon{grid-column:1/-1;flex-direction:row;justify-content:center} .logo-card.icon img{width:96px;margin:0} }
@media (max-width:520px){ .logo-grid{grid-template-columns:1fr} .logo-card.icon{flex-direction:column} }
.type-colour{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,80px);margin-top:clamp(40px,5vw,72px)}
.type-colour h3{font-size:var(--fs-1)}
.t-display{font:400 1.35em/1 var(--display)}
.t-text{font-family:var(--text);font-weight:600}
.t-fell{font-family:var(--fell);font-style:italic}
.swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
.swatches li{margin:0;display:flex;align-items:center;gap:10px;font-size:1rem}
.swatches span{width:26px;height:26px;flex:none;background:var(--sw);border:2px solid var(--ink);border-radius:2px}
.swatches code{font-size:.85em;color:var(--ink-3)}
@media (max-width:760px){ .type-colour{grid-template-columns:1fr} }
@media (max-width:400px){ .swatches{grid-template-columns:1fr} }

/* ---------- contact ---------- */
.contact h2{font-size:var(--fs-3)}
.contact p{color:#d8ddd7}
.contact .actions{margin:1.6em 0}
.press-note{max-width:36em}