/* ==========================================================================
   Vitalia Factory — shared stylesheet (merged: Phase 0A homepage + Phase 0B
   interior vocabulary). Contract: Phase-0A-Spec.md + Phase-0B-Spec.md
   (both as amended 2026-07-22). Spec wins over comments.
   Static, zero build steps. WCAG 2.1 AA. Single breakpoint: 767px.
   ========================================================================== */

/* ---- Fonts — self-hosted, SIL OFL. Client places files in /fonts. ---- */
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---- Tokens ---- */
:root {
  --calce: #F2F2EF;      /* the ground */
  --ink: #1A2138;        /* primary ink: text, hairlines, planes */
  --nero: #111111;       /* footer band only */
  --siena: #A63C2B;      /* accent per page siena budget (see specs) */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --hairline: 1px solid var(--ink);
  --pad-x: min(48px, 3.4vw); /* desktop gutter: 48px at >=1412px, fluid below (mid-band fix) */
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { background: var(--calce); }
body {
  margin: 0;
  background: var(--calce);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  text-wrap: pretty;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }

/* ---- Links & interaction (non-color hover/focus everywhere) ---- */
a { color: inherit; }
main a, .prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tag-link, nav a { text-decoration: none; }
.tag-link:hover, nav a:hover,
a.plane:hover .corner-tag, a.panel:hover .corner-tag,
a.cell-navy:hover .corner-tag {
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-ink :focus-visible, .on-ink:focus-visible,
.cell-navy :focus-visible, .cell-navy:focus-visible,
.site-footer :focus-visible { outline-color: var(--calce); }
:focus:not(:focus-visible) { outline: none; }

/* ---- Skip link: first focusable element on every page ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  font: 400 13px/1 var(--mono); letter-spacing: 0.08em;
  color: var(--ink); background: var(--calce);
  padding: 14px 18px; z-index: 10;
}
.skip-link:focus { left: 0; }

/* ---- Header (every page) — no rule beneath ---- */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px var(--pad-x);
  background: var(--calce);
}
.site-header .wordmark img { height: 42px; width: auto; }
.site-nav { display: flex; gap: 40px; }
.site-nav a {
  font: 400 13px/1 var(--mono); letter-spacing: 0.14em;
  padding: 16px 0; /* ≥44px effective touch target */
}
.site-nav a[aria-current="page"] {
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}

/* ---- Grid vocabulary ---- */
.rule-top { border-top: var(--hairline); }
.rule-bottom { border-bottom: var(--hairline); }
.rule-left { border-left: var(--hairline); }

/* Filled dominant plane (homepage door; one filled plane per page) */
.plane {
  background: var(--ink); color: var(--calce);
  text-decoration: none;
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px var(--pad-x);
}
/* Open calce panel (homepage door) */
.panel {
  color: var(--ink); text-decoration: none;
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px var(--pad-x);
}
.plane-word { font: 400 76px/1.05 var(--serif); letter-spacing: 0.05em; font-size: min(76px, 6.8vw); }
.panel .plane-word { font-size: min(64px, 5.3vw); }
.plane-sub { font: 400 13px/1 var(--mono); letter-spacing: 0.3em; margin-top: 24px; }
.corner-tag { align-self: flex-end; font: 400 13px/1 var(--mono); letter-spacing: 0.08em; margin-top: auto; }

/* ---- Homepage time band (the first blocks; meridian hangs free) ---- */
.time-band {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: var(--hairline);
  min-height: 270px;
}
.shore { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 150px var(--pad-x) 32px; }
.shore-it { border-left: var(--hairline); text-align: right; }
.clock-line { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.shore-it .clock-line { justify-content: flex-end; }
.city { font: 400 34px/1.1 var(--serif); letter-spacing: 0.18em; font-size: min(34px, calc(3.4vw - 2px)); }
.clock { font: 500 34px/1 var(--mono); color: var(--siena); font-variant-numeric: tabular-nums; font-size: min(34px, calc(3.4vw - 2px)); }
.zone { font: 400 12px/1 var(--mono); letter-spacing: 0.18em; }
.team-words { font: 400 13px/1.8 var(--mono); letter-spacing: 0.06em; }
.shore-la .team-words { align-self: flex-end; }
.shore-it .team-words { align-self: flex-start; }

/* Reduced-scale clocks (interior pages: Our Hub title band, Contact time band) */
.clock-sm .city { font-size: 24px; }
.clock-sm .clock { font-size: 22px; }
.clock-sm .zone { font-size: 12px; letter-spacing: 0.16em; }

/* ---- Interior title band (every interior page) ---- */
.title-band {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 320px;
  border-bottom: var(--hairline); /* hairline closes the band */
}
.title-left {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 90px var(--pad-x) 42px;
}
.title-right {
  border-left: var(--hairline); /* the meridian — hangs free, no rule above */
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;
  padding: 90px var(--pad-x) 46px;
  font: 400 13px/2 var(--mono); letter-spacing: 0.14em; text-align: right;
}
.kicker { font: 400 13px/1 var(--mono); letter-spacing: 0.3em; margin-bottom: 18px; }

/* ---- Interior rows & cells (add .rule-top to rows, .rule-left to cells) ---- */
.row-50-50 { display: grid; grid-template-columns: 1fr 1fr; }
.row-32-68 { display: grid; grid-template-columns: 32fr 68fr; }
.row-50-32-18 { display: grid; grid-template-columns: 50fr 32fr 18fr; }
.cell { padding: 44px var(--pad-x) 56px; }

/* Filled navy cell (each interior page's single filled plane; may be a link) */
.cell-navy {
  background: var(--ink); color: var(--calce);
  text-decoration: none;
}
.cell-navy a { color: var(--calce); }

/* Photo fills its grid cell edge to edge */
.cell-photo { padding: 0; overflow: hidden; }
.cell-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Typography ---- */
.page-title { font: 400 64px/1.1 var(--serif); letter-spacing: 0.03em; }
h2 { font: 400 34px/1.2 var(--serif); letter-spacing: 0.04em; }
.prose { font-size: 20px; line-height: 1.6; max-width: 66ch; }
.label { font: 400 13px/1 var(--mono); letter-spacing: 0.3em; }   /* mono section labels: MISSION, VALUES, … */
.micro { font: 400 12px/1 var(--mono); letter-spacing: 0.22em; }  /* tiny corner tags: PT, CET, I., ITALIA */
.serif-list {
  list-style: none; margin: 0; padding: 0;
  font-family: var(--serif); font-size: 21px; line-height: 1.6;
  display: flex; flex-direction: column; gap: 14px;
}
.numeral { font: 400 96px/1 var(--serif); font-variant-numeric: tabular-nums; }
.numeral--monument { font-size: min(168px, 13.9vw); }
.numeral--large { font-size: min(120px, 13vw); }
.numeral--small { font-size: 84px; }
.accent { color: var(--siena); font-weight: 500; } /* within each page's approved siena budget */
em[lang="la"], span[lang="la"] { font-style: italic; }

/* ---- Footer (slim nero band, © line, legal links, no email) ---- */
.site-footer {
  background: var(--nero); color: var(--calce);
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; padding: 18px var(--pad-x);
}
.footer-brand { display: flex; align-items: center; gap: 28px; }
.footer-brand img { height: 26px; width: auto; }
.footer-copy { font: 400 10px/1 var(--mono); letter-spacing: 0.2em; }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a {
  font: 400 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--calce);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  padding: 16px 0; /* touch target (raised from 12px in Pass 1) */
}

/* ---- Utilities ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Motion: nothing moves by design ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Mobile (≤767px; floor 320px, no horizontal scroll)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --pad-x: 24px; }
  body { font-size: 17px; }

  .site-header { flex-direction: column; align-items: flex-start; padding: 20px var(--pad-x) 0; }
  .site-header .wordmark img { height: 32px; }
  .site-nav { flex-wrap: wrap; gap: 0 22px; padding: 6px 0 8px; }
  .site-nav a { font-size: 11px; padding: 17px 0; } /* 11px + 34px = 45px ≥44px touch target */

  /* Homepage: shores stack; meridian becomes a horizontal hairline */
  .time-band { grid-template-columns: 1fr; min-height: 0; }
  .shore { padding: 56px var(--pad-x) 32px; gap: 32px; }
  .shore-it { border-left: none; border-top: var(--hairline); }
  .city { font-size: 24px; letter-spacing: 0.16em; }
  .clock { font-size: 26px; }
  .zone { font-size: 11px; }
  .team-words { font-size: 12px; }

  .plane, .panel { padding: 36px var(--pad-x); }
  .plane-word { font-size: 44px; }
  .panel .plane-word { font-size: 36px; }
  .plane-sub { font-size: 11px; margin-top: 16px; }
  .corner-tag { font-size: 12px; }

  /* Interior title band stacks; right-shore line drops under the plane word */
  .title-band { grid-template-columns: 1fr; min-height: 0; }
  .title-left { padding: 64px var(--pad-x) 30px; }
  .title-right {
    border-left: none;
    align-items: flex-start; text-align: left;
    padding: 0 var(--pad-x) 30px;
    font-size: 11px;
  }
  .kicker { font-size: 11px; margin-bottom: 12px; }

  /* Interior rows stack; left hairlines turn horizontal between cells */
  .row-50-50, .row-32-68, .row-50-32-18 { display: block; }
  .row-50-50 > .rule-left, .row-32-68 > .rule-left, .row-50-32-18 > .rule-left {
    border-left: none; border-top: var(--hairline);
  }
  .cell { padding: 28px var(--pad-x) 36px; }
  .cell-photo { height: 260px; }

  .page-title { font-size: 40px; }
  h2 { font-size: 26px; }
  .prose { font-size: 18px; }
  .label { font-size: 11px; }
  .micro { font-size: 11px; letter-spacing: 0.2em; }
  .serif-list { font-size: 17px; gap: 12px; }
  .numeral { font-size: 64px; }
  .numeral--monument { font-size: 66px; }
  .numeral--large { font-size: 56px; }
  .numeral--small { font-size: 56px; }

  .clock-sm .city { font-size: 18px; letter-spacing: 0.16em; }
  .clock-sm .clock { font-size: 17px; }
  .clock-sm .zone { font-size: 10px; }

  .site-footer { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px var(--pad-x); }
  .footer-brand img { height: 22px; }
  .footer-legal { gap: 0 18px; }
}

