/* Latirra — shared site styles (Xarcuteria direction, CI Book 2024 / Nadia styleguide) */
/* The two faces the CI Book actually specifies (Sec.03 Type System): Albert Sans
   for body/UI (p.13, OFL) and Argesta Display for headlines (p.14, licensed).
   Both self-hosted — nothing loads from Google Fonts any more.

   Fraunces stood in for Argesta here until 2026-08-08, on a claim that Argesta
   "cannot be web-embedded". That was wrong: the webfont kit has shipped inside
   Nadia's `Latirra CI.zip` since 2024. The real constraint was licence *scope* —
   atipo grants one (1) website per webfont licence, and the first was spent on the
   proposal deck at gateway.goco.bz/latirra-marketing/. A second licence covers
   latirra.com, which is what these files sit under.

   Rules that still bind, so read before reusing:
   - One licence, one website. A third surface needs a third licence.
   - The desktop half of the same licence forbids converting fonts to webfont
     formats. These files are copied verbatim from the supplied kit; never generate
     cuts from `Latirra edit.ai` or an installed copy.
   Terms and provenance: content/brand/ArgestaDisplay-LICENCE.md — kept out of
   public/ deliberately, since everything under public/ is web-served.

   Argesta Display ships Regular and Italic only — no bold. Headings are therefore
   weight 400, not the 500 they used under variable Fraunces: asking for a weight
   the family does not have gets a synthetic smear, which on a high-contrast display
   serif reads as broken. The CI's own hierarchy (p.15) specifies "Argesta Display
   Regular" anyway, so this moves toward the styleguide rather than away from it.

   --thai is in BOTH stacks because neither brand face carries a single Thai glyph
   and this site is bilingual — menu.html alone holds ~490 Thai characters, much of
   it in serif contexts (.mrow .nm). Font fallback is per-glyph, so Latin still comes
   from the brand faces. This mirrors what espana-campeones.css already does via
   :lang(th). Note the main pages carry no lang="th" attributes yet, so a screen
   reader will not switch voice — that markup pass is still outstanding. */
@font-face{
  font-family:"Albert Sans";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/AlbertSans.woff2") format("woff2");
}
@font-face{
  font-family:"Albert Sans";font-style:italic;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/AlbertSans-Italic.woff2") format("woff2");
}
@font-face{
  font-family:"Argesta Display";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/ArgestaDisplay.woff2") format("woff2");
}
@font-face{
  font-family:"Argesta Display";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/ArgestaDisplay-Italic.woff2") format("woff2");
}
:root{
  --eucalyptus:#628475;--forest:#163022;--forest-2:#0f2318;
  --salmon:#DD6348;--terracotta:var(--salmon); /* canonical brand name is Salmon; --terracotta kept as alias */
  --salmon-deep:#bd4528;                        /* AA-safe salmon for text/solid surfaces (≥4.5:1 on cream & white) */
  --sand:#DDBFA7;--pottery:#966D48;--muted:#7a5638; /* --muted: AA-safe brown for small text on cream */
  --cream:#F8E3D2;--cream-2:#fdf1e6;--line:#ead9c6;
  --thai:"Noto Sans Thai","Leelawadee UI","Sarabun","Thonburi";
  --serif:"Argesta Display",var(--thai),Georgia,serif;
  --sans:"Albert Sans",var(--thai),system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--forest);background:var(--cream-2);line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.serif{font-family:var(--serif)}
/* 400, not 500 — Argesta Display has no bold cut; see the font note at the top. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.center{text-align:center}
p{max-width:68ch}

/* buttons */
.btn{display:inline-block;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:14px 28px;border-radius:40px;transition:background .25s,color .25s,transform .1s;cursor:pointer;border:1px solid transparent}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--salmon-deep);color:#fff}.btn-solid:hover{background:#a83c22}
.btn-line{border-color:var(--forest);color:var(--forest)}.btn-line:hover{background:var(--forest);color:var(--cream)}
.btn-line.on-dark{border-color:var(--sand);color:var(--sand)}.btn-line.on-dark:hover{background:var(--sand);color:var(--forest)}

