/* ==========================================================================
   TGP Foundations V1
   The rules every page is built from. Values are designed at 1920px wide and
   scale smoothly down to a 375px phone (each clamp() is: phone value,
   in-between scaling, desktop value). Decisions recorded in
   docs/TGP_Foundations_V1.md.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Inter:wght@300;400;600;700&display=swap");

:root {
  /* ---- Color: text-safe (pass WCAG AA on white) ---- */
  --c-ink: #4e4d4d;          /* all primary text, 8.4:1 */
  --c-ink-muted: #6b6b6b;    /* secondary text at any size, 5.3:1 */
  --c-green-text: #5a7a2b;   /* green for type only, 4.9:1 */
  --c-white: #ffffff;

  /* ---- Color: graphic only (never for text on white) ---- */
  --c-green: #7ea841;        /* graphic treatment, logo */
  --c-yellow: #e7b621;       /* graphic treatment, logo (white text on it fails contrast) */
  --c-dark: #21292a;         /* reserved for the graphic treatment */

  /* ---- Color: surfaces ---- */
  --c-bg: #ffffff;
  --c-surface-subtle: #f4f4f1;
  --c-line: #d9d9d5;
  --c-placeholder-1: #d3d3ce;
  --c-placeholder-2: #c6c8c0;
  --c-placeholder-3: #dcdad2;

  /* ---- Type families ---- */
  --f-serif: "DM Serif Text", Georgia, "Times New Roman", serif;
  --f-sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ---- Type scale: 1.5x steps (16 / 24 / 36 / 54 / 81 / 120 at 1920) ---- */
  --t-120: clamp(48px, 30.52px + 4.66vw, 120px);
  --t-81:  clamp(40px, 30.05px + 2.654vw, 81px);
  --t-54:  clamp(30px, 24.18px + 1.553vw, 54px);
  --t-36:  clamp(22px, 18.6px + 0.906vw, 36px);
  --t-24:  clamp(17px, 15.3px + 0.453vw, 24px);
  --t-16:  clamp(14px, 13.51px + 0.129vw, 16px);

  /* ---- Grid ---- */
  --margin: clamp(24px, 0.7px + 6.21vw, 120px);   /* content edge */
  --gutter: clamp(16px, 8.23px + 2.07vw, 48px);   /* space between columns */
  --edge:   clamp(20px, 13.2px + 1.81vw, 48px);   /* nav and footer frame */
  --seam:   clamp(8px, 0.94vw, 18px);              /* gap inside image pairs and grids of faces */

  /* ---- Spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: clamp(24px, 20.12px + 1.036vw, 40px);
  --s-6: clamp(40px, 34.18px + 1.553vw, 64px);
  --s-7: clamp(56px, 44.35px + 3.107vw, 104px);
  --s-8: clamp(80px, 58.64px + 5.696vw, 168px);

  /* ---- Image ratios ---- */
  --r-landscape: 16 / 9;
  --r-portrait: 4 / 5;
  --r-callout: 3 / 2;
  --r-square: 1 / 1;
}

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--t-24);
  line-height: 1.54;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Layout grid ----------------------------------------------------------
   14 tracks: an outer margin track on each side plus the 12 content columns.
   Line 1 = screen left edge, line 2 = column 1 start, line 14 = column 12 end,
   line 15 = screen right edge. Children default to the 12 content columns.
   ------------------------------------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns:
    [full-start] calc(var(--margin) - var(--gutter))
    [content-start] repeat(12, minmax(0, 1fr))
    [content-end] calc(var(--margin) - var(--gutter))
    [full-end];
  column-gap: var(--gutter);
}
.layout > * { grid-column: content; min-width: 0; }

/* Column placement: set --from (1-12) and --span (1-12) on any child */
.layout > .col { grid-column: calc(var(--from, 1) + 1) / span var(--span, 12); }

/* Image layouts */
.layout > .bleed { grid-column: full; }                                   /* edge to edge */
.layout > .inset { grid-column: content; }                                /* content width */
.layout > .bleed-left  { grid-column: 1 / calc(var(--to, 8) + 2); }       /* screen edge to column --to */
.layout > .bleed-right { grid-column: calc(var(--from, 5) + 1) / -1; }    /* column --from to screen edge */

