/* ==========================================================================
   lyddandyaffa.com — site.css
   Lydd & Yaffa, Inc. · "Aurora Midnight" (Brand_Guide_v2.md)

   SELF-CONTAINED. This file depends on nothing outside web/site/. It is not a
   copy of any other site's stylesheet: it carries the Aurora Midnight tokens
   and component vocabulary from Brand_Guide_v2.md, trimmed to the six pages
   this site actually has.

   Two brand rules are enforced here structurally rather than by hand:

   1. CORAL EXACTLY ONCE PER VIEW (Brand Guide v2 §1, the single-accent rule).
      On the storefront that one element is .ly-rule, the short rule under the
      wordmark. There is no second coral anywhere in this file: every button is
      a gold hairline, the skip link is ivory on plum, and no state — hover,
      focus, active — introduces one. Search this file for --coral: it is
      declared once as a token and used once as a value.
   2. GOLD IS A LINE AND A FIGURE, NEVER A FIELD (§1, §9). Gold appears as
      hairlines, small caps labels, numbers and button borders. No gold ground.

   NO GREEN FIELDS. Green belongs to Alliance Realty & Financial Services, Inc.
   The only green on this site is inside the tie illustrations themselves.

   Zero build. Custom properties, logical properties, mobile-first. The one script
   on the site is the order lookup on /orders (js/orders.js); nothing here needs it.
   ========================================================================== */

/* ---------- Fonts (self-hosted, same four faces as the brand kit) ---------- */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/PlayfairDisplay-Bold.woff2") format("woff2"),url("../assets/fonts/PlayfairDisplay-Bold.ttf") format("truetype")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/Montserrat.woff2") format("woff2"),url("../assets/fonts/Montserrat.ttf") format("truetype")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;src:url("../assets/fonts/EBGaramond.woff2") format("woff2"),url("../assets/fonts/EBGaramond.ttf") format("truetype")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("../assets/fonts/JetBrainsMono.woff2") format("woff2"),url("../assets/fonts/JetBrainsMono.ttf") format("truetype")}

