/* ============================================================
   THE GOOD STUFF case study (work-the-good-stuff.html only)

   Loaded after base.css and case-study.css. It reuses the shared
   chapter scaffold (eyebrow left, argument right) and adds the
   visual components an ecommerce story needs: framed captures of
   the live store, a department-to-product composition, a photo
   board, phones, and a small specimen of the TGS system. Values
   marked "TGS" are the store's own tokens (src/styles/tokens.css
   in the TGS repo), so the brand pieces match the live site. They are
   used ONLY inside the work: the replica shop panel, chips, buttons,
   design-system specimens and brand tiles. Everything that presents the
   work (surfaces, section labels, dividers, cards, frames) uses Locus.
   ============================================================ */

@font-face{
  font-family:'Switzer';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../fonts/switzer/Switzer-Variable.woff2') format('woff2');
}

.cs-tgs{
  --tgs-ink:#16150F;        /* TGS */
  --tgs-ink-muted:#565349;  /* TGS */
  --tgs-ink-faint:#8B8679;  /* TGS */
  --tgs-ground:#FAF8F3;     /* TGS */
  --tgs-surface:#F1EEE6;    /* TGS */
  --tgs-deep:#E6E2D7;       /* TGS */
  --tgs-line:#DDD8CB;       /* TGS */
  --tgs-line-strong:#C4BDAB;/* TGS */
  --tgs-bronze:#8A6A3B;     /* TGS */
  --tgs-frame:#0B0A07;      /* TGS */
  --tgs-on-dark:#F6F4EE;    /* TGS */
  --tgs-on-dark-muted:#B0AA9C;
  --tgs-on-dark-faint:#8E8A7E;
  --tgs-font:'Switzer',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  /* THE GRID. Every chapter head (case-study.css .chapter-head) splits the
     container 4fr / 8fr with a 40px column gap: the eyebrow on the content
     edge, heading and copy on the main column. The page has exactly these
     two key lines. Components sit on them through .tgs-cols, which repeats
     the same split, or through --tgs-main, the main column's left edge as
     an offset (a percentage of the container, resolved where it is used).
     Both collapse with the chapter head at 860px. */
  --tgs-col-gap:40px;
  --tgs-main:calc((100% - var(--tgs-col-gap)) / 3 + var(--tgs-col-gap));

  /* THE RULE. Every divider on this page is one hairline in one colour,
     set here and nowhere else; dark sections swap the colour, never the
     weight. Nothing on the page draws a line any other way. */
  --tgs-rule-color:var(--border-strong);
  --tgs-rule:1px solid var(--tgs-rule-color);
}
/* a var() inside a custom property resolves where it is declared, so the
   dark override has to restate the rule, not just the colour */
@media (max-width:860px){.cs-tgs{--tgs-main:0px;}}
.cs-tgs .tgs-dark{--tgs-rule-color:var(--dark-border);--tgs-rule:1px solid var(--tgs-rule-color);}

/* An <img> with width/height attributes and a CSS aspect-ratio needs
   height:auto, or the attribute height wins and the picture stretches.
   Set once for every image on the page; components that fill a box
   override it with an explicit height. */
.cs-tgs main img{height:auto;}

/* ---------- shared pieces ---------- */
.tgs-shot{margin:0;}
.tgs-shot picture,.tgs-stage picture{display:block;}
.tgs-shot img{display:block;width:100%;border-radius:12px;border:1px solid var(--border);background:var(--dark-bg);}
.tgs-shot figcaption,
.tgs-note,
.tgs-proof figcaption{margin-top:16px;font-size:15px;line-height:1.55;color:var(--ink-faint);max-width:560px;}
.tgs-shot figcaption strong,
.tgs-proof figcaption strong{color:var(--ink);font-weight:600;}
.tgs-note{max-width:640px;margin-top:var(--space-4);margin-left:var(--tgs-main);}
.tgs-minihead{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;}
/* small step marker: "01 Department", "Board" */
.tgs-step{display:flex;align-items:baseline;gap:10px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);}
.tgs-step b{color:var(--ink);font-weight:600;}
.tgs-step i{font-style:normal;margin-left:auto;font-weight:500;}

.tgs-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) clamp(20px,2.6vw,32px);margin-top:var(--space-6);}
@media (max-width:1000px){.tgs-grid-2{grid-template-columns:1fr;gap:var(--space-5);}}

/* the shared split: side column on the content edge, main column on the
   heading's edge. Visuals go in the main column, supporting lists beside it */
