/* avaria.css  BUILT FILE, do not edit.
   Generated by build.sh from faces.css, tokens.css, base.css,
   bridge.css and blocks.css. Edit those and run build.sh again. */

/* ================= faces.css ================= */
/* faces.css  Two families, four files, every weight.

   Both are VARIABLE fonts, so one file per subset carries the whole weight
   range. Declaring a RANGE here (300 700) is what lets the browser reach
   weight 500 or 600. Pinning a single value clamps it, which is the bug the
   first version of this had: it shipped the same file twice under two names
   and then locked each copy to one weight.

   Cormorant Garamond  wght 300 to 700, default 300. Headings only.
   Instrument Sans     wght 400 to 700, default 400. Everything else.

   Two subsets each. The Romanian letters are split across them:
   a-breve, s-comma and t-comma live in latin-ext, a-circumflex and
   i-circumflex live in latin. Both are needed, so both are loaded. */

@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(fonts/cormorant-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(fonts/cormorant-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/instrument-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/instrument-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Oswald, the condensed poster face. Variable, wght 200 to 700.

   Only the Gringo's page uses it, through its own --disp token. That page
   already named Oswald in its stack, third after Avenir Next Condensed and
   Futura, but it was never downloaded, so the heading fell to Arial Narrow
   or Impact depending on the machine. Loading it properly keeps the page
   loud, which is the point of a Tex Mex restaurant, and makes it the same
   loud everywhere.

   Romanian is covered across the two subsets, same split as the others. */

@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url(fonts/oswald-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Oswald';
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url(fonts/oswald-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ================= tokens.css ================= */
/* tokens.css  Every value the Avaria system uses, measured off their build.

   Where their template had a fault, this fixes it and says so:
     gold was hijacking a variable still named dusty-blue, renamed here
     gutter jumped 50px straight to 16px, a 900px tablet got a phone edge,
       so there is a step at 32px now
     the small section token grew back to 60px at 767px, taller than the
       generous sections, set to 32px
     two pairs of steps sat half a pixel apart, collapsed to one each */

:root{
  /* PAPER AND INK */
  --av-paper:#ffffff;          /* page, and cards inside the grey bands */
  --av-band:#f1f1f2;           /* the grey section bands and the footer */
  --av-ink:#1a1a1a;            /* every heading and body line */
  --av-ink-2:#535353;          /* eyebrows, leads, card copy, captions */
  --av-ink-3:#9a9a9a;          /* the quietest label */
  --av-chip:#e4edf2;           /* the one cool tint, category chips */
  --av-chip-ink:#616161;
  --av-gold:#c9a96e;           /* brand accent */
  --av-line:rgba(26,26,26,.12);
  --av-glass:rgba(255,255,255,.2);

  /* TYPE */
  --av-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --av-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --av-disp:"Oswald","Arial Narrow",Impact,sans-serif;   /* condensed poster */
  --av-body:1.125rem;          /* 18px, not 16, this is the one that sets the tone */

  /* the heading ladder, fluid between the breakpoints they hand wrote */
  --av-h1:clamp(2.75rem,9vw,7rem);
  --av-h2:clamp(2rem,4.4vw,3rem);       /* 48px top */
  --av-h3:clamp(1.5rem,3vw,2.5rem);     /* 40px top */
  --av-h4:1.5rem;
  --av-h5:1.4rem;
  --av-h6:1rem;

  --av-lh-tight:1.1em;
  --av-lh-head:1.2em;
  --av-lh-mid:1.4em;
  --av-lh-body:1.6em;

  /* SPACE */
  --av-pad:3.125rem;           /* 50px side gutter */
  --av-wrap:82.5rem;           /* 1320px, never changes */
  --av-sec:8.5rem;             /* 136px, the generous sections */
  --av-sec-sm:3.75rem;         /* 60px, the tight ones */
  --av-gap-xs:.5rem;           /* 8 */
  --av-gap-sm:1rem;            /* 16 */
  --av-gap:1.5rem;             /* 24, the repeating card pad */
  --av-gap-md:2rem;            /* 32 */
  --av-gap-lg:3.75rem;         /* 60 */
  --av-gap-xl:4rem;            /* 64 */

  /* SHAPE */
  --av-r-sm:.25rem;            /* 4, buttons */
  --av-r:.5rem;                /* 8, pills and note cards */
  --av-r-md:1rem;              /* 16, the default for cards and frames */
  --av-r-lg:1.25rem;           /* 20 */
  --av-shadow:0 2px 5px rgba(0,0,0,.2);
  --av-shadow-nav:0 1px 24px rgba(0,0,0,.08);

  --av-ease:cubic-bezier(.22,1,.36,1);
  --av-slow:.6s;
}

/* the gutter step their build was missing, so a tablet is not a phone */
@media (max-width:991px){
  :root{ --av-pad:2rem; --av-sec:5rem; --av-sec-sm:2.5rem; }
}
@media (max-width:767px){
  :root{ --av-pad:1rem; --av-sec:3rem; --av-sec-sm:2rem; }
}

/* ================= base.css ================= */
/* base.css  The type ladder, applied to plain elements.

   Loaded AFTER a page's own stylesheet, so it wins on type and loses on
   layout. That order is deliberate: we are changing how the portfolio reads,
   not how any page is built.

   Two rules from the Avaria build carry the whole feel:
     body sits at 18px, not 16
     every heading and paragraph has zero margin, all rhythm comes from gaps */

body{
  font-family:var(--av-sans);
  font-size:var(--av-body);
  line-height:var(--av-lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--av-serif);
  font-weight:400;
  letter-spacing:0;
  margin:0;
}
h1{font-size:var(--av-h1);line-height:var(--av-lh-head)}
h2{font-size:var(--av-h2);line-height:var(--av-lh-tight)}
h3{font-size:var(--av-h3);line-height:var(--av-lh-tight)}
h4{font-size:var(--av-h4);line-height:var(--av-lh-tight)}
h5{font-size:var(--av-h5);line-height:var(--av-lh-head)}
h6{font-size:var(--av-h6);line-height:var(--av-lh-tight)}

p{margin:0}

/* Nothing in the system is italic and nothing is heavier than 700. */
em,i{font-style:italic}
strong,b{font-weight:600}

/* Their build had no focus ring at all. Keyboard users got the browser
   default or nothing. One visible ring, in the brand colour. */
:focus-visible{outline:2px solid var(--av-gold);outline-offset:2px}

/* Their nav links were a 19.8px tall text line and the hamburger was a
   20.8px square on a phone, both well under the 44px a thumb needs. */
.av-tap{min-height:44px;display:inline-flex;align-items:center}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ================= bridge.css ================= */
/* bridge.css  Hands the Avaria type to pages that were already built.

   Every page in the portfolio writes font-family:var(--serif) and
   var(--sans) dozens of times, but each one defined those tokens
   differently, naming fonts nobody downloads: Canela and Recoleta are
   commercial, Playfair Display is a Google font that is never loaded, Didot
   and Bodoni 72 exist only on a Mac. Five pages never defined them at all,
   so those declarations were simply invalid and the text fell back to
   whatever the browser felt like.

   Redefining the two names here, in a sheet loaded after the page's own,
   switches the whole portfolio onto real downloaded type without touching
   nineteen stylesheets. Load order is what makes it work.

   A page that genuinely needs its own face can set --serif again in its own
   sheet AFTER this one, and it wins. */

:root{
  --serif:var(--av-serif);
  --sans:var(--av-sans);
  /* One page keeps its poster type in a third token. It asked for Avenir
     Next Condensed and Futura, which are Mac only, then Oswald, which was
     never downloaded, so it fell to Arial Narrow or Impact depending on the
     machine. Oswald is loaded now, so the page keeps the loud condensed
     character it was designed with and gets it on every device. Putting a
     serif here instead made a Tex Mex restaurant read like a wine bar. */
  --disp:var(--av-disp);
}

/* Some pages ask for weight 300 or 500 on a heading. Both families carry
   the full range now, so those land on real weights instead of being
   clamped to one and faked by the browser. */

/* ================= blocks.css ================= */
/* blocks.css  The four moves worth taking from the Avaria build.

   Opt in per page by adding the class. Nothing here fires unless a page
   asks for it, so adding this sheet to a page changes nothing on its own. */

/* 1. ONE SECTION HEADER, used everywhere.
      Small grey tag, big serif line, grey paragraph. */
.av-head{display:flex;flex-direction:column;gap:var(--av-gap-sm);max-width:52ch}
.av-head--mid{margin-inline:auto;text-align:center}
.av-head--wide{max-width:none}
.av-head__tag{font-family:var(--av-sans);font-size:var(--av-body);
  line-height:var(--av-lh-mid);color:var(--av-ink-2)}
.av-head h2{font-size:var(--av-h2);line-height:var(--av-lh-tight)}
.av-head p{color:var(--av-ink-2);line-height:var(--av-lh-body)}

/* 2. THREE PANELS THAT WIDEN ON HOVER.
      Theirs is driven by GSAP. flex-basis does the same for nothing.
      Never neutral: with no hover the first panel is already open, which is
      what stops the row looking dead when the page loads. */
.av-panels{display:flex;gap:var(--av-gap-xs);align-items:stretch}
.av-panel{flex:0 0 20%;min-width:0;border-radius:var(--av-r-md);overflow:hidden;
  position:relative;transition:flex-basis var(--av-slow) var(--av-ease)}
.av-panels .av-panel:first-child{flex-basis:60%}
.av-panels:hover .av-panel{flex-basis:20%}
.av-panels .av-panel:hover{flex-basis:60%}
.av-panel img{width:100%;height:100%;object-fit:cover;display:block}
.av-panel figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:var(--av-gap-sm);color:#fff;font-size:.9rem;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
@media (max-width:767px){
  .av-panels{flex-direction:column}
  .av-panel,.av-panels .av-panel:first-child{flex-basis:auto;aspect-ratio:16/10}
}

/* 3. THE GLASS PILL ON A PHOTO.
      The dashed border is the detail that makes it, a solid one looks like
      a button. */
.av-pill{position:absolute;top:2%;left:2%;display:inline-flex;align-items:center;
  gap:.5rem;padding:.62rem .75rem;border:1px dashed #fff;border-radius:var(--av-r);
  background:var(--av-glass);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);color:#fff;font-size:1rem;line-height:1.1}

/* 4. A ROW DRAGGED SIDEWAYS BY THE VERTICAL SCROLL.
      The section pins and the row travels exactly its own overflow, so the
      last card lands flush instead of stopping short or running past. */
.av-track{position:relative}
.av-track__rail{height:300vh}
.av-track__stick{position:sticky;top:0;height:100vh;display:flex;
  flex-direction:column;justify-content:center;gap:var(--av-gap-md);
  overflow:hidden}
.av-track__row{display:flex;gap:var(--av-gap-sm);padding-inline:var(--av-pad);
  will-change:transform}
.av-track__row > *{flex:0 0 auto}

/* Cards, the repeating 24px pad and 16px radius. */
.av-card{background:var(--av-band);border-radius:var(--av-r-md);
  padding:var(--av-gap);display:flex;flex-direction:column;gap:var(--av-gap-sm)}
.av-card--paper{background:var(--av-paper);box-shadow:var(--av-shadow)}

/* Buttons. 52px tall clears the 44px a thumb needs, theirs did too. */
.av-btn{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 var(--av-gap-md);border:0;border-radius:var(--av-r-sm);
  background:var(--av-ink);color:var(--av-paper);font-family:var(--av-sans);
  font-size:var(--av-body);line-height:1;text-decoration:none;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate}
.av-btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--av-gold);transform:translateY(100%);
  transition:transform var(--av-slow) var(--av-ease)}
.av-btn:hover::after{transform:translateY(0)}
.av-btn--ghost{background:transparent;color:var(--av-ink);
  box-shadow:inset 0 0 0 1px currentColor}

/* The grey band that sets the page rhythm: white, grey, white, grey. */
.av-band{background:var(--av-band)}
.av-wrap{max-width:var(--av-wrap);margin-inline:auto;
  padding-inline:var(--av-pad)}
.av-sec{padding-block:var(--av-sec)}
.av-sec--sm{padding-block:var(--av-sec-sm)}

@media (prefers-reduced-motion:reduce){
  .av-track__rail{height:auto}
  .av-track__stick{position:static;height:auto}
  .av-track__row{flex-wrap:wrap;transform:none !important}
}