/* ---------- Tokens ---------- */
:root{
  /* palette */
  --night:#1B1434;
  --night-floor:#110A22;
  --plum:#361E57;
  --violet:#8362ED;
  --cyan:#52CFF3;
  --cyan-deep:#0096B8;
  --coral:#FD6844;        /* the single accent — used once, on .ly-rule */
  --gold:#E3AD4B;
  --gold-deep:#7E5500;    /* gold as TEXT on light grounds (AA) */
  --ivory:#FBF7F0;
  --ivory-2:#C3C1D7;
  --ink-plum:#1E142E;
  --ink-plum-2:#544272;

  /* semantic — night is the default ground */
  --bg:var(--night);
  --bg-floor:var(--night-floor);
  --fg:var(--ivory);
  --fg-2:var(--ivory-2);
  --line:rgba(251,247,240,.14);
  --line-gold:rgba(227,173,75,.45);
  --line-bright:rgba(82,207,243,.55);
  --card:rgba(251,247,240,.055);
  --card-hover:rgba(251,247,240,.10);
  --glass:rgba(27,20,52,.45);
  --glass-edge:rgba(251,247,240,.12);
  --focus:var(--cyan);
  --gold-text:var(--gold);
  --nav-bg:rgba(17,10,34,.72);
  --shadow:0 30px 80px -30px rgba(5,2,16,.85);
  --mesh-a:rgba(131,98,237,.55);
  --mesh-b:rgba(82,207,243,.28);
  --mesh-c:rgba(124,74,168,.20);   /* violet-plum, NOT coral — see the coral rule at the top */
  --mesh-d:rgba(54,30,87,.85);

  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-label:"Montserrat","Segoe UI",Helvetica,Arial,sans-serif;
  --font-prose:"EB Garamond",Garamond,"Times New Roman",Georgia,serif;
  --font-mono:"JetBrains Mono",Consolas,"SF Mono",Menlo,monospace;

  --measure:62ch;
  --gutter:clamp(1.25rem,4vw,3rem);
  --section:clamp(3.5rem,8vw,6.5rem);
  --radius:18px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

/* Light ground. Two selectors, one token set:
   - the media query serves a visitor whose system asks for light;
   - [data-scheme="light"] is set on <html> by the policy pages, which run on a
     fixed daylight ground because a policy has to be legible before it is pretty.
   There is no scheme toggle: this site ships no JavaScript. */
@media (prefers-color-scheme:light){
  :root{
    --bg:var(--ivory);
    --bg-floor:#F1ECE4;
    --fg:var(--ink-plum);
    --fg-2:var(--ink-plum-2);
    --line:rgba(30,20,46,.14);
    --line-gold:rgba(140,95,0,.45);
    --line-bright:rgba(0,150,184,.45);
    --card:rgba(255,255,255,.5);
    --card-hover:rgba(255,255,255,.8);
    --glass:rgba(255,255,255,.55);
    --glass-edge:rgba(255,255,255,.7);
    --focus:var(--cyan-deep);
    --gold-text:var(--gold-deep);
    --nav-bg:rgba(251,247,240,.78);
    --shadow:0 30px 80px -30px rgba(30,20,46,.35);
    --mesh-a:rgba(131,98,237,.18);
    --mesh-b:rgba(82,207,243,.20);
    --mesh-c:rgba(124,74,168,.14);
    --mesh-d:rgba(227,173,75,.12);
    color-scheme:light;
  }
}
:root[data-scheme="light"]{
  --bg:var(--ivory);
  --bg-floor:#F1ECE4;
  --fg:var(--ink-plum);
  --fg-2:var(--ink-plum-2);
  --line:rgba(30,20,46,.14);
  --line-gold:rgba(140,95,0,.45);
  --line-bright:rgba(0,150,184,.45);
  --card:rgba(255,255,255,.5);
  --card-hover:rgba(255,255,255,.8);
  --glass:rgba(255,255,255,.55);
  --glass-edge:rgba(255,255,255,.7);
  --focus:var(--cyan-deep);
  --gold-text:var(--gold-deep);
  --nav-bg:rgba(251,247,240,.78);
  --shadow:0 30px 80px -30px rgba(30,20,46,.35);
  --mesh-a:rgba(131,98,237,.18);
  --mesh-b:rgba(82,207,243,.20);
  --mesh-c:rgba(124,74,168,.14);
  --mesh-d:rgba(227,173,75,.12);
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:5.5rem;background:var(--bg-floor);overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-prose);font-size:clamp(1.05rem,1rem + .35vw,1.22rem);line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative;
  min-block-size:100dvh;display:flex;flex-direction:column;
}
main{flex:1 0 auto}

/* The signature ground: one fixed aurora mesh behind everything. Violet upper
   left, cyan right, a violet-plum glow at the bottom edge, plum floor. Static —
   nothing on this site moves. No mesh stop is coral: the bottom glow used to be
   rgba(253,104,68,…), which is --coral spelled as raw rgba, and it made coral an
   ambient field on every page while the header claimed it appeared once. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(55% 45% at 18% 10%,var(--mesh-a),transparent 70%),
    radial-gradient(40% 40% at 86% 26%,var(--mesh-b),transparent 70%),
    radial-gradient(45% 38% at 60% 96%,var(--mesh-c),transparent 70%),
    radial-gradient(60% 55% at 8% 74%,var(--mesh-d),transparent 72%),
    linear-gradient(180deg,var(--bg),var(--bg-floor));
}
/* A veil so long text columns stay calm on top of the mesh. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,10,34,0),rgba(17,10,34,.3));
}
@media (prefers-color-scheme:light){
  body::after{background:linear-gradient(180deg,rgba(251,247,240,0),rgba(251,247,240,.45))}
}
:root[data-scheme="light"] body::after{background:linear-gradient(180deg,rgba(251,247,240,0),rgba(251,247,240,.45))}

img,video,canvas,svg{display:block;max-inline-size:100%;block-size:auto}
a{color:inherit;text-decoration-color:var(--line-gold);text-underline-offset:.18em;transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--gold-text)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold);color:var(--ink-plum)}

/* overflow-wrap keeps a long display word from pushing the page wider than 320px. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(2.2rem,1.5rem + 3.6vw,5.5rem);letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,1.4rem + 2.2vw,3.2rem)}
h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
p{margin:0 0 1em;max-inline-size:var(--measure);text-wrap:pretty}

.label,.eyebrow{font-family:var(--font-label);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.eyebrow{display:block;margin-block-end:1rem}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--fg-2)}
.fine{font-size:.86rem;color:var(--fg-2)}
.wrap{inline-size:min(100% - 2*var(--gutter),1200px);margin-inline:auto}
.section{padding-block:var(--section);position:relative}
.section + .section{border-block-start:1px solid var(--line)}
.section-head{margin-block-end:2rem}
.section-head p{color:var(--fg-2);font-size:1.12rem}
.visually-hidden{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Skip link. Deliberately NOT coral — coral is spent on .ly-rule, and a second
   coral would appear the moment a keyboard user pressed Tab. */