.tgs-cols,
.tgs-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--tgs-col-gap);row-gap:var(--space-5);}
.tgs-split{align-items:start;}
.tgs-split > figure{grid-column:2;grid-row:1;}
.tgs-split > :not(figure){grid-column:1;grid-row:1;}
@media (max-width:860px){
  .tgs-cols,.tgs-split{grid-template-columns:1fr;}
  .tgs-split > figure,.tgs-split > :not(figure){grid-column:auto;grid-row:auto;}
}

/* dark chapters sit on the TGS frame black, a warm near-black */
.case-chapter.tgs-dark{background:var(--dark-bg);}
.tgs-dark .tgs-note{color:var(--dark-text-soft);}

/* ---------- hero ---------- */
.tgs-live{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:15px;font-weight:600;color:var(--ink);border-bottom:var(--tgs-rule);padding-bottom:3px;transition:color var(--dur-sm) var(--ease),border-color var(--dur-sm) var(--ease);}
.tgs-live:hover{color:var(--accent);border-color:var(--accent);}
.tgs-stage{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-alt);}
.tgs-stage img{display:block;width:100%;}

/* the four facts: quiet cards on the alt surface, number first */
.tgs-stat-cards{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,16px);margin-top:clamp(16px,2vw,24px);}
.tgs-stat{background:var(--bg-alt);border-radius:var(--radius-md);padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px) clamp(22px,2.2vw,28px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(150px,13vw,190px);}
.tgs-stat strong{font-family:var(--font-display);font-size:clamp(44px,4.6vw,68px);font-weight:700;letter-spacing:-0.045em;line-height:.9;color:var(--ink);}
.tgs-stat span{font-size:15px;line-height:1.4;color:var(--ink-soft);max-width:200px;}
@media (max-width:860px){.tgs-stat-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:380px){.tgs-stat{min-height:132px;}.tgs-stat span{font-size:14px;}}

/* ---------- 01 opportunity ---------- */
.tgs-questions ol{list-style:none;counter-reset:q;border-top:var(--tgs-rule);}
.tgs-questions li{counter-increment:q;display:grid;grid-template-columns:36px 1fr;gap:8px;padding:18px 0;border-bottom:var(--tgs-rule);font-family:var(--font-display);font-size:clamp(18px,16.4px + .4vw,22px);font-weight:600;line-height:1.3;letter-spacing:-0.015em;color:var(--ink);}
.tgs-questions li::before{content:counter(q,decimal-leading-zero);font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--ink-faint);padding-top:5px;}

/* ---------- statement band ---------- */
.tgs-statement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--dark-bg);color:var(--dark-text);min-height:clamp(560px,50vw,820px);}
.tgs-statement-text{display:flex;align-items:center;padding:var(--space-6) var(--gutter);}
.tgs-statement-inner{max-width:560px;margin-left:auto;margin-right:clamp(0px,4vw,72px);}
.tgs-kicker{display:block;font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dark-text-soft);margin-bottom:24px;}
.tgs-display{font-family:var(--font-display);font-size:clamp(48px,6.2vw,96px);font-weight:700;line-height:.92;letter-spacing:-0.05em;color:var(--dark-text);margin-bottom:28px;}
.tgs-statement p:not(.tgs-display){color:var(--dark-text-soft);max-width:460px;}
.tgs-statement-media{position:relative;overflow:hidden;background:#EDEDEA;}
.cs-tgs .tgs-statement-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;}
@media (max-width:860px){
  .tgs-statement{grid-template-columns:1fr;min-height:0;}
  .tgs-statement-inner{margin:0;}
  .tgs-statement-media{aspect-ratio:4/5;max-height:80vh;}
}

/* ---------- 02 manufacturer-direct ---------- */
.tgs-chain{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,40px);}
.tgs-chain li{border-top:var(--tgs-rule);padding:24px 0 8px;}
.tgs-chain-num{display:block;font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--dark-text-soft);margin-bottom:18px;}
.tgs-chain h3{font-size:clamp(24px,2.4vw,32px);line-height:1.1;letter-spacing:-0.03em;color:var(--dark-text);margin-bottom:12px;}
.tgs-chain p{font-size:16px;color:var(--dark-text-soft);max-width:320px;}
@media (max-width:760px){.tgs-chain{grid-template-columns:1fr;}.tgs-chain li{padding-bottom:28px;}}