/* ---- Homepage plane rows (Mondrian vertical cut at the meridian) ---- */
.plane-rows { display: grid; grid-template-columns: 1fr 1fr; }
.plane-rows .plane { min-height: 560px; }
.right-col { display: grid; grid-template-rows: 1fr auto; }
.right-col .panel { min-height: 470px; }
.doors { display: grid; grid-template-columns: 64fr 36fr; }
.door { font: 400 14px/1 var(--mono); letter-spacing: 0.08em; color: var(--ink); padding: 36px var(--pad-x); }
.door:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

@media (max-width: 767px) {
  .plane-rows { grid-template-columns: 1fr; }
  .plane-rows .plane { min-height: 320px; }
  .right-col .panel { min-height: 280px; border-left: none; border-top: var(--hairline); }
  .doors { grid-template-columns: 1fr 1fr; }
  .door { padding: 24px var(--pad-x); }
  .doors .door:first-child { border-left: none; }
}

/* ---- Page-specific layout classes (Phase 1 appends here as needed, e.g.
   Our Hub fact-grid row heights and cell spans; keep everything in this one
   file — no second stylesheet, no inline styles) ---- */

/* ==========================================================================
   Page-scoped classes (Phase 1). One file, no inline styles.
   Fluid caps reach their spec size at or below 1440px, so the approved
   desktop sizes render exactly; below 1440 they scale to fit (mid-band fix).
   ========================================================================== */

