/* Homepage structure: hero → approach → work → experience → research
   Loaded after redesign.css. Same tokens and scale throughout; what varies is
   how much weight each kind of entry gets, so the page can carry a growing body
   of work without outgrowing the case studies it points at.

   Featured case   full-width capture        ~780px
   Index row       title + meta + one line   ~150px
   Experience row  company + title + dates   ~90px
   Article row     kind + title + excerpt    ~120px */

/* ---------- section band ---------- */
.band{margin-top:clamp(64px,8vw,120px);}
.tier-label{
  font-family:var(--body);font-weight:500;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 clamp(20px,2.4vw,30px);
  padding-bottom:clamp(14px,1.6vw,20px);
  border-bottom:1px solid var(--rule);
}

/* ---------- approach ---------- */
.band-head{margin-bottom:clamp(30px,4vw,52px);}
.thesis{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.375rem, 1.1rem + 1.25vw, 2.375rem);   /* 22 -> 38 */
  line-height:1.22;letter-spacing:-0.018em;color:var(--ink);
  margin:0;max-width:21.45em;text-wrap:balance;
}
.thesis + .claims{margin-top:clamp(30px,4vw,52px);}
.claims{display:grid;gap:clamp(20px,2.4vw,28px);}
@media (min-width:820px){.claims{grid-template-columns:repeat(3,1fr);}}
.claim{
  background:#ffffff;border:1px solid var(--rule);
  border-radius:14px;padding:clamp(20px,2.2vw,28px);
}
.claim h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);   /* 17 -> 21 */
  line-height:1.2;letter-spacing:-0.01em;color:var(--ink);
  margin:0 0 10px;max-width:12.62em;
}
.claim p{
  font-size:var(--t-body);line-height:1.5;color:var(--ink-2);margin:0;
}

/* ---------- case previews ----------
   One shared template: a coloured field with the product interface inset on top
   of it. Field colour and image are controlled separately — the image is a clean
   capture with no background baked in, and the field comes from --case-field.

   Field palette, sampled from the site's own composites, plus a fourth derived
   from the accent hue (23deg) so it belongs to the same family. */
:root{
  /* Four greys, not four hues. A saturated field competes with the screenshot
     sitting on it - the product UI is the colour in the card, and the ground
     should only separate it from the page. The four tones vary in value and
     take a trace of hue so the cards are still tellable apart. */
  --field-1:#efefef;   /* neutral      */
  --field-2:#e7e9ec;   /* cool grey    */
  --field-3:#edeae6;   /* warm grey    */
  --field-4:#e4e4e7;   /* violet grey  */
  --case-field:var(--field-1);   /* per-card override */
}

.cases{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(34px,4.4vw,64px) clamp(20px,2.8vw,40px);
}
@media (min-width:820px){
  .cases{grid-template-columns:1fr 1fr;}
}
.case{display:block;text-decoration:none;color:inherit;}

/* Universal preview: the field owns the ratio, padding, radius and shadow; the
   screenshot only has to be a clean capture at the card ratio. object-fit:cover
   means a non-conforming image still fills the slot without breaking the grid —
   it just crops from centre, which is why the capture spec asks for the subject
   inside a central safe area.

   Controls, per card:
     --case-field   the field colour
     --card-ratio   the field aspect (default 16/10) */
.case-media{
  background:var(--case-field);
  border-radius:14px;
  aspect-ratio:var(--card-ratio, 16 / 10);
  padding:clamp(12px,3.4%,34px);
  display:grid;
}
.case-media img{
  width:100%;height:100%;object-fit:cover;object-position:center center;
  display:block;border-radius:5px;
  box-shadow:0 10px 26px rgba(8,14,26,.14), 0 1px 3px rgba(8,14,26,.10);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
@media (hover:hover){.case:hover .case-media img{transform:scale(1.012);}}

.case h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);   /* 20 -> 28 */
  line-height:1.15;letter-spacing:-0.015em;color:var(--ink);
  margin:clamp(16px,1.8vw,22px) 0 0;transition:color .2s;
}
@media (hover:hover){a.case:hover h3{color:var(--accent);}}
.case-desc{
  font-size:var(--t-body);line-height:1.45;color:var(--ink-2);
  margin:8px 0 0;max-width:42ch;
}
/* a case without a page yet stays plain text rather than a broken link */
div.case{cursor:default;}



/* ---------- research / writing ----------
   An article index: kind, headline, standfirst. */
.articles{list-style:none;margin:0;padding:0;}
.articles > li{border-top:1px solid var(--rule);}
.articles > li:last-child{border-bottom:1px solid var(--rule);}
.art{
  display:grid;gap:8px clamp(20px,3vw,48px);
  padding:clamp(20px,2.4vw,30px) 0;
}
@media (min-width:820px){
  /* every child needs an explicit column: setting only grid-row let auto
     placement drop the excerpt into the 120px label column */
  .art{grid-template-columns:110px minmax(0,1fr) minmax(0,1.15fr);align-items:baseline;}
  .art-kind{grid-column:1;grid-row:1;}
  .art-title{grid-column:2;grid-row:1;}
  .art-desc{grid-column:3;grid-row:1;}
}
.art-kind{
  font-family:var(--body);font-weight:500;font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.art-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.0625rem, 1rem + 0.45vw, 1.375rem);    /* 17 -> 22 */
  line-height:1.22;letter-spacing:-0.01em;color:var(--ink);max-width:16.4em;
}
.art-desc{font-size:var(--t-body);line-height:1.5;color:var(--ink-2);max-width:54ch;}