.tgs-fineprint{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px var(--tgs-col-gap);align-items:end;margin-top:var(--space-6);padding-top:var(--space-5);border-top:var(--tgs-rule);}
.tgs-fineprint blockquote{font-family:var(--font-display);font-size:clamp(26px,3vw,42px);font-weight:600;line-height:1.12;letter-spacing:-0.03em;color:var(--dark-text);padding-left:clamp(18px,2vw,28px);border-left:2px solid var(--dark-border);}
.tgs-fineprint p{font-size:16px;color:var(--dark-text-soft);}
.tgs-fineprint p strong{color:var(--dark-text);font-weight:600;}
/* the quote takes the main column, its attribution the side column */
.tgs-fineprint blockquote{grid-column:2;grid-row:1;}
.tgs-fineprint p{grid-column:1;grid-row:1;}
@media (max-width:860px){.tgs-fineprint{grid-template-columns:1fr;}.tgs-fineprint blockquote,.tgs-fineprint p{grid-column:auto;grid-row:auto;}}

.tgs-method{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:var(--space-6);}
.tgs-method figure{margin:0;}
.tgs-method img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;}
.tgs-method figcaption{margin-top:14px;font-size:15px;line-height:1.5;color:var(--dark-text-soft);}
.tgs-method figcaption strong{display:block;font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-0.02em;color:var(--dark-text);margin-bottom:4px;}
@media (max-width:860px){.tgs-method{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px;}}

/* ---------- origin band ---------- */
.tgs-band{position:relative;background:var(--dark-bg);}
.cs-tgs .tgs-band > img{display:block;width:100%;height:clamp(520px,62vw,880px);object-fit:cover;object-position:50% 50%;}
.tgs-band-copy{position:absolute;left:0;right:0;bottom:0;padding:clamp(140px,18vw,260px) 0 clamp(36px,6vw,80px);background:linear-gradient(to top,rgba(10,11,13,.86) 0%,rgba(10,11,13,.6) 45%,rgba(10,11,13,0) 100%);}
.tgs-band-quote{font-family:var(--font-display);font-size:clamp(26px,3.4vw,50px);font-weight:600;line-height:1.08;letter-spacing:-0.035em;color:var(--dark-text);max-width:880px;}
.tgs-band-src{display:block;margin-top:18px;font-size:14px;color:var(--dark-text-soft);}

/* ---------- 03 discovery: department → shelf → product ----------
   A typographic department index on the left; on the right, the live
   department as a page you could touch, its standard, its shelves and
   the four products on the selected shelf. Chips and card text are set
   in the store's own type so they stay sharp at any size; product
   photographs are the live supplier images. */
.tgs-discover{--dsc-gap:var(--tgs-col-gap);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--dsc-gap);align-items:stretch;}
.tgs-dsc-depts{display:flex;flex-direction:column;gap:20px;padding-top:6px;}
.tgs-dsc-depts ol{list-style:none;border-top:var(--tgs-rule);}
.tgs-dsc-depts li{display:grid;grid-template-columns:34px 1fr;column-gap:8px;padding:16px 0 15px;border-bottom:var(--tgs-rule);color:var(--ink-faint);}
.tgs-dsc-depts .n{font-size:13px;font-weight:600;padding-top:6px;}
.tgs-dsc-depts .t{font-family:var(--font-display);font-size:clamp(20px,1.9vw,27px);font-weight:500;letter-spacing:-0.025em;line-height:1.15;}
.tgs-dsc-depts .c{grid-column:2;margin-top:6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;max-height:0;opacity:0;overflow:hidden;}
.tgs-dsc-depts li.is-on{color:var(--ink);}
.tgs-dsc-depts li.is-on .c{max-height:2em;opacity:1;color:var(--ink-soft);}
/* the selected department reaches across to the page it opens */
.tgs-dsc-depts li.is-on{position:relative;}
.tgs-dsc-depts li.is-on::after{content:'';position:absolute;left:calc(100% + 12px);top:28px;width:calc(var(--dsc-gap) - 12px);border-top:1px solid var(--ink);}
.tgs-dsc-depts li.is-on::before{content:'';position:absolute;left:calc(100% + 8px);top:25px;width:7px;height:7px;border-radius:50%;background:var(--ink);}
.tgs-dsc-note{margin-top:auto;font-size:15px;line-height:1.55;color:var(--ink-faint);max-width:300px;}