/* ---- Interior title word (h1 plane word, 76px canonical) ---- */
.title-word { font: 400 76px/1 var(--serif); letter-spacing: 0.04em; font-size: min(76px, 5.35vw); }
.title-note { font: 400 13px/2 var(--mono); letter-spacing: 0.14em; }

/* ---- Who We Are ---- */
.wwa-shores { grid-template-rows: minmax(400px, auto); }
.wwa-shore { display: flex; flex-direction: column; justify-content: space-between; }
.wwa-shore--it { align-items: flex-end; text-align: right; }
.wwa-shore-name { font: 400 54px/1.1 var(--serif); letter-spacing: 0.16em; font-size: min(54px, 5.3vw); }
.wwa-team { font: 400 14px/1.6 var(--mono); letter-spacing: 0.1em; margin-top: 26px; }
.wwa-mission-body { padding-right: 120px; }
.wwa-mission-body .prose { font-size: 21px; max-width: 62ch; }
.wwa-values-label { padding: 48px var(--pad-x) 0; }
.wwa-values { margin-top: 40px; }
.wwa-num { font: 500 13px/1 var(--mono); letter-spacing: 0.2em; }
.wwa-value-name { font: 400 44px/1.15 var(--serif); margin-top: 18px; }
.wwa-value-name--tight { font-size: clamp(16px, 3.47vw - 14px, 36px); margin-top: 22px; hyphens: auto; }
.wwa-values .cell--tight { padding: 44px 32px 64px 40px; }

/* ---- Our Hub ---- */
.hub-facts { grid-template-rows: minmax(470px, auto) minmax(250px, auto); }
.hub-plane { grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: space-between; }
.hub-bags { grid-column: 2 / span 2; display: flex; flex-direction: column; justify-content: space-between; }
.hub-stitch { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; padding-top: 40px; padding-bottom: 40px; }
.hub-fact-label { font: 400 13px/2 var(--mono); letter-spacing: 0.22em; }
.hub-sub { font: 400 14px/1.5 var(--mono); letter-spacing: 0.24em; margin-top: 20px; }
.hub-italia-tag { align-self: flex-end; }
.hub-stitch-text { font: 400 20px/1.6 var(--serif); max-width: 34ch; }