.skip{
  position:absolute;inset-inline-start:1rem;inset-block-start:-5rem;z-index:100;
  background:var(--night-floor);color:var(--ivory);border:1px solid var(--gold);
  padding:.75rem 1rem;font-family:var(--font-label);font-weight:600;border-radius:6px;
  text-decoration:none;
}
.skip:focus{inset-block-start:1rem}

/* ---------- Buttons: gold hairline, always ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-block-size:44px;padding:.7rem 1.4rem;border-radius:999px;
  font-family:var(--font-label);font-weight:600;font-size:.86rem;letter-spacing:.04em;
  text-decoration:none;border:1px solid var(--line-gold);background:transparent;
  color:var(--gold-text);
  transition:background .25s,border-color .25s,color .25s;
}
.btn:hover{background:var(--gold);color:var(--ink-plum);border-color:var(--gold)}
@media (prefers-color-scheme:light){
  .btn:hover{background:var(--gold-deep);color:var(--ivory);border-color:var(--gold-deep)}
}

/* ---------- Header ---------- */
/* The brand's own header. No personal-site navigation, no toggle, no drawer:
   five in-page links and Orders, wrapping rather than collapsing behind a
   button, because a menu that needs JavaScript is a menu that can fail. */
.nav{
  position:sticky;inset-block-start:0;z-index:50;
  background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-block-end:1px solid var(--line);
}
.nav::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:-1px;block-size:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);opacity:.55;
}
.nav-inner{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;min-block-size:64px;padding-block:.5rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;line-height:1.1}
.brand img{inline-size:36px;block-size:36px;border-radius:8px;border:1px solid var(--line-gold)}
.brand .wordmark{font-family:var(--font-display);font-weight:700;font-size:1.15rem;letter-spacing:.01em;color:var(--fg);display:block}
.nav-links{display:flex;flex-wrap:wrap;margin-inline-start:auto;gap:.1rem 1.1rem;list-style:none;padding:0;margin-block:0}
.nav-links a{
  font-family:var(--font-label);font-weight:600;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:.6rem .3rem;display:inline-flex;align-items:center;min-block-size:44px;
  color:var(--fg-2);position:relative;
}
.nav-links a::after{content:"";position:absolute;inset-inline:.3rem;inset-block-end:.5rem;block-size:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--fg)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
@media (min-width:900px){
  .nav-inner{flex-wrap:nowrap}
  .nav-links{gap:1.3rem}
  .nav-links a{font-size:.74rem;letter-spacing:.14em}
}

/* ---------- Masthead ---------- */
.ly-masthead{padding-block-start:clamp(2.5rem,6vw,4.5rem)}
.ly-masthead .eyebrow{margin-block-end:.9rem}

/* THE one coral element on this site. Do not add a second. */
.ly-rule{display:block;inline-size:4.5rem;block-size:3px;border-radius:2px;background:var(--coral);margin-block:1.4rem 1.8rem}

.ly-lede{
  font-family:var(--font-display);font-weight:700;line-height:1.15;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);
  max-inline-size:26ch;margin-block-end:1.4rem;text-wrap:balance;
}
.ly-intro{font-family:var(--font-prose);font-size:clamp(1.08rem,1rem + .35vw,1.3rem);line-height:1.65;max-inline-size:64ch;color:var(--fg)}
.ly-names{
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.28em;color:var(--gold-text);
  margin-block-start:2rem;padding-block-start:1rem;border-block-start:1px solid var(--line-gold);
  max-inline-size:none;inline-size:fit-content;text-wrap:balance;
}
/* Four names at .28em measure 332px; a 360px phone wraps at 320px. Tighter tracking on the
   narrowest screens keeps ZAYTOUN · HANOUN · LAYL · NAHAR on one line (302px). */