.tgs-dsc-stage{background:var(--tgs-ground);border:1px solid var(--tgs-line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,44px);display:flex;flex-direction:column;gap:18px;font-family:var(--tgs-font);color:var(--tgs-ink);box-shadow:0 50px 90px -60px rgba(11,12,13,.28);}
.tgs-dsc-head{padding-bottom:22px;border-bottom:var(--tgs-rule);margin-bottom:4px;}
.tgs-dsc-title{font-family:var(--tgs-font);font-size:clamp(34px,4.4vw,64px);font-weight:500;letter-spacing:-0.04em;line-height:.98;color:var(--tgs-ink);margin-top:14px;}
.tgs-dsc-stage .tgs-step{font-family:var(--tgs-font);}
.tgs-dsc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
.tgs-dsc-cards{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);}
.tgs-dsc-cards li{display:flex;flex-direction:column;min-width:0;}
.tgs-dsc-cards img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#fff;margin-bottom:12px;}
.tgs-dsc-cards .lbl{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tgs-ink-faint);margin-bottom:4px;}
.tgs-dsc-cards b{font-size:clamp(13px,1vw,15px);font-weight:500;line-height:1.3;letter-spacing:-0.01em;color:var(--tgs-ink);}
.tgs-dsc-cards .price{font-size:13px;color:var(--tgs-ink-muted);margin-top:4px;font-variant-numeric:tabular-nums;}
@media (max-width:1000px){
  .tgs-discover{grid-template-columns:1fr;}
  .tgs-dsc-depts .c{max-height:none;opacity:1;}
  .tgs-dsc-depts li:not(.is-on) .c{display:none;}
  .tgs-dsc-depts li.is-on::after,.tgs-dsc-depts li.is-on::before{display:none;}
  .tgs-dsc-note{order:3;margin-top:4px;max-width:560px;}
}
@media (max-width:640px){
  .tgs-dsc-stage{border-radius:var(--radius-md);}
  .tgs-dsc-cards{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px;}
  .tgs-dsc-chips .tgs-chip{height:34px;padding:0 11px;font-size:13px;}
}

/* proof: the real department page beside the same page on a phone */
/* proof: the phone on the content edge, the desktop page on the main column */
.tgs-proof{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--tgs-col-gap);row-gap:var(--space-5);align-items:end;margin-top:var(--space-6);}
.tgs-proof-desk{grid-column:2;grid-row:1;}
.tgs-proof-phone{grid-column:1;grid-row:1;margin:0;max-width:300px;width:100%;}
@media (max-width:860px){.tgs-proof{grid-template-columns:1fr;}.tgs-proof-desk,.tgs-proof-phone{grid-column:auto;grid-row:auto;}.tgs-proof-phone{max-width:260px;}}
/* on a phone the desktop page would be a sliver; the phone beside it says the same thing at a readable size */
@media (max-width:640px){.tgs-proof-desk{display:none;}}

/* ---------- 04 homepage frames ---------- */
.tgs-frames{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) clamp(20px,2.6vw,32px);}
.tgs-frames .is-wide{grid-column:1/-1;}
.tgs-frames .is-wide figcaption{max-width:640px;}
.tgs-frames figcaption span{display:inline-block;min-width:30px;font-size:13px;font-weight:600;color:var(--ink-faint);}
@media (max-width:1000px){.tgs-frames{grid-template-columns:1fr;gap:var(--space-5);}}

/* ---------- 05 visual commerce ---------- */
.case-chapter.tgs-ground{background:var(--bg-alt);}
.tgs-step-board{margin-bottom:18px;}
.tgs-mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(120px,15vw,210px);gap:clamp(8px,1.2vw,16px);}
.tgs-mosaic figure{margin:0;overflow:hidden;border-radius:6px;background:var(--bg-alt);}
.cs-tgs .tgs-mosaic img{display:block;width:100%;height:100%;object-fit:cover;}
.tgs-m-a{grid-column:1/9;grid-row:1/3;}
.tgs-m-b{grid-column:9/13;grid-row:1/4;}
.tgs-m-c{grid-column:1/5;grid-row:3/5;}
.tgs-m-d{grid-column:5/9;grid-row:3/4;}
.tgs-m-e{grid-column:5/9;grid-row:4/5;}
.tgs-m-f{grid-column:9/13;grid-row:4/5;}
.cs-tgs .tgs-m-e img{object-position:50% 62%;}
.cs-tgs .tgs-m-f img{object-position:50% 58%;}
@media (max-width:760px){
  .tgs-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;}
  .tgs-mosaic figure{grid-column:auto;grid-row:auto;aspect-ratio:1/1;}
  .tgs-mosaic .tgs-m-a{grid-column:1/-1;aspect-ratio:3/2;}
  .tgs-mosaic .tgs-m-b,.tgs-mosaic .tgs-m-c{aspect-ratio:3/4;}
  .tgs-mosaic .tgs-m-f{grid-column:1/-1;aspect-ratio:16/9;}
}