/* ---- Services ---- */
.svc-head { display: flex; flex-direction: column; justify-content: space-between; }
.svc-h2 { font: 400 40px/1.15 var(--serif); font-size: min(40px, 4.9vw); max-width: 7.6em; }
.svc-body { padding-right: 120px; display: flex; flex-direction: column; gap: 24px; }
.svc-cats-label { padding: 48px var(--pad-x) 0; }
.svc-cats { margin-top: 40px; }
.svc-cat-name { font: 400 34px/1.2 var(--serif); letter-spacing: 0.12em; margin-bottom: 26px; }
.svc-list { gap: 10px; font-size: 20px; }

/* ---- Contact ---- */
.ct-dot { color: var(--siena); }
.ct-invite { grid-template-rows: minmax(430px, auto); }
.ct-invite-cell { display: flex; flex-direction: column; justify-content: flex-end; padding-right: 120px; }
.ct-invite-text { font: 400 24px/1.6 var(--serif); max-width: 40ch; }
.ct-mail { display: flex; flex-direction: column; justify-content: space-between; }
.ct-mail-address { display: block; font: 400 44px/1.2 var(--serif); font-size: min(44px, 4.6vw); overflow-wrap: break-word; }
.ct-mail-tag { display: block; font: 400 13px/1 var(--mono); letter-spacing: 0.1em; margin-top: 24px; }
.ct-mail:hover .ct-mail-tag { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ct-time { grid-template-rows: minmax(360px, auto); }
.ct-clocks { display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding-top: 40px; }

/* ---- Legal / quiet pages (Accessibility now; Privacy & Terms in Phase 2) ---- */
.legal-title { font: 400 64px/1.1 var(--serif); letter-spacing: 0.03em; font-size: min(64px, 5vw); }
.legal-body { padding-right: 120px; }
.legal-body .prose + .prose { margin-top: 24px; }

/* ---- 404 ---- */
.nf-band-1 { min-height: 220px; }
.nf-band-2 { grid-template-rows: minmax(260px, auto); }
.nf-plane { min-height: 260px; }
.nf-line { padding: 64px var(--pad-x) 96px; }
.nf-link { font: 400 14px/1 var(--mono); letter-spacing: 0.08em; text-decoration: none; padding: 16px 0; display: inline-block; }
.nf-link:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---- Page-scoped mobile ---- */
@media (max-width: 767px) {
  .title-word { font-size: min(44px, 10.9vw); }
  .title-right .clock-line { align-self: flex-end; }
  .wwa-shores > .cell-navy { min-height: 260px; }
  .wwa-shore--it { min-height: 220px; }
  .wwa-shore-name { font-size: 32px; }
  .wwa-team { font-size: 12px; letter-spacing: 0.08em; margin-top: 16px; }
  .wwa-mission-body { padding-right: var(--pad-x); }
  .wwa-mission-body .prose { font-size: 17px; }
  .wwa-values-label { padding: 28px var(--pad-x) 0; }
  .wwa-values { margin-top: 22px; }
  .wwa-value-name { font-size: 32px; margin-top: 12px; }
  .wwa-value-name--tight { font-size: 32px; }
  .wwa-values .cell--tight { padding: 28px var(--pad-x) 36px; }

  .hub-plane { min-height: 340px; }
  .hub-fact-label { font-size: 11px; letter-spacing: 0.2em; }
  .hub-sub { font-size: 11px; letter-spacing: 0.2em; margin-top: 12px; }
  .hub-stitch { flex-direction: row; align-items: flex-end; gap: 20px; justify-content: flex-start; }
  .hub-stitch-text { font-size: 17px; }
  .hub-italia-tag { display: none; }

  .svc-h2 { font-size: 30px; max-width: none; }
  .svc-body { padding-right: var(--pad-x); gap: 16px; }
  .svc-cats-label { padding: 28px var(--pad-x) 0; }
  .svc-cats { margin-top: 22px; }
  .svc-cat-name { font-size: 26px; margin-bottom: 18px; }
  .svc-list { font-size: 17px; gap: 8px; }

  .ct-invite-cell { padding-right: var(--pad-x); }
  .ct-invite-text { font-size: 18px; }
  .ct-mail { min-height: 300px; }
  .ct-mail-address { font-size: 26px; line-height: 1.25; }
  .ct-mail-tag { font-size: 12px; margin-top: 18px; }
  .ct-photo { height: 240px; }
  .ct-clocks { gap: 0; padding-top: 0; }
  .ct-clocks .clock-line { padding: 24px 0; }
  .ct-clocks .clock-line + .clock-line { border-top: var(--hairline); justify-content: flex-end; }

  .legal-title { font-size: 36px; }
  .legal-body { padding-right: var(--pad-x); }

  .nf-band-1 { min-height: 140px; }
  .nf-band-1 > .rule-left, .nf-band-2 > div:not(.nf-plane) { display: none; }
  .nf-plane { min-height: 180px; }
  .nf-line { padding: 48px var(--pad-x) 72px; }
}