/* skip link (a11y) */
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;border-radius:6px;z-index:60}

/* focus ring — currentColor adapts to any ground (cream, forest, salmon) */
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}

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

/* real Latirra wordmark (SVG) — replaces the text/‘sun’ stand-in in nav + footer */
.brand-logo{display:block;height:30px;width:auto}
@media(min-width:841px){.brand-logo{height:33px}}
.footer .flogo{height:34px;width:auto}

/* azulejo divider */
.azulejo{height:20px;background-repeat:repeat-x;background-size:40px 20px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'><rect width='40' height='20' fill='%23163022'/><g fill='none' stroke='%23DD6348' stroke-width='1.4'><path d='M20 2 L28 10 L20 18 L12 10 Z'/><circle cx='20' cy='10' r='2.5' fill='%23DDBFA7' stroke='none'/><path d='M0 10 L6 4 M0 10 L6 16 M40 10 L34 4 M40 10 L34 16' stroke='%23628475'/></g></svg>");}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(253,241,230,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:15px 32px;max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center}
.links{display:flex;gap:26px;align-items:center}
.links a{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.links a:hover,.links a[aria-current="page"]{color:var(--salmon-deep)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-size:24px;color:var(--forest)}

/* generic interior page header */
.page-hero{position:relative;overflow:hidden;background:var(--forest);color:var(--cream);padding:70px 0 60px;text-align:center}
.page-hero>.wrap{position:relative;z-index:1}
.page-hero .eyebrow{color:var(--sand)}
.page-hero h1{font-size:clamp(38px,6vw,68px);margin:.15em 0 .1em}
.page-hero h1 .ib{font-style:italic;font-weight:400;color:var(--salmon)}
.page-hero p{max-width:52ch;margin:12px auto 0;color:#e7d8c5}
/* Iberian mountain-ridgeline key visual — subtle, secondary role (per styleguide) */
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:116px;pointer-events:none;opacity:.5;
  background:bottom/100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 132 L150 70 L250 104 L360 44 L470 96 L560 62 L680 110 L800 40 L900 92 L1010 58 L1140 108 L1250 66 L1340 98 L1440 60' fill='none' stroke='%23DDBFA7' stroke-width='1.5' stroke-linejoin='round' opacity='.55'/%3E%3Cpath d='M0 138 L120 104 L240 124 L380 88 L520 122 L640 100 L780 128 L920 92 L1060 122 L1200 102 L1320 124 L1440 98' fill='none' stroke='%23628475' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* sections */
section{padding:88px 0}
.tight{padding:60px 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:34px}
.head h2{font-size:clamp(28px,4.2vw,48px)}
.lead{font-family:var(--serif);font-size:clamp(24px,3.2vw,38px);line-height:1.22;max-width:22ch}

/* placeholder media (until real photography is loaded) — branded holding frames, not flat blocks */
.ph{background:linear-gradient(135deg,#e6a06f,#a5572f);border-radius:8px;position:relative;overflow:hidden;color:#fff2e6;min-height:220px}
.ph.green{background:linear-gradient(135deg,#8aa08f,#425c48)}
.ph.dark{background:linear-gradient(135deg,#6d4e37,#2a1d14)}
.ph::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.2;
  background:center/74% auto no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' fill='none' stroke='%23F8E3D2' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M0 48 L38 20 L64 38 L96 10 L128 40 L162 18 L200 44'/%3E%3C/svg%3E")}
.ph::after{content:attr(data-label);position:absolute;left:0;right:0;bottom:0;padding:12px 15px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:linear-gradient(transparent,rgba(60,25,10,.62))}

/* .ph containers holding real photography — the box keeps its size, the image fills it.
   Drops the ridgeline watermark + label overlay that mark an empty placeholder. */
.ph.img{background:#2a1d14}
.ph.img::before,.ph.img::after{display:none}
.ph.img>picture{position:absolute;inset:0;display:block}
.ph.img>picture>img{width:100%;height:100%;object-fit:cover;display:block}

/* cards grid */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.card{background:var(--cream);border:1px solid #ecdcc9;border-radius:10px;overflow:hidden;transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 30px -18px rgba(60,30,15,.5)}
.card .ph{min-height:210px;border-radius:0}
.card .b{padding:18px 20px}
.card h3{font-size:21px}.card .n{color:var(--muted);font-size:13.5px;margin-top:5px}
.card .pr{float:right;font-family:var(--serif);color:var(--salmon-deep);font-size:19px}

/* editorial menu list */
.mlist{border-top:1px solid var(--line)}
.mrow{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.mrow .nm{font-family:var(--serif);font-size:22px}
.mrow .ds{color:var(--muted);font-size:14px;margin-top:3px}
.mrow .pr{font-family:var(--serif);font-size:20px;color:var(--salmon-deep);white-space:nowrap}
.mrow .pr.tba{color:var(--muted);font-style:italic;font-size:14px}
.menu-cat{margin-top:56px}
.menu-cat h2{font-size:clamp(26px,3.6vw,40px)}
.menu-cat .k{color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* dark band */
.band-dark{background:var(--forest);color:var(--cream)}
.band-dark .eyebrow{color:var(--sand)}
.band-dark .ph{background:linear-gradient(135deg,#6d4e37,#2a1d14)}
.band-dark blockquote{font-family:var(--serif);font-size:clamp(22px,2.8vw,32px);font-style:italic;line-height:1.28;margin-bottom:18px}
.band-dark p{color:#e3d4c1}
.band-terra{background:var(--terracotta);color:#fff2ea;text-align:center}
.band-terra h2{font-size:clamp(28px,4.4vw,50px);margin-bottom:12px}
.band-terra p{max-width:48ch;margin:0 auto 24px;color:#ffe6da}
.band-terra .btn-solid{background:var(--forest)}.band-terra .btn-solid:hover{background:var(--forest-2)}

/* Secondary booking routes. Google Calendar is the primary CTA everywhere; this
   row carries the fallbacks (request-a-table form, Papaya, LINE, phone).
   Contrast: --muted/--salmon-deep are the documented AA-safe pair on cream. On
   .band-terra (#DD6348, L=0.248) white only reaches 3.5:1 — below AA for 14px —
   so the row flips to --forest-2 (4.7:1). On .band-dark, --sand gives 8.2:1. */
.book-alt{margin-top:16px;font-size:14px;line-height:1.5;color:var(--muted)}
.book-alt a{color:var(--salmon-deep);text-decoration:underline;text-underline-offset:3px}
.book-alt a:hover{text-decoration-thickness:2px}
.band-terra .book-alt,.band-terra .book-alt a{color:var(--forest-2)}
.band-dark .book-alt,.band-dark .book-alt a{color:var(--sand)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery .ph{min-height:210px;border-radius:6px}
.gallery .ph.wide{grid-column:span 2}
.gallery .ph.tall{grid-row:span 2}

/* prose (about) */
.prose{max-width:70ch;margin:0 auto}
.prose p{margin-bottom:18px;font-size:17px;color:#3a352d;max-width:none;text-wrap:pretty}
.prose h2{margin:36px 0 12px;font-size:clamp(24px,3vw,34px)}
.prose blockquote{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.4;color:var(--forest);margin:30px 0}
.prose blockquote::before{content:"\201C";display:block;font-style:normal;font-size:2.4em;line-height:.55;color:var(--salmon);margin-bottom:.06em}

/* info rows / contact */
.inforow{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.inforow .k{color:var(--muted);letter-spacing:.04em}
.inforow b{font-family:var(--serif);font-weight:400}
.form label{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--salmon-deep);box-shadow:0 0 0 3px rgba(221,99,72,.18)}
.form input,.form textarea,.form select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;color:var(--forest)}
.form textarea{min-height:120px;resize:vertical}
/* two-up field rows; collapse on narrow screens */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
/* honeypot — off-screen rather than display:none so bots that skip hidden
   fields still fill it. Hidden from AT via aria-hidden + tabindex="-1". */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* PDPA consent — deliberately unticked by default; never pre-checked. The
   label is full-size (not fine print) because buried consent is not consent. */
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:22px}
.consent input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--salmon-deep)}
.consent label{margin:0;font-size:14px;line-height:1.5;letter-spacing:normal;text-transform:none;color:#4a4034}
.formstatus{margin-top:14px;font-size:15px;min-height:1.4em}
.formstatus.ok{color:var(--forest);font-weight:600}
.formstatus.err{color:var(--salmon-deep);font-weight:600}
.map{border-radius:12px;overflow:hidden;min-height:340px;border:1px solid var(--line)}

/* pillars (icons row) */
.pillars .row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.pillars .ic{height:46px;margin-bottom:12px}
.pillars h3{font-size:22px}.pillars p{color:var(--muted);font-size:14px;max-width:26ch;margin:6px auto 0}

/* footer */
.footer{background:var(--forest);color:#cdbda9;padding:60px 0 28px;font-size:14px}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:34px}
.footer b.logo{font-family:var(--serif);color:var(--cream);font-size:22px;letter-spacing:.14em}
/* --sans is deliberate: h1..h4 default to --serif, but Argesta has no bold cut, so
   an h4 at 600 got a synthesised one. These are 12px uppercase utility labels, and
   the CI puts Level 4 company information in Albert Sans anyway (Sec.03 p.15). */
.footer h4{font-family:var(--sans);color:var(--sand);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;font-weight:600}
.footer a:hover{color:#fff}
.footer .badge{display:inline-block;border:1px solid var(--eucalyptus);border-radius:4px;padding:7px 11px;color:var(--sand);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-top:14px}
.fbar{border-top:1px solid #2b4636;margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#a7b7ab;font-size:12px}

/* home hero */
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:50px;align-items:center}
.hero-art{position:relative;min-height:460px}

@media(max-width:840px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-art{min-height:300px}
  .links{position:fixed;inset:56px 0 auto 0;flex-direction:column;background:var(--cream-2);border-bottom:1px solid var(--line);padding:18px 32px;gap:16px;display:none}
  .links.open{display:flex}
  .nav-toggle{display:block}
  .grid-3,.grid-2,.pillars .row,.fcols,.gallery,.fgrid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}.gallery .ph.wide{grid-column:span 1}
  section{padding:60px 0}
}

/* Nav collapse breakpoint — raised again for the 8-item nav.
   The nav gained a seventh link (¡Campeones!, +71px) and then an eighth
   (Corporate, ~+88px incl. gap), which overflows the bar and forces horizontal
   page scroll between the 840px mobile breakpoint and the point where the
   links finally fit, and leaves the brand nearly touching the links just above
   that. At 1180px the eight links + Book button + wordmark need ~1045px of the
   1116px available inside the container, so the hamburger has to take over by
   then. These three rules mirror the ones in the 840px block above; the
   grid/section rules stay at 840.
   Was 1080px for seven links. Note the ¡Campeones! link removes itself at the
   promo's expiry (stripPromoNav in src/index.js), taking the nav back to seven
   items — at which point 1180px is ~100px conservative and the hamburger
   appears slightly earlier than strictly needed. That is harmless, and a
   static breakpoint cannot know the date, so it stays. Revisit only if the
   link count changes again. */
@media(max-width:1180px){
  .links{position:fixed;inset:56px 0 auto 0;flex-direction:column;background:var(--cream-2);border-bottom:1px solid var(--line);padding:18px 32px;gap:16px;display:none}
  .links.open{display:flex}
  .nav-toggle{display:block}
}