/* Below the breakpoint (820px): content columns stack to full width */
@media (max-width: 820px) {
  .layout > .col { grid-column: content; }
  .layout > .bleed-left, .layout > .bleed-right { grid-column: full; }
}

/* Vertical rhythm */
.section { margin-top: var(--s-8); }
.section-sm { margin-top: var(--s-6); }
.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-3); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* ---- Type roles -----------------------------------------------------------
   Named by job, not by size. Each maps to one step of the scale.
   ------------------------------------------------------------------------- */
.t-display { font-family: var(--f-serif); font-weight: 400; font-size: var(--t-120); line-height: 1.04; letter-spacing: -0.005em; }
.t-title   { font-family: var(--f-serif); font-weight: 400; font-size: var(--t-81);  line-height: 1.15; text-wrap: balance; }
.t-lead    { font-family: var(--f-serif); font-weight: 400; font-size: var(--t-54);  line-height: 1.3; }
.t-section { font-family: var(--f-sans);  font-weight: 300; font-size: var(--t-54);  line-height: 1.15; }
.t-list    { font-family: var(--f-sans);  font-weight: 400; font-size: var(--t-81);  line-height: 1.37; letter-spacing: 0.02em; }
.t-body    { font-family: var(--f-serif); font-weight: 400; font-size: var(--t-36);  line-height: 1.47; }
.t-feature { font-family: var(--f-sans);  font-weight: 400; font-size: var(--t-36);  line-height: 1.4; }
.t-caption-title { font-family: var(--f-sans); font-weight: 600; font-size: var(--t-24); line-height: 1.5; letter-spacing: 0.01em; }
.t-caption { font-family: var(--f-sans);  font-weight: 400; font-size: var(--t-24);  line-height: 1.54; }
.t-small   { font-family: var(--f-sans);  font-weight: 400; font-size: var(--t-16);  line-height: 1.5; }
.t-nav     { font-family: var(--f-sans);  font-weight: 400; font-size: var(--t-24);  line-height: 1; letter-spacing: 0.01em; }

.c-muted { color: var(--c-ink-muted); }
.c-green { color: var(--c-green-text); }
.c-white { color: var(--c-white); }

/* Text links: color change on hover, no buttons (TGP principle) */
.link { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color .15s ease; }
.link:hover { color: var(--c-green-text); }
.c-white .link:hover, .link.c-white:hover { color: var(--c-yellow); }

/* ---- Placeholder images -------------------------------------------------- */
.ph {
  position: relative;
  width: 100%;
  aspect-ratio: var(--r, 16 / 9);
  background: var(--c-placeholder-1);
  overflow: hidden;
}
.ph.t2 { background: var(--c-placeholder-2); }
.ph.t3 { background: var(--c-placeholder-3); }
.ph.dark { background: linear-gradient(160deg, #8a8f86 0%, #5f645c 100%); }
.ph[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: 12px; bottom: 10px;
  z-index: 3;
  font: 500 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
}
.ph.dark[data-label]::after { color: rgba(255,255,255,.6); }
.ph.landscape { --r: 16 / 9; }
.ph.portrait  { --r: 4 / 5; }
.ph.callout   { --r: 3 / 2; }
.ph.square    { --r: 1 / 1; }
.ph.round     { border-radius: 50%; }

/* Scrim: darkens part of an image so white type passes contrast */
.scrim::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,22,20,0) 35%, rgba(20,22,20,.55) 100%);
  z-index: 1;
}
.scrim-left::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,22,20,.55) 0%, rgba(20,22,20,0) 60%);
  z-index: 1;
}

/* ---- Graphic treatment ----------------------------------------------------
   Intentionally not defined here yet: the angular brand treatment is being
   resolved in Figma. The only graphic motion in the model is the Home splash,
   ported from Claude Design "Guzzardo Home v5" (see components.css).
   ------------------------------------------------------------------------- */