/* the four principles: cards, each a numbered rule of the image system */
.tgs-principles-cards{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,16px);margin-top:clamp(16px,2vw,24px);}
.tgs-pcard{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;}
.tgs-pcard-n{font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:clamp(40px,5vw,72px);}
.tgs-pcard h3{font-size:clamp(19px,1.6vw,22px);line-height:1.2;letter-spacing:-0.02em;color:var(--ink);margin-bottom:10px;}
.tgs-pcard p{font-size:15px;line-height:1.5;color:var(--ink-soft);}
@media (max-width:1000px){.tgs-principles-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.tgs-principles-cards{grid-template-columns:1fr;}.tgs-pcard-n{margin-bottom:28px;}}
.tgs-shot-wide{margin:var(--space-6) 0 0 var(--tgs-main);}

/* ---------- 06 mobile: phone row ---------- */
.tgs-phones-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);}
.tgs-phones{list-style:none;display:flex;gap:clamp(16px,2.6vw,36px);}
.tgs-phones li{flex:1 1 0;min-width:0;}
.tgs-phone{border:9px solid var(--ink);border-radius:38px;overflow:hidden;background:var(--ink);aspect-ratio:390/844;box-shadow:0 40px 60px -36px rgba(11,12,13,.35);}
.cs-tgs .tgs-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.tgs-phones p{margin-top:20px;font-size:15px;line-height:1.5;color:var(--ink-faint);max-width:260px;}
.tgs-phones p strong{display:block;color:var(--ink);font-weight:600;}
/* below 1000px the row becomes a swipeable strip at a readable size
   rather than four slivers; the page itself never scrolls sideways */
@media (max-width:1000px){
  .tgs-phones-wrap{padding:0;}
  .tgs-phones{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:8px var(--gutter) 24px;scroll-padding:0 var(--gutter);scrollbar-width:none;}
  .tgs-phones::-webkit-scrollbar{display:none;}
  .tgs-phones li{flex:0 0 min(66vw,290px);scroll-snap-align:start;}
}
@media (max-width:640px){.tgs-phone{border-width:7px;border-radius:30px;}}
.tgs-stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:var(--space-6);}
.tgs-stats li{border-top:var(--tgs-rule);padding-top:20px;}
.tgs-stats strong{display:block;font-family:var(--font-display);font-size:clamp(36px,3.6vw,52px);font-weight:700;letter-spacing:-0.04em;line-height:1;color:var(--ink);margin-bottom:12px;}
.tgs-stats span{font-size:15px;line-height:1.5;color:var(--ink-soft);display:block;max-width:300px;}
@media (max-width:760px){.tgs-stats{grid-template-columns:1fr;row-gap:28px;}}

/* ---------- 07 conversion ---------- */
.tgs-decisions{list-style:none;border-top:var(--tgs-rule);}
.tgs-decisions li{padding:20px 0;border-bottom:var(--tgs-rule);font-size:16px;line-height:1.55;color:var(--ink-soft);}
.tgs-decisions strong{display:block;font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-0.015em;color:var(--ink);margin-bottom:4px;}
.tgs-path{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(12px,2vw,24px);margin-top:var(--space-6);}
.tgs-path li{border-top:var(--tgs-rule);padding-top:16px;font-family:var(--font-display);font-size:clamp(17px,1.6vw,22px);font-weight:600;letter-spacing:-0.015em;color:var(--ink);}
.tgs-path li span{display:block;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:8px;}
@media (max-width:760px){.tgs-path{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;}}
.tgs-grid-gap{margin-top:var(--space-6);}