@media (max-width:420px){.ly-names{letter-spacing:.2em}}

/* ---------- The four colorways ---------- */
.ly-grid{
  display:grid;gap:clamp(1.25rem,2.5vw,2rem);list-style:none;padding:0;margin:0;
  position:relative;isolation:isolate;
}
/* A soft aurora lift behind the row. Violet and cyan only — no green glow. */
.ly-grid::before{
  content:"";position:absolute;inset:-10% -4%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(55% 60% at 30% 35%,rgba(131,98,237,.26),transparent 70%),radial-gradient(40% 50% at 78% 70%,rgba(82,207,243,.12),transparent 70%);
  filter:blur(26px);
}
@media (prefers-color-scheme:light){.ly-grid::before{opacity:.45}}
@media (min-width:640px) and (max-width:899px){.ly-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.ly-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Four cards (2026-09-06, Nahar added): two-by-two until 1100px (orphans nothing), four
   across from there, so that at the common 1200px desktop width the four colorways read as
   one row (R-20). The wrap is capped at 1200px, so a four-up picture is never wider than
   231px — about 200px at 1100px — and the standing label's box (239px at .58rem/.14em,
   measured with Montserrat.ttf) would wrap to two ragged lines at every four-up width — R-17.
   In the four-up query the label is set at .5rem/.08em (195px box) and may wrap to two even
   lines on the narrowest four-up cards; max-inline-size already allows it. The two buy
   controls wrap to two lines inside .ly-buy-actions at that width (flex-wrap). */
@media (min-width:640px) and (max-width:1099px){.ly-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){
  .ly-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ly-grid-4 .shop-card picture::after{font-size:.5rem;letter-spacing:.08em}
}

.shop-card{
  display:flex;flex-direction:column;align-items:stretch;gap:.55rem;
  padding:clamp(1rem,2vw,1.4rem);
  border:1px solid var(--line);border-block-start:1px solid var(--line-gold);
  border-radius:var(--radius);background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--glass-edge);
  transition:transform .3s var(--ease),border-color .3s;
}
.shop-card:hover{transform:translateY(-3px);border-color:var(--line-gold)}
@media (prefers-reduced-motion:reduce){.shop-card{transition:none}.shop-card:hover{transform:none}}

.shop-card picture{position:relative;display:block;margin-block-end:.35rem}
.shop-card img{
  inline-size:100%;block-size:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:calc(var(--radius) - 4px);background:var(--night-floor);
}
/* The standing label on every one of these pictures. It is CSS-generated on top
   of a caption that is also written in the markup, so a reader who never loads
   this file still gets the statement. Gold hairline pill, never a field. */
.shop-card picture::after{
  content:"Illustration, not a photograph";
  position:absolute;inset-block-end:.6rem;inset-inline-end:.6rem;max-inline-size:calc(100% - 1.2rem);
  font-family:var(--font-label);font-weight:600;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);background:rgba(17,10,34,.82);
  border:1px solid var(--line-gold);border-radius:999px;padding:.32rem .62rem;
  text-align:center;line-height:1.35;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.shop-card h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);margin-block-start:.1rem}
.shop-card .meaning{
  align-self:flex-start;font-family:var(--font-label);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-text);padding-block-start:.6rem;border-block-start:1px solid var(--line-gold);
}
.shop-blurb{flex:1 1 auto;font-family:var(--font-prose);font-size:1.02rem;line-height:1.55;color:var(--fg-2);margin:0;max-inline-size:none}
/* The price line (2026-09-06; the figures are the owner's — $135 a tie, $81 a square, $189
   the two together, given late that evening). A gold hairline above, the label in the label
   face, the figure in mono with tabular figures. Gold as line and figure only — no field, and
   no coral. On every card: ties, squares and sets. */
