/* Fonte Wine Group — site stylesheet built on the Fonte Design System.
   Tokens are taken verbatim from the DS (colors, type, spacing, lines, motion).
   Components below are authored for the three site pages. */

/* ---------- Fonts: the seven licensed Klim cuts, and only these ---------- */
@font-face{font-family:"Tiempos Text";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/tiempos-text-regular.woff2") format("woff2")}
@font-face{font-family:"Tiempos Text";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/tiempos-text-regular-italic.woff2") format("woff2")}
@font-face{font-family:"Tiempos Headline";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/tiempos-headline-medium.woff2") format("woff2")}
@font-face{font-family:"Tiempos Headline";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/tiempos-headline-medium-italic.woff2") format("woff2")}
@font-face{font-family:"National 2";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/national-2-regular.woff2") format("woff2")}
@font-face{font-family:"National 2";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/national-2-medium.woff2") format("woff2")}
@font-face{font-family:"National 2 Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/national-2-condensed-bold.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
--paper-00:#FFFFFF;--paper-01:#FCFBF8;--paper-02:#F2F1EC;--paper-03:#E6E4DD;
--ink-00:#12110E;--ink-01:#221F1A;--ink-02:#4A463E;--ink-03:#6F6B62;--ink-04:#A5A199;
--concrete-01:#D6D4CF;--concrete-02:#9E9B94;
--tomato:#C43A20;--burgundy:#6B2436;--stain:#8E4A4C;--blue:#245272;--blue-pale:#C3D3DB;
--green:#1E3D2F;--vine:#4E6B3C;--yellow:#E2A50F;--giro:#1E8FE6;
--on-tomato:#FFF8F2;--on-blue:#F3F7F8;--on-ink:#FCFBF8;--on-green:#F1F3EC;

--font-serif:"Tiempos Text",Georgia,"Times New Roman",serif;
--font-serif-headline:"Tiempos Headline",Georgia,serif;
--font-sans:"National 2",Helvetica,Arial,sans-serif;
--font-display:"National 2 Condensed","National 2",Helvetica,sans-serif;

--size-display-l:64px;--size-display-m:44px;--size-display-s:30px;
--size-head-xl:52px;--size-head-l:38px;--size-head-m:28px;--size-head-s:22px;
--size-lead:21px;--size-body:18px;--size-body-s:16px;--size-caption:13px;--size-meta:12px;

--lh-display:.94;--lh-head:1.12;--lh-lead:1.5;--lh-body:1.62;--lh-caption:1.42;
--track-caps:.09em;--track-tight:-.015em;
--measure-article:34em;--measure-narrow:26em;--measure-wide:44em;

--pad-x:clamp(20px,5vw,64px);
--max-page:1200px;--max-text:720px;

--dur-fast:160ms;--dur-base:240ms;--ease-standard:cubic-bezier(.2,0,.1,1);
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;--dur-base:0ms}}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{margin:0;background:var(--paper-01);color:var(--ink-01);font-family:var(--font-serif);font-size:var(--size-body);line-height:var(--lh-body)}
::selection{background:var(--yellow);color:var(--ink-00)}
a{color:var(--ink-00);text-decoration:none;border-bottom:1px solid var(--ink-04);transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--stain);border-bottom-color:var(--stain)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
img{display:block;max-width:100%;height:auto;background:var(--concrete-01)}
h1,h2,h3,p{margin:0}

.shell{max-width:var(--max-page);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* ---------- Type roles ---------- */
.display{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:var(--lh-display)}
.headline{font-family:var(--font-serif-headline);font-weight:500;line-height:var(--lh-head);letter-spacing:var(--track-tight);color:var(--ink-00)}
.lead{font-size:var(--size-lead);line-height:var(--lh-lead);color:var(--ink-02);max-width:var(--measure-article)}
.body-copy{max-width:var(--measure-article);color:var(--ink-01)}
.kicker{font-family:var(--font-sans);font-weight:500;font-size:var(--size-meta);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-03)}
.kicker-accent{color:var(--tomato)}
.meta{font-family:var(--font-sans);font-weight:400;font-size:var(--size-meta);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-03)}
.cap{font-family:var(--font-sans);font-weight:400;font-size:var(--size-caption);line-height:var(--lh-caption);color:var(--ink-03)}

/* ---------- Rules ---------- */
.rule-head{border-top:2px solid var(--ink-00);padding-top:12px}
.rule-row{border-top:.5px solid var(--ink-04)}
hr.rule{border:0;border-top:1px solid var(--ink-00);margin:0}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--tomato);border-bottom:1px solid rgba(18,17,14,.14)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:56px}
.wordmark{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:22px;line-height:1;color:var(--on-tomato);border-bottom:none;display:flex;align-items:center;gap:10px}
.wordmark small{align-self:baseline;margin-top:6px}

/* The compass mark: ring + hub in currentColor, rays in tomato.
   On a tomato field the whole mark goes to the field's type colour. */
.wheel{display:block;flex:0 0 auto}
.wheel .rays{fill:var(--tomato)}
.band-tomato .wheel .rays,.site-header .wheel .rays{fill:currentColor}
.wordmark:hover{color:#fff}
.wordmark small{font-family:var(--font-sans);font-weight:500;font-size:10px;letter-spacing:var(--track-caps);color:rgba(255,248,242,.72)}
.site-nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);flex-wrap:wrap;font-family:var(--font-sans);font-weight:500;font-size:14px}
.site-nav a{border-bottom:1px solid transparent;color:rgba(255,248,242,.85)}
.site-nav a:hover{color:#fff;border-bottom-color:#fff}

/* Paper header variant: typography leads, tomato is reserved for the mark and CTAs.
   The brand mark and wordmark carry the tomato; nav stays ink. */
.site-header--paper{background:var(--paper-01);border-bottom:.5px solid var(--ink-04)}
.site-header--paper .wordmark{color:var(--tomato)}
.site-header--paper .wordmark:hover{color:var(--tomato)}
.site-header--paper .wordmark small{color:var(--ink-03)}
.site-header--paper .site-nav a{color:var(--ink-02)}
.site-header--paper .site-nav a:hover{color:var(--ink-00);border-bottom-color:var(--ink-00)}
.site-header--paper .wheel .rays{fill:var(--tomato)}

/* Tomato primary CTA: the accent, not the banner */
.btn-tomato{background:var(--tomato);color:var(--on-tomato);border-color:var(--tomato)}
.btn-tomato:hover{background:transparent;color:var(--tomato)}

/* Ink header variant: blends into an ink hero; the mark and wordmark carry the tomato */
.site-header--ink{background:var(--ink-00);border-bottom:none}
.site-header--ink .wordmark{color:var(--tomato)}
.site-header--ink .wordmark:hover{color:var(--tomato)}
.site-header--ink .wordmark small{color:rgba(252,251,248,.5)}
.site-header--ink .site-nav a{color:rgba(252,251,248,.75)}
.site-header--ink .site-nav a:hover{color:#fff;border-bottom-color:#fff}
.site-header--ink .wheel .rays{fill:var(--tomato)}

/* Outline buttons on dark fields */
.band-ink .btn-outline{background:transparent;color:var(--on-ink);border-color:var(--on-ink)}
.band-ink .btn-outline:hover{background:var(--on-ink);color:var(--ink-00)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:var(--font-sans);font-weight:500;font-size:14px;line-height:1;padding:14px 24px;background:var(--ink-00);color:var(--paper-01);border:1px solid var(--ink-00);border-radius:0;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.btn:hover{background:var(--paper-01);color:var(--ink-00)}
.btn-outline{background:transparent;color:var(--ink-00)}
.btn-outline:hover{background:var(--ink-00);color:var(--paper-01)}
.band-tomato .btn{background:var(--on-tomato);color:var(--ink-00);border-color:var(--on-tomato)}
.band-tomato .btn:hover{background:transparent;color:var(--on-tomato)}
.band-ink .btn{background:var(--on-ink);color:var(--ink-00);border-color:var(--on-ink)}
.band-ink .btn:hover{background:transparent;color:var(--on-ink)}
.band-blue .btn{background:var(--on-blue);color:var(--ink-00);border-color:var(--on-blue)}
.band-blue .btn:hover{background:transparent;color:var(--on-blue)}

/* ---------- Tags ---------- */
.tag{display:inline-block;font-family:var(--font-sans);font-weight:500;font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;padding:6px 10px;border:1px solid currentColor;border-radius:0}

/* ---------- Fields (Band) ---------- */
.band{padding:clamp(72px,10vw,140px) 0}
.band-tomato{background:var(--tomato);color:var(--on-tomato)}
.band-tomato .headline,.band-tomato a{color:var(--on-tomato)}
.band-tomato a{border-bottom-color:rgba(255,248,242,.5)}
.band-tomato a:hover{color:#fff;border-bottom-color:#fff}
.band-tomato .kicker,.band-tomato .meta,.band-tomato .cap{color:rgba(255,248,242,.75)}
.band-ink{background:var(--ink-00);color:var(--on-ink)}
.band-ink .headline,.band-ink a{color:var(--on-ink)}
.band-ink a{border-bottom-color:rgba(252,251,248,.4)}
.band-ink a:hover{color:#fff;border-bottom-color:#fff}
.band-ink .kicker,.band-ink .meta,.band-ink .cap{color:rgba(252,251,248,.55)}
.band-blue{background:var(--blue);color:var(--on-blue)}
.band-blue .headline,.band-blue a{color:var(--on-blue)}
.band-blue a{border-bottom-color:rgba(243,247,248,.45)}
.band-blue a:hover{color:#fff;border-bottom-color:#fff}
.band-blue .kicker,.band-blue .meta,.band-blue .cap{color:rgba(243,247,248,.65)}
.band-sunken{background:var(--paper-02)}
/* Giro's own product color: the original sky blue, not part of the Fonte field palette */
.band-giro{background:var(--giro);color:#fff}
.band-giro .headline,.band-giro a{color:#fff}
.band-giro a{border-bottom-color:rgba(255,255,255,.5)}
.band-giro a:hover{color:#fff;border-bottom-color:#fff}
.band-giro .kicker,.band-giro .meta,.band-giro .cap{color:rgba(255,255,255,.78)}
.band-giro .btn{background:#fff;color:var(--ink-00);border-color:#fff}
.band-giro .btn:hover{background:transparent;color:#fff}
.band-giro .field label{color:rgba(255,255,255,.85)}
.band-green{background:var(--green);color:var(--on-green)}
.band-green .headline,.band-green a{color:var(--on-green)}
.band-green a{border-bottom-color:rgba(241,243,236,.45)}
.band-green a:hover{color:#fff;border-bottom-color:#fff}
.band-green .kicker,.band-green .meta,.band-green .cap{color:rgba(241,243,236,.7)}
.band-green .btn{background:var(--on-green);color:var(--ink-00);border-color:var(--on-green)}
.band-green .btn:hover{background:transparent;color:var(--on-green)}
.band-green .field label{color:rgba(241,243,236,.75)}
.band-green .stack-list>div{border-top-color:rgba(241,243,236,.3)}
.band-green .rule-head{border-top-color:var(--on-green)}

/* Hero fields: content high, a large area of empty color below (canonical) */
.hero-field{padding-top:clamp(48px,6.5vw,96px);padding-bottom:clamp(96px,13vw,190px)}

/* ---------- Forms ---------- */
.field label{display:block;font-family:var(--font-sans);font-weight:500;font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-03);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-weight:400;font-size:16px;color:var(--ink-00);background:var(--paper-00);border:1px solid var(--ink-04);border-radius:2px;padding:12px 14px;transition:border-color var(--dur-fast) var(--ease-standard)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink-00);outline:2px solid var(--blue);outline-offset:2px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-04)}
.field textarea{resize:vertical;line-height:1.6}

/* ---------- Figures ---------- */
figure{margin:0}
figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-00);color:rgba(252,251,248,.66);font-family:var(--font-sans);font-size:14px}
.site-footer a{color:rgba(252,251,248,.75);border-bottom-color:rgba(252,251,248,.25)}
.site-footer a:hover{color:#fff;border-bottom-color:#fff}
.site-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(28px,4vw,56px);padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(28px,3vw,40px)}
.site-footer .col-head{font-size:11px;letter-spacing:var(--track-caps);text-transform:uppercase;color:rgba(252,251,248,.42);margin-bottom:14px;font-weight:500}
.site-footer .legal{border-top:1px solid rgba(252,251,248,.12)}
.site-footer .legal .shell{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:20px;padding-bottom:20px;font-size:12px;color:rgba(252,251,248,.48)}

/* ---------- Utilities ---------- */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(32px,5vw,72px)}
.row-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(32px,6vw,96px);align-items:start}
@media (max-width:720px){.row-split{grid-template-columns:minmax(0,1fr)}}
.stack-list>div{padding:14px 0;border-top:.5px solid var(--ink-04);font-size:var(--size-body-s);line-height:1.6}