/* ---------- 08 design system: a specimen in the store's own type ---------- */
.tgs-system{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);}
.tgs-card{background:var(--tgs-ground);border:1px solid var(--tgs-line);padding:clamp(24px,3vw,40px);font-family:var(--tgs-font);color:var(--tgs-ink);}
.tgs-card-label{display:block;font-family:var(--tgs-font);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--tgs-ink-muted);margin-bottom:24px;}
.tgs-card-note{font-family:var(--tgs-font);font-size:15px;line-height:1.55;color:var(--tgs-ink-muted);margin-top:24px;max-width:440px;}
.tgs-type-name{font-family:var(--tgs-font);font-size:clamp(56px,6vw,88px);font-weight:500;letter-spacing:-0.04em;line-height:.95;color:var(--tgs-ink);}
.tgs-type-sample{font-family:var(--tgs-font);font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-0.03em;line-height:1.1;color:var(--tgs-ink);margin-top:16px;}
.tgs-weights{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px;font-size:15px;color:var(--tgs-ink);}
.tgs-swatches{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.tgs-swatches i{display:block;aspect-ratio:8/5;border:1px solid var(--tgs-line);margin-bottom:10px;}
.tgs-swatches b{display:block;font-size:14px;font-weight:600;}
.tgs-swatches span{font-size:13px;color:var(--tgs-ink-muted);font-variant-numeric:tabular-nums;}
.tgs-comp-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:16px;}
.tgs-comp-dark{background:var(--tgs-frame);padding:20px;}
.tgs-comp-chips{gap:8px;}
.tgs-btn{display:inline-flex;align-items:center;height:48px;padding:0 26px;background:var(--tgs-ink);color:var(--tgs-ground);font-size:15px;font-weight:600;letter-spacing:-0.01em;border:1px solid var(--tgs-ink);}
.tgs-btn-line{background:transparent;color:var(--tgs-ink);border-color:var(--tgs-line-strong);}
.tgs-btn-inverse{background:#fff;color:var(--tgs-ink);border-color:#fff;}
.tgs-link{font-size:15px;font-weight:600;color:var(--tgs-on-dark);}
.tgs-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--tgs-line-strong);font-family:var(--tgs-font);font-size:14px;color:var(--tgs-ink);background:var(--tgs-ground);white-space:nowrap;}
.tgs-chip em{font-style:normal;color:var(--tgs-ink-faint);font-size:13px;}
.tgs-chip.is-on{background:var(--tgs-ink);border-color:var(--tgs-ink);color:var(--tgs-ground);}
.tgs-chip.is-on em{color:var(--tgs-on-dark-muted);}
.tgs-crit{font-family:var(--tgs-font);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tgs-ink-muted);}
.tgs-crit b{color:var(--tgs-ink);margin-right:4px;}
.tgs-components .tgs-crit{margin-top:8px;}
.tgs-principles{list-style:none;display:flex;flex-direction:column;justify-content:center;}
.tgs-principles li{padding:16px 0;border-bottom:var(--tgs-rule);font-size:15px;line-height:1.5;color:var(--tgs-ink-muted);}
.tgs-principles li:first-child{padding-top:0;}
.tgs-principles li:last-child{border-bottom:0;padding-bottom:0;}
.tgs-principles strong{color:var(--tgs-ink);font-weight:600;}
@media (max-width:860px){.tgs-system{grid-template-columns:1fr;}}
@media (max-width:420px){.tgs-swatches{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* ---------- 09 brand ---------- */
/* marks stacked on the left, the campaign poster standing beside them */
.tgs-brand-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:clamp(12px,1.6vw,20px);}
.tgs-brand-tile{margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-md);}
.tgs-brand-mono{background:var(--tgs-ground);}
.cs-tgs .tgs-brand-mono img{width:40%;}
.tgs-brand-word{background:var(--tgs-bronze);}
/* the wordmark ships in ink; on bronze it is set in the TGS ground tone */
.cs-tgs .tgs-brand-word img{width:72%;filter:brightness(0) invert(.97) sepia(.08);}
.tgs-brand-campaign{grid-column:2;grid-row:1/3;aspect-ratio:2/3;}
.cs-tgs .tgs-brand-campaign img{display:block;width:100%;height:100%;object-fit:cover;}
@media (max-width:640px){
  .tgs-brand-grid{grid-template-columns:1fr;grid-template-rows:none;}
  .tgs-brand-tile{aspect-ratio:3/2;}
  .tgs-brand-campaign{grid-column:auto;grid-row:auto;aspect-ratio:2/3;}
}
.tgs-montage{margin:var(--space-6) 0 0;border-radius:var(--radius-lg);overflow:hidden;}
.tgs-montage img{display:block;width:100%;}

/* ---------- outcome ---------- */
.tgs-visit{margin-top:36px;}