.shop-price{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin:0;padding-block-start:.7rem;border-block-start:1px solid var(--line-gold);
}
.shop-price-label{font-family:var(--font-label);font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.shop-price-amount{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.05rem;color:var(--gold-text)}
/* ---------- The state switch and the buy forms (2026-09-06, late evening) ---------- */
/* <body data-shop-state="notify"|"live"> mirrors data/shop.json "state" (index.html, the
   comment above <body>). In "notify" every card shows its one-line "Not yet" and hides its
   form; in "live" the forms show and the lines go. The forms exist in the markup in both
   states so that opening the shop is a change to one attribute and to shop.json, not a
   rewrite. Controls are the site's gold hairline .btn — per card a submit button for the card
   rail and a link to the one crypto form (#pay-crypto) — and no state of them is coral. */
[data-shop-state="notify"] .ly-buy-live{display:none}
[data-shop-state="live"] .ly-buy-notify{display:none}
/* The assent line beside every buy button: the required checkbox that is the customer's
   agreement to the Terms of Sale (the API refuses a post without it; README, TERMS). */
.ly-assent{
  display:flex;align-items:flex-start;gap:.55rem;
  font-family:var(--font-prose);font-size:.92rem;line-height:1.45;color:var(--fg-2);cursor:pointer;
}
.ly-assent input{margin:.2rem 0 0;accent-color:var(--gold);flex:0 0 auto}
.ly-assent a{color:var(--fg)}
/* The one crypto form (#pay-crypto). Same field vocabulary as the contact form. */
.ly-crypto{
  margin-block-start:clamp(1.5rem,3vw,2.5rem);padding:clamp(1rem,2.4vw,1.6rem);
  border:1px solid var(--line);border-block-start:1px solid var(--line-gold);
  border-radius:var(--radius);background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  scroll-margin-block-start:6rem;
}
.ly-crypto .section-head{margin-block-end:0}
.ly-crypto .section-head h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);margin:0 0 .5rem}
.ly-crypto .ly-hint{margin:0;font-size:.92rem;color:var(--fg-2)}
.ly-crypto .ly-pay-note{margin-block-start:.2rem}
.ly-crypto .ly-buy-actions .btn{flex:0 0 auto}
/* The checkout refusal lines reuse .ly-errors from the contact page; they sit above the
   grid and are shown only in the live state (the aside carries .ly-buy-live). */
.ly-checkout-msgs{margin-block-end:clamp(1.5rem,3vw,2.2rem)}
.ly-checkout-msgs h3{font-family:var(--font-label);font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin:0 0 .8rem}
.ly-buy-notify{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin:0;padding-block-start:.2rem}
.ly-buy{display:grid;gap:.8rem;margin:0}
.ly-buy-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.ly-buy .btn{cursor:pointer;padding-inline:1.1rem;font-size:.8rem}
@media (max-width:520px){.ly-buy .btn{flex:1 1 100%}}
/* The mixed set's two choices: the contact form's field vocabulary, with a <select>. */
.ly-buy-choices{display:grid;gap:.9rem}
@media (min-width:520px){.ly-buy-choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ly-field select{
  inline-size:100%;box-sizing:border-box;appearance:none;-webkit-appearance:none;
  font-family:var(--font-prose);font-size:1.05rem;line-height:1.5;
  padding:.8rem 2.4rem .8rem .9rem;color:var(--fg);background:var(--card);
  border:1px solid var(--line);border-radius:10px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E3AD4B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.ly-field select:hover{border-color:var(--line-gold)}
.ly-field select:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--line-bright);background-color:var(--card-hover)}
.ly-field select option{color:var(--ink-plum);background:var(--ivory)}
.ly-pay-note{max-inline-size:60ch;margin-block-start:1.4rem}

.shop-actions{margin-block-start:1.8rem}
.shop-actions .fine{max-inline-size:54ch;margin-block-start:.9rem}

/* ---------- The note about the pictures ---------- */
/* Set as a note of record, not an apology. */
.ly-render{
  margin-block-start:clamp(2.25rem,5vw,3.5rem);
  padding:clamp(1.1rem,2.5vw,1.6rem) clamp(1.1rem,2.5vw,1.75rem);
  border:1px solid var(--line);border-block-start:1px solid var(--line-gold);
  border-radius:var(--radius);background:var(--card);
}
.ly-render h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);margin-block-end:.9rem}
.ly-render p{font-family:var(--font-prose);font-size:1.04rem;line-height:1.6;color:var(--fg-2);max-inline-size:none}
.ly-render-text p:last-child{margin-block-end:0}
/* The Nahar portrait beside the note (2026-09-06, late evening): the full render, at the
   note's side from 720px and under the words below it. The picture gets a gold hairline and
   the same caption the card carries, in the mono face. The note's box widens to hold both. */
.ly-render-grid{display:grid;gap:1.5rem;align-items:start}
@media (min-width:720px){.ly-render-grid{grid-template-columns:minmax(0,1fr) 16rem}}
.ly-render-text{max-inline-size:74ch}
.ly-render-figure{margin:0;max-inline-size:20rem}
.ly-render-figure img{inline-size:100%;block-size:auto;border-radius:calc(var(--radius) - 4px);border:1px solid var(--line-gold);background:var(--night-floor)}
.ly-render-figure figcaption{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);margin-block-start:.6rem;line-height:1.5}

/* ---------- The meaning ---------- */
.ly-meaning .wrap{max-inline-size:min(100% - 2*var(--gutter),58rem)}
.ly-quote{margin:2rem 0 0;padding-inline-start:clamp(1rem,3vw,2.25rem);border-inline-start:2px solid var(--line-gold)}
.ly-quote p{
  font-family:var(--font-prose);font-weight:500;
  font-size:clamp(1.25rem,1.05rem + 1vw,1.75rem);line-height:1.62;
  max-inline-size:52ch;margin-block-end:1.1rem;text-wrap:pretty;
}
.ly-quote footer{font-family:var(--font-label);font-weight:600;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2)}
.ly-quote cite{font-style:normal}
.ly-quote-note{margin-block-start:1.75rem;font-size:.9rem;color:var(--fg-2);font-family:var(--font-label);letter-spacing:.02em}

/* ---------- Before you order ---------- */
.ly-terms{
  display:grid;gap:1px;margin:0;padding:0;background:var(--line);
  border:1px solid var(--line);border-block-start:1px solid var(--line-gold);
  border-radius:var(--radius);overflow:hidden;
}
@media (min-width:720px){.ly-terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ly-term{background:var(--glass);padding:clamp(1rem,2.2vw,1.5rem);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ly-term dt{font-family:var(--font-label);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-block-end:.55rem}
.ly-term dd{margin:0;font-family:var(--font-prose);font-size:1.04rem;line-height:1.55;color:var(--fg)}

.ly-policies{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-block-start:1.6rem;max-inline-size:none;
  font-family:var(--font-label);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
}
.ly-policies a{
  text-decoration:none;color:var(--fg-2);border-block-end:1px solid var(--line-gold);
  padding-block:.5rem;min-block-size:44px;display:inline-flex;align-items:center;
}
.ly-policies a:hover{color:var(--fg);border-block-end-color:var(--gold-text)}
.ly-policies a:focus-visible{outline-offset:4px}

/* ---------- The seller ---------- */
.ly-idcard{
  padding:clamp(1.25rem,3vw,2rem);
  border:1px solid var(--line);border-block-start:1px solid var(--line-gold);
  border-radius:var(--radius);background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--glass-edge);max-inline-size:64rem;
}
.ly-legal-name{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);line-height:1.1;margin-block-end:.4rem}
.ly-legal-sub{color:var(--fg-2);margin-block-end:1.4rem}
/* The mono address is the widest unbreakable run on the page; it is sized down on a narrow
   screen so a 320px viewport never scrolls sideways. */
.ly-address{
  font-family:var(--font-mono);font-size:clamp(.78rem,.66rem + .5vw,.92rem);line-height:1.9;font-style:normal;
  color:var(--fg);overflow-wrap:anywhere;
  padding-block:1.1rem;border-block:1px solid var(--line-gold);margin-block-end:1.4rem;
}
.ly-address a{color:var(--gold-text);text-decoration-color:var(--line-gold)}
.ly-address a:focus-visible{outline-offset:4px}
.ly-seller-note{font-family:var(--font-prose);font-size:1.05rem;line-height:1.6;color:var(--fg-2);max-inline-size:66ch}
.ly-seller-note:last-child{margin-block-end:0}

/* ---------- Footer ---------- */
.footer{
  flex:0 0 auto;border-block-start:1px solid var(--line-gold);
  padding-block:3rem 2.5rem;background:linear-gradient(180deg,var(--bg),var(--bg-floor) 45%);
  font-size:.95rem;position:relative;isolation:isolate;
}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-block-end:1.6rem}
.footer-top img{inline-size:40px;block-size:40px;border-radius:8px;border:1px solid var(--line-gold)}
.footer-top nav a{
  font-family:var(--font-label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:var(--fg-2);margin-inline-end:1.2rem;display:inline-flex;align-items:center;min-block-size:44px;padding-block:.4rem;
}
.footer-top nav a:hover{color:var(--fg)}
.footer .licensing{color:var(--fg-2);max-inline-size:80ch;font-size:.92rem}
.footer .licensing a{color:var(--fg-2);text-decoration-color:var(--line-gold)}
.footer .licensing a:hover{color:var(--fg)}
.footer .fine{font-family:var(--font-mono);font-size:.74rem;color:var(--fg-2);margin:0;white-space:nowrap}
@media (max-width:420px){.footer .fine{font-size:.64rem}}

/* ---------- Pocket squares ---------- */
/* Picture cards, since 2026-09-06 late evening: each square card carries the print file
   the maker holds, reduced and shown flat. The earlier swatch discs (a screen color per
   ground) are gone with the "not pictured yet" copy they stood in for. Zaytoun's olive on
   the file is the product's own ground, not brand furniture. */
.ly-squares-grid{margin-block-start:0}
.ly-square{gap:.5rem}
/* THE SWATCH DISCS ARE RETIRED (2026-09-06, late evening): each square card now carries its
   own print file, shown flat and square, and the standing label on the picture says which
   kind of picture it is. The square's picture is 1:1, not the tie's 4:5, and the file is
   never cropped: the border sits near the edge and cropping would cut it. */
.ly-square img{aspect-ratio:1/1}
.ly-square picture::after{content:"The print file, shown flat"}
.ly-squares-note{margin-block-start:1.6rem;max-inline-size:66ch;font-size:1rem;line-height:1.6;color:var(--fg-2)}

/* ---------- Together: a tie and a pocket square (2026-09-06, late evening) ---------- */
/* Four matched sets in the four-up grid, then the mixed set as one wider card. The set
   picture is 3:2 — the tie's picture and the square's print file side by side on the night
   ground — and its standing label names both kinds. The mixed card lays the picture beside
   the words from 720px. Nothing here is green: the ground in every composed picture is
   night, and the only green is the product's own. */
.ly-bundle img{aspect-ratio:3/2}
.ly-bundle picture::after{content:"Illustration and print file"}
.ly-bundle-mix{margin-block-start:clamp(1.25rem,2.5vw,2rem)}
@media (min-width:720px){
  .ly-bundle-mix{display:grid;grid-template-columns:minmax(0,24rem) minmax(0,1fr);gap:clamp(1.25rem,3vw,2rem);align-items:start}
  .ly-bundle-mix picture{margin:0}
}
.ly-bundle-mix-body{display:flex;flex-direction:column;gap:.55rem;min-inline-size:0}

/* ---------- Forms: the contact form and the order lookup ---------- */
/* One vocabulary for both. Plain HTML controls on the glass card; gold labels, the
   site's cyan focus ring, and no state that is coral. */
.ly-form{
  display:grid;gap:1.35rem;max-inline-size:36rem;
  padding:clamp(1.1rem,2.4vw,1.75rem);
  background:var(--glass);border:1px solid var(--line);border-block-start:1px solid var(--line-gold);
  border-radius:var(--radius);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 var(--glass-edge);
}
.ly-field{display:grid;gap:.45rem}
.ly-field label{
  font-family:var(--font-label);font-weight:600;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);
}
.ly-field input,.ly-field textarea{
  inline-size:100%;box-sizing:border-box;
  font-family:var(--font-prose);font-size:1.05rem;line-height:1.5;
  padding:.8rem .9rem;color:var(--fg);background:var(--card);
  border:1px solid var(--line);border-radius:10px;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.ly-field input.mono{font-family:var(--font-mono);font-size:1rem}
.ly-field textarea{min-block-size:9rem;resize:vertical}
.ly-field input::placeholder,.ly-field textarea::placeholder{color:var(--fg-2);opacity:.65}
.ly-field input:hover,.ly-field textarea:hover{border-color:var(--line-gold)}
/* Inputs take focus on click as well as by keyboard, so they get the ring on :focus
   rather than relying on :focus-visible alone. */
.ly-field input:focus,.ly-field textarea:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--line-bright);background:var(--card-hover)}
.ly-field input[aria-invalid="true"]{border-color:var(--gold-text)}
.ly-hint{font-family:var(--font-prose);font-size:.98rem;line-height:1.5;color:var(--fg-2);margin:0;max-inline-size:52ch}
.ly-hint a{color:var(--gold-text);text-decoration-color:var(--line-gold)}
.ly-form-actions{display:grid;gap:.7rem;justify-items:start}
.ly-form-actions .btn{min-block-size:2.9rem;cursor:pointer}
.ly-form-actions .btn:disabled{opacity:.55;cursor:not-allowed}
.ly-form-actions .btn:disabled:hover{background:transparent;color:var(--gold-text);border-color:var(--line-gold)}
.ly-form-actions .btn[aria-busy="true"]{cursor:progress}
@media (max-width:520px){.ly-form-actions .btn{inline-size:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.ly-field input,.ly-field textarea{transition:none}}

/* The honeypot. A field a person never sees and a form-filling script does. It is
   moved off-screen rather than display:none, because some scripts skip fields that
   are display:none and fill the ones that are merely out of view — which is the
   point. tabindex="-1" and aria-hidden keep it out of the keyboard and reader order. */
.ly-hp{position:absolute;inset-inline-start:-10000px;inset-block-start:auto;inline-size:1px;block-size:1px;overflow:hidden;opacity:0}

/* An error or a notice beside a form. Marked by a gold keyline and the sentence
   itself, never by coral: coral is spent on .ly-rule. */
.ly-error,.ly-notice{
  max-inline-size:40rem;margin-block-start:1.25rem;
  font-family:var(--font-prose);font-size:1.06rem;line-height:1.6;color:var(--fg);
  padding:.9rem 1.1rem;background:var(--card);
  border:1px solid var(--line);border-inline-start:3px solid var(--gold-text);border-radius:10px;
}

/* ---------- Contact page ---------- */
.ly-contact-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (min-width:860px){.ly-contact-grid{grid-template-columns:minmax(0,36rem) minmax(0,1fr)}}
.ly-contact-aside p{max-inline-size:44ch}
.ly-contact-aside .ly-address{margin-block-end:1.2rem}

/* The reasons the form can send a visitor back. This site runs no script, so the page
   cannot read the ?error= parameter; instead every reason is written out, each with
   its own id, ABOVE the form, so that a redirect with no fragment (which is what the
   API sends today) still lands the reader on the explanation and not on an empty form.
   If the redirect does point at the block (#error) or at one line (#error-email), the
   line that is the target is picked out with :target. Without a target the block reads
   as a plain note, which is what it is. */
.ly-errors{margin-block:0 1.6rem;max-inline-size:40rem;scroll-margin-block-start:6rem}
.ly-errors h2{font-family:var(--font-label);font-weight:600;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);margin-block-end:.8rem}
.ly-errors dl{margin:0;display:grid;gap:.15rem}
.ly-errors div{padding:.55rem .8rem;border-inline-start:2px solid var(--line);border-radius:0 8px 8px 0;scroll-margin-block-start:6rem}
.ly-errors div:target{border-inline-start-color:var(--gold-text);background:var(--card)}
.ly-errors dt{font-family:var(--font-label);font-weight:600;font-size:.82rem;letter-spacing:.04em;color:var(--fg)}
.ly-errors dd{margin:.15rem 0 0;font-family:var(--font-prose);font-size:.98rem;line-height:1.5;color:var(--fg-2)}
.ly-errors div:target dd{color:var(--fg)}

/* ---------- 404 / short pages: a short centered page on the same ground ---------- */
.ly-slim{padding-block:clamp(4rem,12vw,8rem)}
.ly-slim .wrap{max-inline-size:min(100% - 2*var(--gutter),46rem)}
.ly-slim h1{font-size:clamp(2rem,1.6rem + 2.4vw,3.4rem)}
.ly-slim p{font-size:1.1rem;color:var(--fg-2)}
.ly-slim .btn{margin-block-start:1rem}

@media print{
  .nav,body::before,body::after{display:none!important}
  body{background:#fff;color:#000}
}