/* ============================================================================
   theme.css — Tondo palette + the "Specimen" brand redesign (2026-06-23).
   The site is a letterpress specimen sheet: one well-made object, catalogued on
   the cloth itself. Warm paper, system-serif display, terracotta thread.
   tokens.css supplies structure; this supplies colour + every Specimen component.
   Per-brand, NOT sync-checked — Tondo owns this look. Light + dark; dark follows
   prefers-color-scheme by default. System fonts only (brand axiom A3).
   ============================================================================ */

/* ---- light (linen, per the 2026-07-24 design handoff: true brand madder on EBE3D4) ---- */
:root,
[data-theme="light"] {
  --bg:#EBE3D4; --bg-2:#E4DAC7; --surface:#FCFAF4;
  --text:#2B2722; --text-soft:#877B67; --faint:#A3917F;
  --accent:#A8412B; --accent-2:#94371F; --accent-ink:#FCFAF4;
  --accent-text:#94371F;        /* AA for small text/links on linen */
  --line:#DBCFB8; --line-2:#CDBEA2; --sage:#7C8A5E;
  --verified:#7C8A5E; --caution:#b98a2f; --caution-text:#8a6418;
  --indigo:#3E5C6E; --blush:#F0E6DA; --chip-bg:#FCFAF4;
  --display: var(--serif);      /* Tondo = system-serif display (brand) */
  --gap:22px;                   /* rhythm unit, inherited by the older Specimen sections */
  --halo: radial-gradient(55% 55% at 80% -8%, #A8412B14, transparent 70%);
  /* The page's texture: scattered running stitches, the same object the brand mark draws.
     It REPLACED a 22px counted grid (2026-08-15). That grid literally drew aida cloth, which
     stopped being true twice over — the app is no longer named after that cloth, and it now
     serves hand embroidery, a craft with no grid at all. A tiled SVG rather than the two
     repeating-linear-gradients it replaces, because a linear gradient cannot break a line into
     stitches ALONG its own direction; dashes need a real path. The stitches sit inside the tile
     (never on an edge), so the 64px repeat has no seam to see. */
  --stitch-field:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g stroke='%23A8412B' stroke-opacity='.17' stroke-width='2.6' stroke-linecap='round'><path d='M8 22 L18 12'/><path d='M38 16 L48 6'/><path d='M18 52 L28 42'/><path d='M44 46 L54 36'/></g></svg>");
}

/* ---- dark (brand-doc dark column, handoff values) ---- */
[data-theme="dark"] {
  --bg:#1E1B17; --bg-2:#26211B; --surface:#2A231C;
  --text:#E8E1D4; --text-soft:#A99B85; --faint:#8C7E6C;
  --accent:#D2765E; --accent-2:#E19A82; --accent-ink:#1E1B17;
  --accent-text:#E19A82;
  --line:#3A322A; --line-2:#4A3E30; --sage:#9DAB7E;
  --verified:#9DAB7E; --caution:#d9b36a; --caution-text:#d9b36a;
  --indigo:#8FB0C2; --blush:#463A30; --chip-bg:#2A231C;
  --display: var(--serif);
  --halo: radial-gradient(55% 55% at 80% -8%, #D2765E18, transparent 70%);
  /* The stitch tile bakes its own colour (a data URI cannot read a CSS variable), so dark mode
     re-declares it in the dark accent rather than tinting the light one. */
  --stitch-field:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g stroke='%23D2765E' stroke-opacity='.20' stroke-width='2.6' stroke-linecap='round'><path d='M8 22 L18 12'/><path d='M38 16 L48 6'/><path d='M18 52 L28 42'/><path d='M44 46 L54 36'/></g></svg>");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#1E1B17; --bg-2:#26211B; --surface:#2A231C;
    --text:#E8E1D4; --text-soft:#A99B85; --faint:#8C7E6C;
    --accent:#D2765E; --accent-2:#E19A82; --accent-ink:#1E1B17;
    --accent-text:#E19A82;
    --line:#3A322A; --line-2:#4A3E30; --sage:#9DAB7E;
    --verified:#9DAB7E; --caution:#d9b36a; --caution-text:#d9b36a;
    --indigo:#8FB0C2; --blush:#463A30; --chip-bg:#2A231C;
    --display: var(--serif);
    --halo: radial-gradient(55% 55% at 80% -8%, #D2765E18, transparent 70%);
  }
}

/* The Specimen CSS below uses a few local aliases; map them onto the tokens so
   light + dark both track the palette (the colorset is upstream — tokens mirror). */
:root,[data-theme]{ --paper:var(--bg); --thread:var(--accent-text); --thread-2:var(--accent);
  --ink:var(--text); --soft:var(--text-soft); }

/* ============================================================================
   SPECIMEN COMPONENTS  (the redesign — homepage + shared shell)
   ============================================================================ */

/* ============================================================================
   SPECIMEN v2 COMPONENTS (Claude Design redesign 2026-06-23, owner-iterated)
   Adds the .reel video section, step-shots, and the flag langswitcher.
   ============================================================================ */

/* v2 component CSS — local color aliases (--paper/--thread/--ink/--soft/--faint/
   --line) are mapped onto the palette tokens in the header above, so light+dark track. */
*{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-size:18px;line-height:1.68;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    position:relative;overflow-x:hidden;
  }
  /* the page is worked cloth — faint running stitches, masked to stay calm */
  body::before{
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
    background-image:var(--stitch-field);
    -webkit-mask-image:radial-gradient(120% 80% at 78% -4%, #000 0%, transparent 62%);
            mask-image:radial-gradient(120% 80% at 78% -4%, #000 0%, transparent 62%);
  }
  .shell{position:relative;z-index:1;max-width:1180px;margin-inline:auto;padding-inline:clamp(1.4rem,5vw,3.6rem)}

  h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
  p{margin:0}
  a{color:inherit}

  /* tiny tracked specimen labels */
  .label{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--soft)}
  .num{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--soft)}

  /* a real counted stitch, drawn — the recurring mark */
  .stitch{width:1em;height:1em;color:var(--thread);flex:0 0 auto;display:inline-block;vertical-align:-.12em}
  .stitch path{stroke:currentColor;stroke-width:3.4;stroke-linecap:round;fill:none}

  /* brand logo — the real Tondo app icon (the hoop and the running stitch) */
  .brandmark{width:40px;height:40px;border-radius:11px;overflow:hidden;flex:0 0 auto;display:block;
    box-shadow:0 2px 5px -2px rgba(58,47,37,.3),inset 0 0 0 1px rgba(58,47,37,.10)}
  .brandmark svg{display:block;width:100%;height:100%}

  /* hairline ledger row at very top */
  .ledger{display:flex;justify-content:space-between;align-items:center;
    padding:1.5rem 0 1.1rem;border-bottom:1px solid var(--line)}
  .ledger .mark{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);
    font-size:1.55rem;font-weight:600;letter-spacing:-.01em;
    color:var(--ink);text-decoration:none}
  .ledger .right{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
  .right-words{display:flex;gap:1.3rem;align-items:baseline}

  /* Language navigation uses the shared header picker in site.css. */

  /* supported-languages note */
  .langs-note{text-align:center;margin:-1.4rem 0 2.4rem;font-family:var(--sans);
    font-size:13.5px;color:var(--faint);letter-spacing:.005em;line-height:1.5}
  .langs-note .stitch{width:.82em;height:.82em;vertical-align:-.08em;margin-right:.3rem;color:var(--thread)}
  .langs-note b{color:var(--soft);font-weight:600}

  /* ---------- hero / catalogue cover ---------- */
  .cover{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,6vw,5.5rem);
    align-items:end;padding:clamp(3.2rem,7vw,6rem) 0 clamp(2.4rem,5vw,4rem)}
  .cover .lead{max-width:30rem}
  .eyebrow{display:flex;align-items:center;gap:.6rem;margin-bottom:1.7rem}
  .cover h1{font-size:clamp(2.7rem,5.4vw,4.4rem);margin-bottom:1.5rem;font-weight:500}
  .cover h1 em{font-style:italic;color:var(--thread)}
  .cover .desc{font-size:1.2rem;line-height:1.62;color:var(--soft);max-width:27rem;
    font-family:var(--serif)}
  .meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:2.2rem;
    font-size:13px;color:var(--soft);align-items:center}
  .meta .dot{color:var(--line-2)}
  .cta{display:inline-flex;align-items:center;gap:.7rem;margin-top:2.4rem;
    font-family:var(--serif);font-size:1.16rem;color:var(--ink);text-decoration:none;
    padding-bottom:.32rem;border-bottom:1.5px solid var(--ink);transition:gap .35s cubic-bezier(.16,.84,.44,1),color .25s,border-color .25s}
  .cta:hover{gap:1.1rem;color:var(--thread);border-color:var(--thread)}
  .cta .arr{transition:transform .35s cubic-bezier(.16,.84,.44,1)}
  .cta:hover .arr{transform:translateX(3px)}
  .price-tag{margin-top:1.1rem;font-size:13px;color:var(--faint)}
  .price-tag b{color:var(--soft);font-weight:600}

  /* plate — a captioned figure holding a shared .device frame on warm paper. The bespoke .mat
     plate (a chrome-less screen mounted on paper) was replaced by the shared titanium .dv-iphone
     frame so tondo renders screenshots through the portfolio's one ratio-derived, never-cropping
     system; .plate is now just the figure wrapper + its serif figcaption + the cover tilt. */
  .plate{flex:0 0 auto}
  figure.plate{margin:0}
  .plate .device{margin-inline:auto}
  .showcase>.plate .device.dv-iphone,.plate .device.dv-iphone{--dv-scale:.6}
  .plate figcaption{margin-top:.95rem;display:flex;justify-content:space-between;
    align-items:baseline;gap:1rem}
  .plate figcaption .t{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--soft);line-height:1.4}
  .plate.cover-plate{transform:rotate(.5deg)}

  /* ---------- motion reel ---------- */
  .reel{padding:clamp(1.6rem,4vw,3rem) 0 clamp(2rem,5vw,3.6rem)}
  .reel-figure{margin:0}
  .reel-frame{background:var(--surface);border-radius:18px;padding:18px;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 60%,transparent),
               0 44px 76px -50px rgba(58,47,37,.45),
               0 14px 30px -20px rgba(58,47,37,.2)}
  .reel-clip{overflow:hidden;border-radius:12px;background:var(--bg);aspect-ratio:2.05/1;
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line-2) 50%,transparent)}
  .reel-clip video{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 50%}
  .reel figcaption{margin-top:1rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
  .reel figcaption .t{font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--soft)}

  /* ---------- the count line ---------- */
  .count{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:clamp(3rem,6vw,5rem) 0;display:grid;grid-template-columns:auto 1fr;
    gap:clamp(2rem,5vw,4rem);align-items:center}
  .count .big{font-family:var(--serif);font-size:clamp(4rem,11vw,8.5rem);line-height:.9;
    font-weight:500;letter-spacing:-.03em}
  .count .big .pct{color:var(--thread)}
  .count .said{max-width:30rem}
  .count .said h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:1rem;font-weight:500}
  .count .said p{color:var(--soft);font-family:var(--serif);font-size:1.12rem}
  .progress{margin-top:1.6rem;height:2px;background:var(--line);position:relative}
  .progress::after{content:"";position:absolute;inset:0 43% 0 0;background:var(--thread)}
  .progress-row{display:flex;justify-content:space-between;margin-top:.55rem;
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint)}

  /* ---------- how it works ---------- */
  section.block{padding:clamp(3.4rem,7vw,6rem) 0}
  .sec-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:2.8rem}
  .sec-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:500}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    border-top:1px solid var(--line)}
  .step{padding:1.8rem 1.7rem 2.1rem;border-bottom:1px solid var(--line);position:relative}
  .step+.step{border-left:1px solid var(--line)}
  .step-shot{margin:0 0 1.5rem;border:1px solid var(--line-2);border-radius:7px;overflow:hidden;
    background:var(--paper);box-shadow:0 12px 24px -20px rgba(58,47,37,.45)}
  .step-shot img{display:block;width:100%;height:auto}
  .step .rn{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--thread);margin-bottom:.7rem}
  .step h3{font-size:1.32rem;font-weight:500;margin-bottom:.7rem;font-family:var(--serif)}
  .step p{font-size:.98rem;color:var(--soft);line-height:1.6}

  /* ---------- gallery + benefits split ---------- */
  .split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2.5rem,6vw,5rem);align-items:center}

  /* iPhone + iPad pairing — the bespoke .devs/.dev mats were replaced by the shared .device-duo
     (site.css): a landscape iPad behind + a portrait iPhone overlapping front-right, both shared
     titanium frames. .device-stage stays as the captioned figure wrapper. */
  .device-stage{margin:0}
  .device-stage figcaption{margin-top:1.1rem;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
  .device-stage figcaption .t{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--soft)}
  /* one stacked column. site.css loads AFTER theme.css and sets
     .benefits{grid-template-columns:repeat(3,1fr)} + .benefit{card border/bg} — at equal
     specificity site.css would win on order, so scope these under [data-brand="tondo"]
     (specificity 0,2,0 > site.css 0,1,0) to win regardless of load order. */
  [data-brand="tondo"] .benefits{display:grid;grid-template-columns:1fr;gap:2.4rem}
  [data-brand="tondo"] .benefit{background:none;border:0;border-radius:0;box-shadow:none;
    padding:0 0 2.2rem;border-bottom:1px solid var(--line)}
  [data-brand="tondo"] .benefit:last-child{border-bottom:0;padding-bottom:0}

  /* Plaat II duo: the shared .device-duo is capped at 460px and scaled .58/.42 — fine in a hero
     slot, but Plaat II sits in a HALF-WIDTH .split column, so 460px × half = a 195px iPad / 51px
     iPhone, unreadable. Give the duo its own full-width row (split → single column) + a wider stage
     + a scale bump, so the iPad reads ~669px and the iPhone ~257px. [data-brand=tondo] (0,2,0) wins
     over the shared .device-duo (0,1,0) regardless of load order. */
  [data-brand="tondo"] .split{grid-template-columns:1fr;gap:clamp(2.4rem,5vw,4rem)}
  [data-brand="tondo"] .device-stage{max-width:none}
  [data-brand="tondo"] .device-stage .device-duo{width:min(720px,100%)}
  [data-brand="tondo"] .device-duo .dv-ipad{--dv-scale:.86}
  [data-brand="tondo"] .device-duo .dv-iphone{--dv-scale:.6}

  /* Feature tiles: the 3-column .steps grid renders each feat-*.png at ~146px (tiny). Stack the
     steps as full-width rows (image beside copy) so each shot reads ~520px and legible. */
  [data-brand="tondo"] .steps{grid-template-columns:1fr;border-top:0}
  [data-brand="tondo"] .step{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:clamp(1.5rem,4vw,3rem);align-items:center;padding:clamp(1.8rem,4vw,2.6rem) 0;
    border-left:0;border-bottom:1px solid var(--line)}
  [data-brand="tondo"] .step+.step{border-left:0}
  [data-brand="tondo"] .step .step-shot{margin:0;max-width:520px}

  /* Gallery: Kestrove's screenshot principle — BIG, STILL frames. Bump the shared .gallery scale
     (.5 → .82) and run two-up so each iPhone is large rather than three tiny ones. The scale-hover
     shrink is now killed in the SHARED site.css (scale() removed from the gallery + device-duo hover
     rules portfolio-wide), so the former per-app hover overrides here are dead and removed — only
     the SIZING bumps remain (those are tondo-specific and load-bearing). */
  [data-brand="tondo"] .gallery{grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,4rem)}
  [data-brand="tondo"] .gallery .device{--dv-scale:.82}

  .benefit h3{font-size:1.4rem;font-weight:500;margin-bottom:.7rem;display:flex;align-items:center;gap:.65rem}
  .benefit h3 .stitch{width:.62em;height:.62em}
  .benefit p{color:var(--soft);font-size:1.04rem}
  .benefit em{font-style:italic;color:var(--ink)}

  /* ---------- own vs rent ---------- */
  .own{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);background:var(--surface)}
  .own .c{padding:clamp(1.8rem,4vw,2.8rem)}
  .own .c+.c{border-left:1px solid var(--line)}
  .own .lbl{display:flex;align-items:center;gap:.55rem;margin-bottom:1.3rem}
  .own .amt{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:500;margin-bottom:.8rem}
  .own .c.rent .amt{color:var(--faint)}
  .own .c.rent .label{color:var(--faint)}
  .own p{color:var(--soft);font-size:.98rem;line-height:1.58}
  .own .c.rent p{color:var(--faint)}

  /* ---------- price ---------- */
  /* container-type makes the figure scale to the price CARD (site.css gives .price
     width:min(30rem,100%)), NOT the viewport — a viewport-based clamp let "€15.99"
     overflow the 30rem card on wide screens. cqi = 1% of the card's inline size. */
  .price{text-align:center;padding:clamp(3.6rem,8vw,7rem) 0;border-top:1px solid var(--line);
    container-type:inline-size}
  .price .once{margin-bottom:1.1rem}
  .price .figure{font-family:var(--serif);font-size:clamp(3rem,15.5cqi,5.25rem);line-height:.9;
    font-weight:500;letter-spacing:-.03em;margin-bottom:.6rem}
  .price .sub{color:var(--soft);font-family:var(--serif);font-size:1.12rem;margin-bottom:2.2rem}
  .price .incl{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;
    margin-bottom:2.6rem;font-size:13px;color:var(--soft)}
  .price .incl span{display:flex;align-items:center;gap:.5rem}
  .price .incl .stitch{width:.7em;height:.7em}

  /* ---------- faq ---------- */
  .faq details{border-bottom:1px solid var(--line);padding:1.4rem 0}
  .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
    align-items:center;gap:1.5rem;font-family:var(--serif);font-size:1.22rem;color:var(--ink)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary .pl{font-family:var(--sans);font-size:1.3rem;color:var(--thread);transition:transform .3s}
  .faq details[open] summary .pl{transform:rotate(45deg)}
  .faq details p{margin-top:1rem;color:var(--soft);font-size:1.02rem;max-width:46rem;line-height:1.62}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);padding:2.6rem 0 3.4rem;margin-top:1rem}
  .foot-row{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
    font-size:13px;color:var(--soft)}
  .foot-row .cloud,
  .foot-row .cloud-mark{width:20px;height:20px;flex:0 0 auto;color:var(--thread);vertical-align:-4px;margin-right:.3rem}
  .foot-row strong{color:var(--ink);font-weight:600}
  .foot-row a{color:var(--thread);text-decoration:none}
  .foot-row a:hover{text-decoration:underline}
  .foot-links{display:flex;gap:1.3rem;flex-wrap:wrap}

  /* gentle hover only — no entrance fade (preview iframes pause anims at frame 0). The cover plate
     untilts and lifts on hover; the tilt now lives on the shared .device, so the hover targets it. */
  @media (prefers-reduced-motion:no-preference){
    .plate.cover-plate .device{transition:transform .6s cubic-bezier(.16,.84,.44,1)}
    .plate.cover-plate:hover .device{transform:rotate(0deg) translateY(-4px)}
  }

  @media (max-width:860px){
    .cover{grid-template-columns:1fr;align-items:start}
    .cover .lead{max-width:none}
    .count{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}
    .step+.step{border-left:0}
    .split{grid-template-columns:1fr}
    .own,.foot-row{grid-template-columns:1fr}
    .own{grid-template-columns:1fr}
    .own .c+.c{border-left:0;border-top:1px solid var(--line)}
  }
  @media (max-width:560px){
    .ledger{padding:1.2rem 0 .9rem}
    .right-words .num:first-child{display:none}
    .cover{padding-top:2.4rem}
    .count{padding:2.4rem 0}
    .sec-head{flex-wrap:wrap;gap:.4rem}
    /* still card-relative (cqi) so €15.99 can't overflow the narrowed card */
    .price .figure{font-size:clamp(2.6rem,15.5cqi,5rem)}
    /* narrow phones: dial the enlarged duo back so it fits, and stack the feature rows */
    [data-brand="tondo"] .device-duo .dv-ipad{--dv-scale:.62}
    [data-brand="tondo"] .device-duo .dv-iphone{--dv-scale:.42}
    [data-brand="tondo"] .step{grid-template-columns:1fr}
    [data-brand="tondo"] .step .step-shot{max-width:none}
    /* gallery: the shared swipe-row already kicks in <820px; keep our larger scale on it */
    [data-brand="tondo"] .gallery .device{--dv-scale:.66}
  }

/* ============================================================================
   LINEN LAYER (design handoff 2026-07-24) — the redesigned shell + homepage.
   Additive: the Specimen components above keep styling support/features/404.
   Naming: lin-* only; nothing here reaches into shared site.css selectors.
   ============================================================================ */

/* ---- page = worked cloth: running stitches + halo, calm below the hero ---- */
[data-brand="tondo"] body, body[data-brand="tondo"]{ font-size:18px; line-height:1.65; }
body[data-brand="tondo"]{ position:relative; overflow-x:hidden; }
body[data-brand="tondo"]::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:var(--stitch-field);
  -webkit-mask-image:radial-gradient(120% 80% at 78% -4%, #000 0%, transparent 62%);
          mask-image:radial-gradient(120% 80% at 78% -4%, #000 0%, transparent 62%); }
.lin-shell{ position:relative; z-index:1; max-width:1160px; margin:0 auto;
  padding:0 clamp(1.3rem,5vw,3.4rem); }

/* ---- shared shell: header + footer ---- */
.lin-header{ display:flex; align-items:center; gap:1.1rem; padding:1.4rem 0 1.1rem;
  border-bottom:1px solid var(--line); }
.lin-mark{ display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--text); }
.lin-mark img{ width:38px; height:38px; border-radius:10px; box-shadow:0 2px 5px -2px rgba(43,39,34,.3); }
.lin-mark span{ font-family:var(--display); font-size:1.5rem; font-weight:600; letter-spacing:-.01em; }
.lin-nav{ margin-left:auto; display:flex; align-items:center; gap:1.4rem; font-size:.92rem; font-weight:560; }
.lin-nav a{ text-decoration:none; color:var(--text-soft); }
.lin-nav a:hover{ color:var(--accent-text); }
.lin-cta-pill{ display:inline-flex; align-items:center; padding:.5rem 1.05rem; border-radius:999px;
  background:var(--accent); color:var(--accent-ink); font-size:.92rem; font-weight:650;
  text-decoration:none; transition:transform .15s ease; }
.lin-cta-pill:hover{ color:var(--accent-ink); transform:translateY(-1px); }
/* Footer = the selvage. The stitching returns at the hem (full-bleed ::before, fading in
   toward the bottom edge — the mirror of the hero's fade-out), a woven-label main row, then a
   stitched (dashed) hairline over the base row. */
.lin-footer{ position:relative; border-top:1px solid var(--line); padding:3rem 0 3.4rem;
  background:transparent; /* shared site.css paints footer --bg-2; the selvage sits ON the linen */ }
.lin-footer::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%); z-index:-1; pointer-events:none; opacity:.55;
  background-image:var(--stitch-field);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 88%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 88%); }
.lin-foot-main{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:2.2rem clamp(2.4rem,6vw,5.5rem); align-items:start; }
.lin-foot-mark{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); }
.lin-foot-mark img{ width:30px; height:30px; border-radius:8px; box-shadow:0 1px 3px -1px rgba(43,39,34,.35); }
.lin-foot-mark span{ font-family:var(--display); font-size:1.3rem; font-weight:600; letter-spacing:-.01em; }
.lin-foot-tag{ margin:.8rem 0 0; font-size:14.5px; line-height:1.6; color:var(--text-soft); max-width:36ch; }
.lin-foot-oomny{ display:flex; align-items:flex-start; gap:.6rem; margin:1.5rem 0 0;
  font-size:13.5px; line-height:1.65; color:var(--text-soft); max-width:42ch; }
.lin-cloud{ width:21px; height:16px; flex:none; margin-top:.2em; color:var(--accent-text); }
.lin-foot-oomny strong{ color:var(--text); font-weight:650; }
.lin-foot-oomny a{ color:var(--accent-text); font-weight:600; text-decoration:none; }
.lin-foot-oomny a:hover{ color:var(--accent); }
.lin-foot-all{ white-space:nowrap; }
/* languages column: restyle the shared .app-langs block (markup owned by build.mjs — byte-synced,
   so the look is applied here, never there). Lead becomes the section eyebrow, note goes mono. */
.lin-foot-speaks .app-langs{ margin-top:.35rem; gap:.7rem; }
.lin-foot-speaks .app-langs-lead{ display:inline-flex; align-items:center; gap:.7rem; font-size:11px;
  font-weight:750; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); }
.lin-foot-speaks .app-langs-lead::before{ content:""; width:1.6rem; height:2px; background:var(--accent);
  border-radius:2px; }
.lin-foot-speaks .app-langs-note{ font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  color:var(--faint); }
.lin-foot-note{ margin:.9rem 0 0; font-size:13.5px; line-height:1.65; color:var(--text-soft); max-width:46ch; }
.lin-foot-base{ display:flex; justify-content:space-between; align-items:center; gap:1rem 1.6rem;
  flex-wrap:wrap; margin-top:2.6rem; padding-top:1.4rem; border-top:1px dashed var(--line-2);
  font-size:13px; color:var(--text-soft); }
.lin-foot-fine a{ color:var(--accent-text); font-weight:600; text-decoration:none; }
.lin-foot-fine a:hover{ color:var(--accent); }
.lin-foot-links{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.lin-foot-links a{ color:var(--accent-text); font-weight:600; text-decoration:none; font-size:13.5px; }
.lin-foot-links a:hover{ color:var(--accent); }
@media (max-width:760px){
  .lin-foot-main{ grid-template-columns:1fr; gap:2rem; }
  .lin-footer{ padding-top:2.4rem; }
}

/* ---- shared atoms ---- */
.lin-eyebrow{ display:inline-flex; align-items:center; gap:.7rem; font-size:11px; font-weight:750;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); }
.lin-eyebrow::before{ content:""; width:1.6rem; height:2px; background:var(--accent); border-radius:2px; }
.lin-x{ flex:none; }
.lin-x path{ stroke:var(--accent); stroke-width:3.4; stroke-linecap:round; fill:none; }
.lin-head{ display:flex; align-items:baseline; gap:1.2rem; margin-bottom:2.6rem; }
/* Section index inside a thin ring — the hoop, the brand's organising circle (docs/brand.md
   §"The circle is the system"): the recurring mark a reader meets at every section head. */
.lin-head .lin-idx{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--faint);
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6em; height:2.6em; border:1.5px solid var(--line); border-radius:50%; }
.lin-head h2{ font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:560;
  line-height:1.1; letter-spacing:-.01em; margin:0; }

/* ---- device presentation: the SHARED .device dv-iphone/dv-ipad frame (site.css) ----
   Tondo shipped a bespoke .lin-phone plate (a uniform 11px padding on a rounded rect, no side
   buttons, no titanium rail) — the hand-tuned shape site.css retired after the 2026-06-22
   failures. It is replaced by the shared frame every other site already uses, so the whole
   portfolio renders screenshots through ONE calibrated geometry: bezels measured off the real
   iPhone 16 Pro Max / iPad Pro 13, and a screen window DERIVED from the asset's own pixels
   (--shot-w/--shot-h, injected by build.mjs) so nothing ever crops. Tondo only tunes the
   per-slot SIZE here via --dv-scale, plus the hero's tilt via the frame's own --rot.
   The films carry the true Apple status bar (9:41 simctl override) and the island in their own
   pixels, so the frame draws no chrome of its own — site.css only draws a status bar on a BARE
   asset, and a frame holding a <video> is never tagged .dv-bare. */
/* Hero: .70 puts the frame footprint at 301px (430px native × .70) — the same width the bespoke
   300px plate had, so the chip anchored to its bottom-left corner below still lands. */
.lin-hero-figure .device.dv-iphone{ --dv-scale:.70; --rot:.6deg; }

/* ---- hero ---- */
.lin-hero{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,6vw,5rem); align-items:center; padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.6rem,5vw,4rem); }
.lin-hero::before{ content:""; position:absolute; inset:0; background:var(--halo); pointer-events:none; }
.lin-hero > div{ position:relative; }
.lin-hero h1{ font-family:var(--display); font-size:clamp(2.8rem,5.2vw,4.3rem); font-weight:560;
  line-height:1.05; letter-spacing:-.015em; margin:1.3rem 0 1.4rem; max-width:13ch; text-wrap:balance; }
.lin-lede{ font-family:var(--serif); font-size:1.22rem; line-height:1.6; color:var(--text-soft);
  max-width:29rem; margin:0 0 2.1rem; }
.lin-hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.lin-coming{ font-family:var(--serif); font-style:italic; font-size:1.12rem; color:var(--text); }
.lin-ghost{ display:inline-flex; align-items:center; padding:.6rem 1.25rem; border-radius:999px;
  border:1px solid var(--line-2); color:var(--text); font-size:.95rem; font-weight:600;
  text-decoration:none; transition:transform .15s ease; }
.lin-ghost:hover{ color:var(--accent-text); transform:translateY(-1px); }
.lin-store{ display:inline-flex; align-items:center; gap:.7rem; text-align:left; padding:.6rem 1.15rem;
  border-radius:12px; background:var(--text); color:var(--bg); text-decoration:none; }
.lin-store:hover{ color:var(--bg); transform:translateY(-1px); }
.lin-store small{ display:block; font-size:10px; font-weight:500; letter-spacing:.03em; line-height:1.15; }
.lin-store b{ display:block; font-size:16px; font-weight:650; line-height:1.15; }
/* ---- launch swap ----
   Every block that says anything about availability carries data-launch="{{launchState}}",
   which build.mjs resolves from app.toml [store] app_store_url + play_store_url — the same
   facts that resolve {{appStoreAttr}} / {{playStoreAttr}}. Wording and link therefore flip
   TOGETHER at launch and cannot disagree; nothing is hand-flipped per page. These rules live
   HERE rather than in a page's own <style> block so every page gets them (features.html could
   not see index.html's inline copy), and they are container-agnostic so a hero badge row and a
   plain CTA button swap alike.

   The badge rule is the CROSS-PLATFORM half: {{launchState}} goes live as soon as ANY targeted
   store is, so on a one-store launch the block renders and each badge hides itself until its
   OWN store is live. Without it, publishing Tondo on Google Play while Apple still reviewed
   would have shown a dead "Download on the App Store" button beside the working Play one. */
.lin-hero-cta .launch-live, .lin-hero-cta .launch-prelaunch{ display:flex; gap:.9rem;
  flex-wrap:wrap; align-items:center; }
[data-launch="prelaunch"] .launch-live{ display:none; }
[data-launch="live"] .launch-prelaunch{ display:none; }
[data-store-badge="prelaunch"], [data-store-badge="absent"]{ display:none; }
.lin-pending{ color:var(--faint); }
.lin-hero-note{ font-size:.92rem; color:var(--text-soft); margin:1.6rem 0 0; }
.lin-hero-note b{ color:var(--text); }
/* The honest "what 1.1 adds" note. It used to be a boxed card between the H1 and the lede, which
   split the hero into three competing blocks (owner, 2026-09-07: "rommelig"). Now a quiet aside:
   an accent hairline, soft text, no surface. The words are unchanged (they carry a QE stamp). */
.tondo-version-note{ margin:.2rem 0 .9rem; padding:.15rem 0 .15rem .9rem;
  border-left:2px solid var(--accent); color:var(--text-soft); font-size:.88rem; line-height:1.5; }
.tondo-version-note strong{ color:var(--text); font-weight:650; }
.prose .tondo-version-note{ color:var(--text-soft); }
.lin-hero-figure{ display:grid; justify-items:center; }
/* ---- pricing ---- */
.lin-pricing{ border-top:1px solid var(--line); padding:clamp(3.6rem,8vw,6rem) 0; display:grid;
  justify-items:center; gap:1.6rem; text-align:center; }
.lin-price-card{ position:relative; width:min(30rem,100%); background:var(--surface);
  border:1px solid var(--line); border-radius:22px; padding:clamp(2rem,5vw,2.8rem);
  box-shadow:0 30px 60px -40px rgba(20,17,13,.5); overflow:hidden; }
.lin-price-card::before{ content:""; position:absolute; inset:0; background:var(--halo); pointer-events:none; }
.lin-price-card > *{ position:relative; }
.lin-badge{ display:inline-flex; padding:.35rem .8rem; border-radius:999px; font-size:11px;
  font-weight:750; letter-spacing:.08em; background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent-text); }
.lin-price{ font-family:var(--display); font-size:3.4rem; font-weight:560; margin:.9rem 0 .1rem; }
.lin-cadence{ color:var(--text-soft); margin:0 0 1.4rem; }
.lin-price-card ul{ list-style:none; padding:0; margin:0 auto 1.6rem; display:grid; gap:.6rem;
  font-size:.96rem; color:var(--text-soft); text-align:left; max-width:24rem; }
.lin-price-card li{ display:flex; gap:.6rem; align-items:baseline; }
.lin-check{ color:var(--verified); font-weight:800; flex:none; }
.lin-price-cta{ display:inline-flex; padding:.8rem 1.7rem; border-radius:999px; background:var(--accent);
  color:var(--accent-ink); font-weight:650; text-decoration:none; transition:transform .15s ease; }
.lin-price-cta:hover{ color:var(--accent-ink); transform:translateY(-1px); }
.lin-price-note{ font-size:.88rem; color:var(--text-soft); line-height:1.6; margin:1.1rem 0 0; }

/* ---- faq ---- */
.lin-faq{ padding:0 0 clamp(3.6rem,8vw,6rem); }
.lin-faq-inner{ width:min(46rem,100%); margin:0 auto; }
.lin-faq-inner .lin-head{ margin-bottom:2rem; }
.lin-faq details{ background:var(--surface); border:1px solid var(--line); border-radius:12px;
  margin:0 0 .7rem; }
.lin-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between;
  align-items:baseline; gap:1rem; padding:1rem 1.2rem; font-weight:620; }
.lin-faq summary::-webkit-details-marker{ display:none; }
.lin-faq summary .pl{ color:var(--accent-text); font-weight:700; transition:transform .2s ease; }
.lin-faq details[open] summary .pl{ transform:rotate(45deg); }
.lin-faq details p{ padding:0 1.2rem 1.1rem; margin:0; color:var(--text-soft); line-height:1.65;
  font-size:.97rem; }

/* ---- what it does: four benefits, no devices ---- */
.lin-benefits{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.6rem,3vw,2.6rem);
  border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.4rem) 0; }
.lin-benefit{ display:grid; gap:.7rem; align-content:start; }
.lin-glyph{ color:var(--indigo); fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round;
  stroke-linejoin:round; }
.lin-benefit h3{ font-family:var(--display); font-size:1.28rem; font-weight:560; line-height:1.2;
  letter-spacing:-.01em; margin:.2rem 0 0; }
.lin-benefit p{ margin:0; font-size:.97rem; line-height:1.6; color:var(--text-soft); }
.lin-benefit-more{ color:var(--text); }

/* ---- hand embroidery + every device: one still beside one column of text ---- */
.lin-craft, .lin-devices{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,6vw,5rem); align-items:center; border-top:1px solid var(--line);
  padding:clamp(3rem,7vw,5rem) 0; }
.lin-devices, .lin-craft.lin-flip{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.lin-craft h2, .lin-devices h2{ font-family:var(--display); font-size:clamp(1.9rem,3.4vw,2.6rem);
  font-weight:560; line-height:1.1; letter-spacing:-.01em; margin:.9rem 0 1.1rem; text-wrap:balance; }
.lin-craft p, .lin-devices p{ color:var(--text-soft); line-height:1.65; margin:0 0 1rem; max-width:34rem; }
.lin-craft-figure, .lin-devices-figure{ display:grid; justify-items:center; margin:0; }
.lin-craft-figure .device.dv-iphone{ --dv-scale:.62; --rot:0deg; }
.lin-devices-figure .device.dv-ipad{ --dv-scale:.72; --rot:0deg; }

/* ---- responsive + motion ---- */
@media (max-width:1100px){
  .lin-benefits{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:860px){
  /* minmax(0,1fr), not 1fr: a bare 1fr floors at min-content, and the Dutch hero's longest
     word pushed the column 7px past a 320px viewport. */
  .lin-hero, .lin-craft, .lin-craft.lin-flip, .lin-devices{ grid-template-columns:minmax(0,1fr); }
  .lin-craft-figure, .lin-devices-figure{ order:-1; }
  /* No hamburger on this site: below 860px the nav used to vanish, which left Features,
     Pricing and Support unreachable from a phone (owner report 2026-09-07). It wraps to its
     own row instead, scrolling sideways when the words do not fit. */
  .lin-header{ flex-wrap:wrap; }
  .lin-nav{ order:3; flex:1 0 100%; margin:.4rem 0 0; gap:1.1rem; overflow-x:auto;
    -webkit-overflow-scrolling:touch; white-space:nowrap; scrollbar-width:none; }
  .lin-nav::-webkit-scrollbar{ display:none; }
  .lin-cta-pill{ margin-left:auto; }
}
/* ---- per-band frame scales ----
   The shared frame's footprint is FIXED px (--dv-fw x --dv-scale, 430px native iPhone / 546px
   iPad) while the columns around it are fluid, so each band narrower than the base footprint
   gets its own scale, measured at the band's tightest width. */
@media (min-width:861px) and (max-width:1152px){
  .lin-hero-figure .device.dv-iphone{ --dv-scale:.62; }
  .lin-craft-figure .device.dv-iphone{ --dv-scale:.56; }
  .lin-devices-figure .device.dv-ipad{ --dv-scale:.56; }
}
@media (max-width:560px){
  .lin-benefits{ grid-template-columns:1fr; }
  .lin-hero-figure .device.dv-iphone, .lin-craft-figure .device.dv-iphone{ --dv-scale:.62; }
  .lin-devices-figure .device.dv-ipad{ --dv-scale:.5; }
}
@media (max-width:440px){
  /* 'borduurwerk.' at the fluid floor (2.8rem) is wider than a 320px column. */
  .lin-hero h1{ font-size:2.35rem; }
  .lin-hero-figure .device.dv-iphone, .lin-craft-figure .device.dv-iphone{ --dv-scale:.56; }
  .lin-devices-figure .device.dv-ipad{ --dv-scale:.42; }
}
@media (prefers-reduced-motion: reduce){
  .lin-cta-pill, .lin-ghost, .lin-store, .lin-price-cta{ transition:none; }
}

/* Account entry uses the existing linen shell, pill shape and terracotta accent. */
.lin-account-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--line-2);
  border-radius: 999px; color: var(--accent-text); font-size: .92rem;
  font-weight: 650; text-decoration: none; text-align: center;
}
.lin-account-link:hover { border-color: var(--accent-text); }
.lin-account-link:focus-visible { outline: 3px solid var(--indigo); outline-offset: 4px; }
.lin-header > .lin-account-link, .lin-header > .lin-cta-pill { flex-shrink: 0; }
.lin-foot-links .lin-account-link { padding: 0; border: 0; }
.lin-web-purchase {
  display: flex; gap: 2rem; align-items: center; justify-content: space-between;
  padding: 2rem 0; margin: -1rem 0 3rem; border-block: 1px dashed var(--line-2);
}
.lin-web-purchase h2 { font-size: 1.7rem; line-height: 1.25; margin-bottom: .75rem; }
.lin-web-purchase p { max-width: 42rem; font-size: 1rem; }
.lin-web-purchase > a { flex-shrink: 0; }
@media (max-width: 1150px) {
  .lin-header { flex-wrap: wrap; }
  .lin-header > .lin-account-link { margin-left: auto; }
  .lin-nav { order: 3; flex: 1 0 100%; margin: .4rem 0 0; gap: 1.1rem; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 600px) {
  .lin-header > .lin-cta-pill { display: none; }
  .lin-header > .lin-account-link { max-width: 64%; }
  .lin-web-purchase { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
}

/* Quiet handwork homepage, owner-selected concept, September 2026.
   Keep the shared builder and component sheet intact; this skin belongs to Tondo. */
body.quiet-site {
  --bg: #fcfaf4;
  --text: #2b2722;
  --text-soft: #655c50;
  --accent-text: #94371f;
  --paper: var(--bg);
  --ink: var(--text);
  --soft: var(--text-soft);
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}
.quiet-site::before, .quiet-site::after { display: none; }
.quiet-site .lin-shell{
  width: min(100% - 64px, 1280px);
  max-width: 1280px;
  padding-inline: 0;
  margin-inline: auto;
}
.quiet-site .lin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 24px 0;
  border: 0;
}
.quiet-site .lin-mark { display: inline-flex; align-items: center; gap: 10px; }
.quiet-site .lin-mark span {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  text-decoration: none;
}
.quiet-header-links { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.quiet-header-links a, .quiet-footer a { text-decoration: none; }
.quiet-site a:hover { color: var(--accent-text); }
.quiet-site a:focus-visible, .quiet-site button:focus-visible, .quiet-site summary:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 5px;
}
.quiet-skip { position: absolute; top: -100px; left: 24px; z-index: 10; background: var(--bg); }
.quiet-skip:focus { top: 8px; padding: 12px; }
.quiet-hero {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  align-items: center;
  gap: 24px;
  padding-block: clamp(40px, 6vw, 88px) 44px;
}
.quiet-hero h1, .quiet-detail h1 {
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -.025em;
  max-width: 10ch;
  text-wrap: balance;
}
.quiet-lead { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; margin-top: 26px; }
.quiet-hero-copy { position: relative; z-index: 1; }
.quiet-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  padding: 13px 32px;
  margin-top: 36px;
  background: var(--accent-text);
  color: #fcfaf4;
  border: 1px solid var(--accent-text);
  border-radius: 9px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
}
.quiet-site .quiet-primary:hover { background: #792c1a; color: #fcfaf4; }
.quiet-price { margin-top: 12px; color: var(--text-soft); font-size: 14px; line-height: 1.6; }
.quiet-hero-art { display: block; width: 100%; height: auto; }
.quiet-crafts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-block: 30px 50px;
}
.quiet-crafts a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  min-height: 52px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
}
.quiet-crafts a span, .quiet-account a, .quiet-text-link { color: var(--accent-text); }
.quiet-account {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  align-items: baseline;
  gap: 24px;
  padding-block: 26px;
  border-block: 1px solid var(--line);
  font-size: 15px;
}
.quiet-account h2 { font: inherit; font-weight: 500; }
.quiet-account p { color: var(--text-soft); }
.quiet-account a { text-decoration: none; }
/* What Tondo does (the home-page standard, venture/templates/standards.toml website-home): four
   quiet columns under a hairline, serif titles like the craft links, soft text like the price. */
.quiet-features { padding-block: 34px 46px; border-top: 1px solid var(--line); }
.quiet-features h2 { font: inherit; font-size: 15px; font-weight: 500; color: var(--text-soft); }
.quiet-features ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.quiet-features h3 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}
.quiet-features p { margin-top: 10px; color: var(--text-soft); font-size: 15px; line-height: 1.55; }
.quiet-features .quiet-text-link { width: fit-content; }
@media (max-width: 1150px) {
  .quiet-features ul { grid-template-columns: repeat(2, 1fr); }
}
.quiet-footer { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0 30px; }
.quiet-footer nav:not([data-language-picker]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13px;
}
.quiet-footer nav:not([data-language-picker]) a { color: var(--text-soft); padding-block: 10px; }
.quiet-detail { max-width: 800px; margin-inline: auto; padding: 40px 0 70px; }
.quiet-back {
  display: inline-block;
  color: var(--text-soft);
  margin-bottom: 36px;
  font-size: 15px;
}
.quiet-detail h1 { max-width: 18ch; }
.quiet-detail .quiet-primary, .quiet-detail .quiet-text-link { width: fit-content; }
.quiet-detail > p { margin-top: 24px; }
.quiet-text-link { display: block; margin-top: 28px; text-underline-offset: 5px; }
.quiet-notice {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 16px;
}
.quiet-detail-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-top: 56px;
  font-size: 16px;
}
.quiet-detail-nav [aria-current] { font-weight: 600; text-decoration-thickness: 2px; }
.quiet-stores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-block: 32px;
}
.quiet-store {
  display: grid;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-decoration: none;
}
.quiet-store strong { font-size: 24px; }
.quiet-store span { font-size: 16px; }
.quiet-store[aria-disabled="true"] { opacity: .6; }
@media (prefers-color-scheme: dark) {
  body.quiet-site {
    --bg: #1e1b17; --text: #e8e1d4; --text-soft: #c1b6a4; --accent-text: #e19a82;
  }
  .quiet-site .quiet-primary { color: #1e1b17; }
  .quiet-site .quiet-primary:hover { background: #efb7a4; color: #1e1b17; }
  .quiet-hero-art { border-radius: 16px; }
}
@media (max-width: 760px) {
  .quiet-site .lin-shell{ width: calc(100% - 40px); }
  .quiet-site .lin-header { padding-block: 20px; }
  .quiet-header-links { gap: 18px; font-size: 14px; }
  .quiet-hero { grid-template-columns: 1fr; gap: 12px; padding-block: 26px 8px; }
  .quiet-hero h1 { max-width: 13ch; }
  .quiet-lead { margin-top: 22px; }
  .quiet-primary { margin-top: 26px; }
  .quiet-hero-art { max-width: 520px; margin-inline: auto; }
  .quiet-crafts { grid-template-columns: 1fr; gap: 0; padding-block: 12px 24px; }
  .quiet-crafts a { justify-content: space-between; padding-block: 10px; }
  .quiet-account { grid-template-columns: 1fr; gap: 8px; }
  .quiet-features ul { grid-template-columns: 1fr; gap: 22px; }
  .quiet-footer { flex-direction: column; gap: 8px; }
  .quiet-detail { padding-top: 28px; }
}
@media (max-width: 420px) {
  .quiet-site .lin-mark img { width: 28px; height: 28px; }
  .quiet-site .lin-mark span { font-size: 26px; }
  .quiet-header-links { gap: 12px; font-size: 13px; }
  .quiet-stores { grid-template-columns: 1fr; }
}
.quiet-disclosure {
  max-width: 66ch;
  margin: 0 auto 48px;
  color: var(--text-soft);
  font-size: 16px;
}
.quiet-site main { max-width: none; width: 100%; padding: 0; margin: 0; }
.quiet-hero h1 { max-width: 13ch; }
.quiet-site .quiet-footer { background: none; border: 0; margin: 0; }
.quiet-header-links { flex-wrap: wrap; max-width: 100%; }

/* Comfortable touch targets for the compact navigation, including narrow phones. */
.quiet-header-links a, .quiet-footer nav:not([data-language-picker]) a, .quiet-detail-nav a, .quiet-back,
.quiet-account > a, .quiet-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* ============================================================================
   "Het open atelier" (owner choice 2026-10-01, after three researched directions built with Codex:
   A as the base, B's table of contents, C's evening opening). The page opens on a full-bleed evening
   photograph with the header laid over it, then reads like a light worktable: the crafts and what is
   coming as a table of contents, one real app screen per feature (store captures per locale), Tondo
   Makers announced as coming soon, a My Tondo block that leads to the real sign-in on /account, and a
   plain free-versus-one-time price. Brand roles hold (docs/brand.md): madder = actions, indigo =
   state, linen ground. System fonts only. Full-bleed bands use box-shadow + clip-path or a 100vw
   breakout under html overflow-x:clip, so nothing adds horizontal scroll.
   ============================================================================ */
html:has(body.quiet-site){ overflow-x:clip; }
body.quiet-site{
  --bg:#ebe3d4; --surface:#fcfaf4; --text:#2b2722; --text-soft:#5c5348; --accent-text:#94371f;
  --madder:#a8412b; --madder-hover:#8a3422; --indigo:#3e5c6e; --line:#d6c9b1; --soon-bg:#f3e4cf; --soon:#7a4a12;
  --hem:#221e1a; --hem-text:#ebe3d4;
  background:var(--bg); background-image:none; color:var(--text); overflow-x:clip; font-size:18px;
}
@media (prefers-color-scheme:dark){
  body.quiet-site{
    --bg:#1e1b17; --surface:#2a231c; --text:#ece4d6; --text-soft:#c3b7a4; --accent-text:#e8a28a;
    --madder:#d2765e; --madder-hover:#e08e77; --indigo:#8fb0c2; --line:#3e352b; --soon-bg:#4a3a26; --soon:#f0d3a8;
    --hem:#12100d; background-image:none;
  }
}

/* ---- header: one plain row; on the homepage it lies over the photograph ---- */
.quiet-site .lin-header{ padding-block:16px; gap:12px; }
.quiet-site .lin-mark span{ font-size:26px; letter-spacing:-.01em; }
.quiet-header-links{ gap:6px 18px; }
.quiet-site .quiet-signin{ min-height:44px; padding:0 16px; border:1.5px solid currentColor; border-radius:8px; font-weight:600; text-decoration:none; }
.quiet-site .quiet-signin:hover{ color:var(--accent-text); }
body.quiet-site:has(.at-hero) .lin-header{ position:absolute; z-index:6; top:0; left:0; right:0; color:#fff; }
body.quiet-site:has(.at-hero) .lin-header a{ color:#fff; }
body.quiet-site:has(.at-hero) .lin-header .quiet-signin{ background:rgba(20,17,14,.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
body.quiet-site:has(.at-hero) .lin-mark img{ box-shadow:0 0 0 1px rgba(255,255,255,.35); border-radius:8px; }

/* ---- shared atoms ---- */
.at-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 26px; border-radius:8px;
  font:600 18px/1.2 var(--sans); text-decoration:none; text-align:center; border:1.5px solid transparent; transition:background .2s, transform .2s; }
.at-btn-primary{ background:var(--madder); color:#fff; }
.quiet-site a.at-btn-primary:hover{ background:var(--madder-hover); color:#fff; transform:translateY(-1px); }
.at-btn-ghost{ border-color:currentColor; color:var(--text); }
@media (prefers-color-scheme:dark){ .at-btn-primary, .quiet-site a.at-btn-primary:hover{ color:#1e1b17; } }
.at-link{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--accent-text); text-underline-offset:5px; }
.at-link::after{ content:"→"; margin-left:.4em; }
.at-kicker{ font:600 15px/1.2 var(--sans); color:var(--accent-text); margin:0 0 12px; }
.at-fine{ font-size:15px; line-height:1.5; color:var(--text-soft); margin-top:14px; }
.at-intro{ font-size:clamp(17px,1.6vw,19px); line-height:1.6; color:var(--text-soft); margin-top:14px; max-width:36rem; }
.quiet-site h2{ font-family:var(--serif); font-weight:500; letter-spacing:-.025em; line-height:1.04; text-wrap:balance; }

/* ---- hero: the evening photograph, full bleed ---- */
.at-hero{ position:relative; display:flex; align-items:flex-end; min-height:min(100svh,860px); margin-inline:calc(50% - 50vw);
  padding:120px max(20px,calc((100vw - 1280px)/2)) clamp(32px,6vw,72px); color:#fff; isolation:isolate; }
.at-hero-photo{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.at-hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(20,17,14,.55) 0%,rgba(20,17,14,.08) 20%,rgba(20,17,14,.5) 46%,rgba(20,17,14,.94) 74%); }
.at-hero-copy{ max-width:40rem; }
.at-hero h1{ font:500 clamp(3rem,12vw,7rem)/.98 var(--serif); letter-spacing:-.035em; max-width:9ch; color:#fff; }
.at-lead{ font-size:clamp(18px,2vw,22px); line-height:1.5; color:#f1e9dc; margin-top:18px; max-width:32rem; }
.at-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-top:26px; }
.at-hero .at-link{ color:#fff; }
.at-hero .at-fine{ color:#e2d7c6; }
@media (prefers-color-scheme:dark){ .at-hero .at-btn-primary{ color:#1e1b17; } }

/* ---- table of contents: the crafts and what is coming ---- */
.at-toc{ padding-block:clamp(40px,7vw,88px) 0; }
.at-toc h2{ font:600 15px/1.2 var(--sans); letter-spacing:0; color:var(--text-soft); padding-bottom:10px; border-bottom:2px solid var(--text); }
.at-toc a{ display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:16px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.at-toc img{ width:76px; height:76px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line); }
.at-toc b{ display:block; font:500 clamp(1.45rem,4.6vw,2rem)/1.1 var(--serif); letter-spacing:-.015em; }
.at-toc small{ display:block; font-size:16px; line-height:1.45; color:var(--text-soft); margin-top:4px; }
.at-toc em, .at-rows em{ font:600 13px/1 var(--sans); font-style:normal; padding:7px 9px; border-radius:6px; background:var(--surface); color:var(--text); white-space:nowrap; }
.at-toc a:nth-of-type(n+3) em, .at-rows em.soon{ background:var(--soon-bg); color:var(--soon); }
.quiet-site .at-toc a:hover b{ color:var(--accent-text); }

/* ---- what Tondo does: one lead feature, then three with their screens ---- */
.at-features{ padding-block:clamp(64px,10vw,128px) 0; }
.at-features > h2{ font-size:clamp(2.3rem,8vw,4.4rem); max-width:16ch; }
.at-features ul{ list-style:none; margin:36px 0 0; padding:0; display:grid; gap:16px; }
.at-features li{ display:grid; gap:10px; background:var(--surface); border-radius:16px; padding:22px 22px 0; overflow:hidden; }
.at-features li > *{ min-width:0; }
.at-features h3{ font:500 clamp(1.4rem,3.6vw,1.9rem)/1.12 var(--serif); letter-spacing:-.015em; }
.at-features p{ font-size:17px; line-height:1.55; color:var(--text-soft); }
.at-phone{ display:block; width:min(100%,300px); height:auto; aspect-ratio:480/560; object-fit:cover; object-position:top; margin:10px auto 0;
  border-radius:30px 30px 0 0; }
.at-lead-feature .at-phone{ width:min(100%,340px); aspect-ratio:480/700; }
.at-features > .at-link{ margin-top:18px; }

/* ---- Tondo Makers: announced, not pretended ---- */
.at-makers{ display:grid; gap:28px; margin-top:clamp(72px,11vw,140px); padding-block:clamp(48px,8vw,96px);
  background:var(--surface); box-shadow:0 0 0 100vmax var(--surface); clip-path:inset(0 -100vmax); }
.at-makers .at-kicker{ display:inline-block; padding:7px 10px; border-radius:6px; background:var(--soon-bg); color:var(--soon); font-size:14px; }
.at-makers h2{ font-size:clamp(2.8rem,11vw,5.6rem); line-height:.95; letter-spacing:-.035em; }
.at-makers dl{ margin:26px 0 0; }
.at-makers dt{ font:500 1.35rem/1.2 var(--serif); padding-top:16px; border-top:1px solid var(--line); }
.at-makers dd{ margin:4px 0 16px; font-size:17px; line-height:1.5; color:var(--text-soft); }
.at-makers-photo{ width:min(100%,520px); aspect-ratio:1; object-fit:cover; border-radius:50%; justify-self:center; }

/* ---- My Tondo: the door to the real sign-in on /account ---- */
.at-portal{ display:grid; gap:24px; padding-block:clamp(72px,11vw,140px) 0; }
.at-portal h2, .at-price h2{ font-size:clamp(2.2rem,7.6vw,4rem); max-width:17ch; }
.at-card{ background:var(--surface); border-radius:16px; padding:22px; display:grid; gap:10px; align-content:start; }
.at-provider{ display:flex; align-items:center; justify-content:center; min-height:52px; border-radius:8px; font:600 17px/1 var(--sans); text-decoration:none; }
.quiet-site .at-apple{ background:#000; color:#fff; }
.quiet-site .at-google{ background:#fff; color:#1f1f1f; border:1px solid #c9c4bb; }
.quiet-site .at-apple:hover{ color:#fff; opacity:.88; } .quiet-site .at-google:hover{ color:#1f1f1f; border-color:#1f1f1f; }
.at-small{ font-size:15px; line-height:1.5; color:var(--text-soft); margin-top:4px; }
.at-rows{ list-style:none; margin:8px 0 0; padding:0; }
.at-rows li{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--line); font-size:17px; line-height:1.35; }

/* ---- price: free, or one payment ---- */
.at-price{ padding-block:clamp(72px,11vw,140px) clamp(48px,8vw,96px); }
.at-tiers{ display:grid; gap:14px; margin-top:30px; }
.at-tier{ background:var(--surface); border-radius:16px; padding:24px; display:flex; flex-direction:column; }
.at-tier h3{ font:500 1.7rem/1.1 var(--serif); }
.at-tier ul{ margin:16px 0 22px; padding-left:1.15rem; font-size:17px; line-height:1.6; }
.at-tier .at-btn{ margin-top:auto; }
.at-paid{ background:var(--hem); color:#f3ede2; }
.at-paid ul{ color:#d9d0c1; }
.at-amount{ font:500 2.8rem/1 var(--serif); margin-top:12px; }
.at-amount small{ font:500 16px var(--sans); margin-left:.5em; color:#d9d0c1; }
.at-paid .at-btn-primary{ background:var(--madder); }
.at-restore{ margin-top:18px; font-size:17px; line-height:1.55; }
.at-restore a{ color:var(--accent-text); font-weight:600; }
.quiet-site .quiet-disclosure{ margin:0 auto clamp(32px,5vw,56px); max-width:none; font-size:15px; color:var(--text-soft); }

/* ---- the hem: links, then the copyright line (one footer shape across every app site) ---- */
.quiet-site .quiet-footer{ position:relative; display:flex; flex-direction:column-reverse; align-items:stretch; gap:clamp(12px,3vw,28px);
  padding-block:clamp(36px,6vw,64px) 0; margin-top:clamp(24px,5vw,48px); color:var(--hem-text);
  background:var(--hem); box-shadow:0 0 0 100vmax var(--hem); clip-path:inset(0 -100vmax -100vmax); }
.quiet-site .quiet-footer nav:not([data-language-picker]) a{ color:var(--hem-text); opacity:.78; font-size:15px; }
.quiet-site .quiet-footer nav:not([data-language-picker]) a:hover{ opacity:1; color:#fff; }
.quiet-site .quiet-copy{ color:var(--hem-text); opacity:.78; font-size:15px; padding-bottom:clamp(24px,4vw,36px); }

/* ---- the craft, download and help pages: the same display voice as the homepage ---- */
.quiet-detail h1{ font-family:var(--serif); font-size:clamp(2.8rem,9vw,5.6rem); line-height:.98; letter-spacing:-.035em; max-width:14ch; }
.quiet-site .quiet-primary{ border-radius:8px; background:var(--madder); border-color:var(--madder); color:#fff; min-height:54px; }
.quiet-site .quiet-primary:hover{ background:var(--madder-hover); color:#fff; }
@media (prefers-color-scheme:dark){ .quiet-site .quiet-primary, .quiet-site .quiet-primary:hover{ color:#1e1b17; } }
.quiet-store{ border-radius:12px; background:var(--surface); transition:border-color .2s, transform .2s; }
.quiet-store:hover{ border-color:var(--madder); transform:translateY(-2px); }

/* CJK display sets wider and needs its own leading; tight Latin tracking would crush the glyphs */
:lang(ja) .at-hero h1, :lang(ja) .quiet-site h2, :lang(ja) .at-toc b, :lang(ja) .quiet-detail h1{ letter-spacing:0; line-height:1.18; }
:lang(ja) .at-hero h1{ font-size:clamp(2.4rem,9vw,5.2rem); max-width:12ch; }
:lang(ja) .at-makers h2{ font-size:clamp(2.4rem,9vw,4.6rem); }

@media (min-width:900px){
  .at-toc{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 22px; }
  .at-toc h2{ grid-column:1 / -1; }
  .at-toc a{ grid-template-columns:1fr; align-content:start; gap:12px; padding:22px 0 0; border:0; }
  .at-toc img{ width:100%; height:auto; aspect-ratio:1; }
  .at-toc em{ justify-self:start; }
  .at-features ul{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .at-lead-feature{ grid-column:1 / -1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; padding-top:40px; }
  .at-lead-feature > div{ align-self:center; padding:0 0 40px 18px; }
  .at-makers{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:56px; }
  .at-portal{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:56px; }
  .at-tiers{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .quiet-site .lin-shell{ width:calc(100% - 36px); }
  .at-ctas .at-btn{ flex:1 1 100%; }
  .quiet-header-links{ gap:4px 10px; font-size:15px; }
  .quiet-site .quiet-signin{ padding:0 12px; }
}


/* ============================================================================
   Tondo 2.0 (2026-09-30): four crafts, one page per craft or topic, questions.
   The craft, community and sync pages reuse the home page's pattern key (.quiet-features) under a
   head with the in-app illustration, so a page is built from the same parts as the home page.
   Calmer type on the way: the lead reads upright (an italic lead read as a decorative accent), and
   the primary button keeps the 9px corner of the quiet concept instead of a pill.
   ============================================================================ */
.tq-hero .quiet-lead{ font-style:normal; font-family:var(--sans); font-size:clamp(18px,1.6vw,21px); line-height:1.55; max-width:32rem; }
.quiet-site .quiet-primary{ border-radius:9px; box-shadow:0 10px 22px -16px var(--accent-text); }
.quiet-site .quiet-primary:hover{ box-shadow:0 14px 26px -16px var(--accent-text); }

/* The hero photograph is light cloth. On the dark page it is a swatch laid on the table, with a
   clean edge, instead of a soft oval glow around it. */
@media (prefers-color-scheme:dark){
  .tq-cloth .quiet-hero-art{ -webkit-mask-image:none; mask-image:none; border-radius:18px; }
  .tq-cloth{ filter:drop-shadow(0 26px 34px rgba(0,0,0,.5)); }
}

/* Four crafts: sewing joins as a patchwork block, drawn in indigo. */
.quiet-crafts:has(> a:nth-child(4)){ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mo-s{ stroke:#3e5c6e; stroke-width:2.8; }
@media (prefers-reduced-motion:no-preference){
  .quiet-crafts a:nth-child(4) .tq-motif g path{ animation-delay:.75s; }
}
@media (max-width:1060px) and (min-width:761px){
  .quiet-crafts:has(> a:nth-child(4)){ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Symbol colours for the longer key, and a lighter set on the dark page where indigo and olive
   fall under 3:1 against the dark paper. */
.quiet-features li:nth-child(7) .tq-sym{ stroke:#a8412b; } .quiet-features li:nth-child(8) .tq-sym{ stroke:#3e5c6e; }
@media (prefers-color-scheme:dark){
  .mo-s{ stroke:#8fb0c2; } .mo-k, .mo-f path:last-child{ stroke:#9dab7e; } .mo-x{ stroke:#d2765e; }
  .quiet-features ul li:nth-child(3n+1) .tq-sym{ stroke:var(--accent-text); }
  .quiet-features ul li:nth-child(3n+2) .tq-sym{ stroke:#8fb0c2; }
  .quiet-features ul li:nth-child(3n) .tq-sym{ stroke:#9dab7e; }
  .quiet-features li:nth-child(1) .tq-sym{ fill:#d2765e22; }
  .quiet-features ul{ background-color:color-mix(in srgb,var(--surface) 70%,#000) !important; }
}

/* ---- craft and topic pages ---- */
.tq-page{ padding:12px 0 72px; }
.tq-page .quiet-back{ margin-bottom:8px; }
.tq-page-head{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.5rem,4vw,4rem); align-items:center;
  padding-bottom:clamp(1rem,3vw,2.5rem); }
.tq-page-head h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2.6rem,5.2vw,4.6rem); line-height:1.02; letter-spacing:-.03em;
  max-width:14ch; text-wrap:balance; }
.tq-page-head .quiet-lead{ max-width:34rem; margin-top:20px; font-size:clamp(18px,1.6vw,21px); line-height:1.55; }
.tq-page-head .quiet-primary{ margin-top:28px; }
.tq-page-art{ display:block; width:100%; max-width:24rem; height:auto; justify-self:center; }
.tq-page-art-wide{ max-width:30rem; }
.tq-page .quiet-features{ border-top:0; }
.tq-key li h3 a, .tq-key li p a, .tq-faq p a, .tq-note a{ color:var(--accent-text); text-underline-offset:3px; }
.tq-related{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:8px; }
.tq-related a{ display:grid; gap:.35rem; padding:1.3rem 1.4rem; min-height:44px; border-radius:10px; text-decoration:none;
  background:color-mix(in srgb,var(--surface) 80%,transparent); outline:1.6px dashed color-mix(in srgb,var(--text) 26%,transparent); outline-offset:-8px;
  transition:outline-color .2s, background .2s; }
.tq-related a:hover{ outline-color:var(--accent-text); background:var(--surface); }
.tq-related strong{ font-family:var(--serif); font-weight:500; font-size:1.3rem; color:var(--accent-text); }
.tq-related span{ color:var(--text-soft); font-size:15px; line-height:1.5; }
.tq-note{ max-width:48rem; margin-top:8px; padding:1.5rem 1.6rem; border-radius:10px;
  background:color-mix(in srgb,var(--surface) 80%,transparent); outline:1.6px dashed color-mix(in srgb,var(--text) 26%,transparent); outline-offset:-8px; }
.tq-note h2{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin-bottom:.5rem; }
.tq-note p{ color:var(--text-soft); font-size:16px; line-height:1.6; }
.tq-page .quiet-detail-nav{ margin-top:40px; padding-top:20px; border-top:1.6px dashed color-mix(in srgb,var(--text) 22%,transparent); }

/* ---- questions: the same margin title as the key, answers under a dotted rule ---- */
.tq-faq{ padding-block:clamp(1.5rem,4vw,3rem) clamp(2.5rem,5vw,4rem); }
.tq-faq h2{ font-family:var(--serif); font-size:clamp(1.8rem,3.2vw,2.8rem); font-weight:500; line-height:1.05; margin-bottom:1rem; }
.tq-faq details{ border-top:2px dotted color-mix(in srgb,var(--accent-text) 45%,transparent); }
.tq-faq details:last-child{ border-bottom:2px dotted color-mix(in srgb,var(--accent-text) 45%,transparent); }
.tq-faq summary{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:44px; padding:1rem 0;
  cursor:pointer; list-style:none; font-family:var(--serif); font-size:clamp(1.12rem,1.5vw,1.3rem); line-height:1.3; }
.tq-faq summary::-webkit-details-marker{ display:none; }
.tq-faq summary::after{ content:""; flex:none; width:.8rem; height:.8rem; border-right:2px solid var(--accent-text); border-bottom:2px solid var(--accent-text);
  transform:translateY(-.2rem) rotate(45deg); transition:transform .2s; }
.tq-faq details[open] summary::after{ transform:translateY(.15rem) rotate(-135deg); }
.tq-faq summary:hover{ color:var(--accent-text); }
.tq-faq details p{ max-width:42rem; padding:0 0 1.2rem; color:var(--text-soft); font-size:16px; line-height:1.6; }
@media (min-width:860px){
  .tq-faq{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); column-gap:clamp(2rem,6vw,5rem); align-items:start; }
  .tq-faq h2{ position:sticky; top:2rem; }
}
@media (max-width:860px){
  .tq-page-head{ grid-template-columns:1fr; }
  .tq-page-art{ max-width:16rem; grid-row:1; justify-self:start; margin-bottom:-.5rem; }
  .tq-page-art-wide{ max-width:20rem; }
  .tq-related{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .quiet-crafts:has(> a:nth-child(4)){ grid-template-columns:1fr; }
}

/* ---- the full feature list: the same margin title and key as the other pages ----
   features.html alternates a section head (.prose) and its list (.benefits). On a wide page the head
   takes the margin column and its list the key column, row by row, so the measure stays readable
   instead of running 1280px wide under a narrow centred intro. */
.quiet-site main:has(> section.benefits){ padding-block:12px 64px; }
.quiet-site main:has(> section.benefits) > section.prose{ max-width:none; margin:0; padding:0; }
.quiet-site main:has(> section.benefits) > section.prose:first-child{ padding:24px 0 clamp(1.5rem,4vw,3rem); max-width:46rem; }
.quiet-site main:has(> section.benefits) > section.prose:first-child h1{ font-family:var(--serif); font-weight:500;
  font-size:clamp(2.4rem,4.8vw,4.2rem); line-height:1.04; letter-spacing:-.03em; margin-bottom:1.2rem; text-wrap:balance; }
.quiet-site main:has(> section.benefits) > section.prose:first-child p{ font-size:18px; line-height:1.6; }
.quiet-site main:has(> section.benefits) > section.prose:not(:first-child) h2{ font-family:var(--serif); font-weight:500;
  font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.1; margin:0 0 .6rem; }
.quiet-site main:has(> section.benefits) > section.prose:not(:first-child) p{ font-size:16px; line-height:1.55; color:var(--text-soft); max-width:26rem; }
.quiet-site main:has(> section.benefits) > section.prose:not(:first-child){ margin-bottom:1rem; }
.quiet-site main:has(> section.benefits) > section.benefits{ display:block; padding:0; margin:0 0 clamp(2rem,5vw,3.5rem); }
.quiet-site main:has(> section.benefits) .benefit{ padding:1.3rem 0; margin:0; border:0; border-top:2px dotted color-mix(in srgb,var(--accent-text) 45%,transparent); border-radius:0; background:none; box-shadow:none; }
.quiet-site main:has(> section.benefits) .benefit:last-child{ border-bottom:2px dotted color-mix(in srgb,var(--accent-text) 45%,transparent); padding-bottom:1.3rem; }
.quiet-site main:has(> section.benefits) .benefit h3{ font-family:var(--serif); font-weight:500; font-size:1.3rem; line-height:1.25; margin:0 0 .4rem; }
.quiet-site main:has(> section.benefits) .benefit p{ font-size:16px; line-height:1.6; color:var(--text-soft); max-width:44rem; }
.quiet-site main:has(> section.benefits) .benefit p + p{ margin-top:.6rem; }
.quiet-site main:has(> section.benefits) .benefit a{ color:var(--accent-text); text-underline-offset:3px; }
.quiet-site main:has(> section.benefits) > section.proof{ grid-column:1 / -1; margin-top:1rem; padding:1.6rem 1.8rem; border:0; border-radius:10px;
  background:color-mix(in srgb,var(--surface) 80%,transparent); outline:1.6px dashed color-mix(in srgb,var(--text) 26%,transparent); outline-offset:-8px; }
.quiet-site main:has(> section.benefits) > section.proof h2{ font-family:var(--serif); font-weight:500; font-size:1.6rem; margin-bottom:.6rem; }
.quiet-site main:has(> section.benefits) > section.proof p{ color:var(--text-soft); font-size:16px; line-height:1.6; max-width:48rem; }
.quiet-site main:has(> section.benefits) > section.proof p + p{ margin-top:.8rem; }
.quiet-site main:has(> section.benefits) > section.proof p a{ color:var(--accent-text); }
.quiet-site main:has(> section.benefits) > section.proof .cta-row{ margin-top:1.2rem; }
.quiet-site main:has(> section.benefits) > section.proof .btn.primary{ display:inline-flex; align-items:center; min-height:48px; padding:10px 26px;
  border-radius:9px; background:var(--accent-text); color:#fcfaf4; font-weight:600; text-decoration:none; box-shadow:0 10px 22px -16px var(--accent-text); }
.quiet-site main:has(> section.benefits) > section.proof .btn.primary:hover{ background:#792c1a; color:#fcfaf4; }
@media (prefers-color-scheme:dark){
  .quiet-site main:has(> section.benefits) > section.proof .btn.primary{ color:#1e1b17; }
  .quiet-site main:has(> section.benefits) > section.proof .btn.primary:hover{ background:#efb7a4; color:#1e1b17; }
}
@media (min-width:900px){
  .quiet-site main:has(> section.benefits){ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); column-gap:clamp(2rem,6vw,5rem); align-items:start; }
  .quiet-site main:has(> section.benefits) > section.prose:first-child{ grid-column:1 / -1; }
  .quiet-site main:has(> section.benefits) > section.prose:not(:first-child){ grid-column:1; position:sticky; top:2rem; padding-top:1.2rem; }
  .quiet-site main:has(> section.benefits) > section.benefits{ grid-column:2; }
}


/* ============================================================================
   Tondo Makers (2026-09-30): the worksheets on /make and the private workspace on /workspace, and a
   header that names the site's tasks (the app, making, your workspace, help, account).
   Same materials as the rest of the site: chart paper for anything you fill in, dotted rules between
   rows, serif for what you read, sans for what you type. Buttons keep the 9px corner; the quiet
   button is an outlined version of the primary one, never a pill.
   ============================================================================ */
.quiet-header-links a[aria-current="page"]{ color:var(--accent-text); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:7px; }
.tq-v2{ display:inline-block; margin-left:.5em; padding:.08em .45em; border:1.5px solid var(--indigo); border-radius:4px;
  font-family:var(--sans); font-size:.62em; font-weight:600; line-height:1.4; color:var(--indigo); vertical-align:.2em; white-space:nowrap; }
.tq-v2-note{ margin-top:14px; color:var(--text-soft); font-size:15px; line-height:1.55; max-width:34rem; }
.tq-v2-note .tq-v2{ margin:0 .35em 0 0; font-size:.8em; vertical-align:.08em; }
@media (prefers-color-scheme:dark){ .tq-v2{ border-color:#8fb0c2; color:#8fb0c2; } }

.tq-button-quiet{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 18px;
  border:1.5px solid color-mix(in srgb,var(--text) 55%,transparent); border-radius:9px; background:var(--bg);
  color:var(--text); font:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
.tq-button-quiet:hover{ border-color:var(--accent-text); color:var(--accent-text); }
.tq-button-danger{ color:#9b2f1d; }
@media (prefers-color-scheme:dark){ .tq-button-danger{ color:#f0a894; } }
.tq-link-button{ padding:0; border:0; background:none; font:inherit; color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.quiet-site button:focus-visible, .quiet-site input:focus-visible, .quiet-site select:focus-visible, .quiet-site textarea:focus-visible{
  outline:3px solid var(--accent-text); outline-offset:3px; }
.tq-sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- /make: a contents strip, then one worksheet per craft ---- */
.tq-make-head{ align-items:end; }
.tq-jump{ display:grid; gap:0; align-self:end; border-top:2px dotted color-mix(in srgb,var(--accent-text) 45%,transparent); }
.tq-jump a{ display:grid; gap:.15rem; padding:.8rem 0; min-height:44px; text-decoration:none; font-family:var(--serif); font-size:1.18rem; line-height:1.3;
  border-bottom:2px dotted color-mix(in srgb,var(--accent-text) 45%,transparent); }
.tq-jump a:hover{ color:var(--accent-text); }
.tq-jump-craft, .tq-sheet-craft{ font-family:var(--sans); font-size:14px; font-weight:600; color:var(--text-soft); }
.tq-sheet{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(1.5rem,4vw,4rem); align-items:start;
  padding-block:clamp(2.5rem,5vw,4rem); border-top:1.6px dashed color-mix(in srgb,var(--text) 22%,transparent); scroll-margin-top:1rem; }
.tq-sheet-text h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.08; letter-spacing:-.02em; margin:.35rem 0 1rem; text-wrap:balance; }
.tq-sheet-text p, .tq-sheet-text li{ color:var(--text-soft); font-size:16px; line-height:1.6; }
.tq-sheet-text p + p{ margin-top:.7rem; }
.tq-sheet-text h3{ font-family:var(--serif); font-weight:500; font-size:1.2rem; margin:1.4rem 0 .5rem; color:var(--text); }
.tq-sheet-text ul{ padding-left:1.1rem; display:grid; gap:.4rem; }
.tq-sheet-text li::marker{ content:"× "; color:var(--accent-text); }
.tq-in-app{ margin-top:1.3rem !important; padding-top:1rem; border-top:2px dotted color-mix(in srgb,var(--accent-text) 35%,transparent); }
.tq-in-app a, .tq-ws-scope a, .tq-hint a{ color:var(--accent-text); text-underline-offset:3px; }

.tq-calc, .tq-ws-sheet, .tq-ws-scope{ border-radius:10px; border:1px solid var(--line); box-shadow:0 18px 30px -24px rgba(60,40,20,.35);
  background-color:color-mix(in srgb,var(--surface) 90%,#fff);
  background-image:linear-gradient(color-mix(in srgb,var(--accent-text) 11%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent-text) 11%,transparent) 1px,transparent 1px);
  background-size:20px 20px; }
.tq-calc{ padding:clamp(1.2rem,2.5vw,2rem); display:grid; gap:1.2rem; }
.tq-calc-hint{ font-size:14px; color:var(--text-soft); }
.tq-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.tq-fields label, .tq-ws-sheet label{ display:grid; gap:6px; font-size:14px; font-weight:600; color:var(--text); }
.tq-calc input, .tq-calc select, .tq-ws-sheet input, .tq-ws-sheet textarea{ width:100%; min-height:44px; padding:8px 12px; border-radius:7px;
  border:1.5px solid color-mix(in srgb,var(--text) 45%,transparent); background:var(--bg); color:var(--text); font:inherit; font-size:17px; font-weight:400; }
.tq-ws-sheet textarea{ min-height:9rem; line-height:1.5; resize:vertical; }
.tq-calc input[aria-invalid="true"]{ border-color:#b3261e; }
.tq-result{ padding:1rem 1.1rem; border-radius:8px; background:var(--bg); border:1.5px solid var(--text); }
.tq-result dl{ display:grid; gap:.7rem; }
.tq-result dl > div{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.2rem 1rem; }
.tq-result dt{ font-size:14px; color:var(--text-soft); }
.tq-result dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.tq-result small{ font-weight:400; color:var(--text-soft); font-size:14px; }
.tq-result .tq-result-main dd{ font-family:var(--serif); font-weight:500; font-size:clamp(1.35rem,2.2vw,1.7rem); color:var(--accent-text); }
.tq-result > p{ margin-top:.8rem; font-size:15px; line-height:1.55; }
.tq-result > p:first-child{ margin-top:0; }
.tq-calc [data-action="print"]{ justify-self:start; }
.tq-fineprint{ margin-top:1.4rem; font-size:14px; color:var(--text-soft); }
@media (max-width:860px){
  .tq-sheet{ grid-template-columns:1fr; }
  .tq-make-head .tq-jump{ grid-row:auto; }
}
@media (max-width:480px){ .tq-fields{ grid-template-columns:1fr; } }

/* ---- /workspace: scope first, then your sheets beside the open one ---- */
.tq-ws-head h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2.6rem,5.2vw,4.6rem); line-height:1.02; letter-spacing:-.03em; }
.tq-ws-head .quiet-lead{ max-width:40rem; margin-top:18px; }
.tq-ws-scope{ margin-top:clamp(1.5rem,3vw,2.2rem); padding:1.2rem clamp(1.1rem,2.4vw,1.8rem); }
.tq-ws-scope h2{ font-family:var(--serif); font-weight:500; font-size:1.35rem; margin-bottom:.6rem; }
.tq-ws-scope ul{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem 1.6rem; list-style:none; padding:0; }
.tq-ws-scope li{ font-size:15px; line-height:1.55; color:var(--text-soft); }
.tq-ws-scope strong{ color:var(--text); }
.tq-ws-warning{ margin-top:.9rem; padding:.7rem .9rem; border-radius:7px; border:1.5px solid var(--caution-text); color:var(--text); font-size:15px; }
.tq-ws{ display:grid; grid-template-columns:minmax(14rem,.32fr) minmax(0,1fr); gap:clamp(1.5rem,3vw,2.6rem); margin-top:clamp(1.8rem,4vw,3rem); align-items:start; }
.tq-ws-side h2{ font-family:var(--serif); font-weight:500; font-size:1.5rem; }
.tq-ws-new{ margin-top:14px; min-height:48px; font-size:17px; padding:10px 22px; }
.tq-ws-list{ list-style:none; padding:0; margin-top:18px; border-top:2px dotted color-mix(in srgb,var(--accent-text) 45%,transparent); }
.tq-ws-list li{ border-bottom:2px dotted color-mix(in srgb,var(--accent-text) 45%,transparent); }
.ws-pick{ display:grid; width:100%; gap:2px; padding:.7rem .4rem; min-height:44px; text-align:left; border:0; background:none; color:var(--text); font:inherit; cursor:pointer; border-radius:6px; }
.ws-pick strong{ font-family:var(--serif); font-weight:500; font-size:1.1rem; }
.ws-pick span{ font-size:13px; color:var(--text-soft); }
.ws-pick:hover strong{ color:var(--accent-text); }
.ws-pick[aria-current="true"]{ background:color-mix(in srgb,var(--accent-text) 9%,transparent); }
.ws-pick[aria-current="true"] strong{ color:var(--accent-text); }
.tq-ws-empty{ margin-top:16px; font-size:15px; line-height:1.55; color:var(--text-soft); }
/* The file picker is the quiet button: the native control stays in the page for the keyboard and
   screen readers (Enter or Space opens it), visually replaced by its label. */
.tq-ws-import{ position:relative; margin-top:22px; }
.tq-file-input{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); }
.tq-ws-import label{ cursor:pointer; }
.tq-file-input:focus-visible + label{ outline:3px solid var(--accent-text); outline-offset:3px; }
.tq-ws-start{ padding:clamp(1.4rem,3vw,2.4rem); border-radius:10px; outline:1.6px dashed color-mix(in srgb,var(--text) 26%,transparent); outline-offset:-8px;
  background:color-mix(in srgb,var(--surface) 80%,transparent); }
.tq-ws-start h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.12; max-width:24ch; }
.tq-ws-start p{ margin-top:.8rem; color:var(--text-soft); line-height:1.6; max-width:40rem; }
.tq-ws-sheet{ display:grid; gap:1.4rem; padding:clamp(1.1rem,2.6vw,2rem); }
.tq-ws-sheet fieldset{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; margin:0; padding:0; border:0; min-width:0; }
.tq-ws-sheet legend{ width:100%; padding:1rem 0 .6rem; border-top:2px dotted color-mix(in srgb,var(--accent-text) 45%,transparent);
  font-family:var(--serif); font-size:1.3rem; }
.tq-ws-sheet fieldset > .tq-hint, .tq-ws-sheet fieldset > .tq-result{ grid-column:1 / -1; }
.tq-hint{ font-size:13.5px; line-height:1.5; color:var(--text-soft); margin-top:-4px; }
.tq-ws-name input{ font-family:var(--serif); font-size:1.5rem; }
.tq-ws-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; }
.tq-ws-pair fieldset{ grid-template-columns:1fr; }
.tq-ws-actions, .tq-ws-confirm{ display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center; }
.tq-ws-actions .quiet-primary{ margin-top:0; min-height:48px; font-size:17px; padding:10px 22px; }
.tq-ws-confirm{ padding:1rem; border-radius:8px; border:1.5px solid #b3261e; background:var(--bg); }
.tq-ws-confirm p{ width:100%; }
.tq-ws-status{ min-height:1.6em; margin-top:.9rem; font-size:15px; color:var(--text-soft); }
@media (max-width:980px){ .tq-ws-scope ul{ grid-template-columns:1fr; } }
@media (max-width:860px){
  .tq-ws{ grid-template-columns:1fr; }
  .tq-ws-pair{ grid-template-columns:1fr; }
}
@media (max-width:520px){ .tq-ws-sheet fieldset{ grid-template-columns:1fr; } }
@media (prefers-color-scheme:dark){
  .tq-calc, .tq-ws-sheet, .tq-ws-scope{ background-color:color-mix(in srgb,var(--surface) 70%,#000); box-shadow:none; }
}

/* ---- printing: only the sheet you asked for, on white ---- */
@media print{
  body.quiet-site{ background:#fff !important; color:#000; }
  .lin-header, .quiet-footer, .quiet-back, .tq-jump, .tq-related, .tq-fineprint, .tq-calc button, .tq-ws-side, .tq-ws-actions,
  .tq-ws-confirm, .tq-ws-status, .tq-ws-scope, .quiet-skip, [data-language-picker]{ display:none !important; }
  body[data-print] .tq-sheet{ display:none; }
  body[data-print="fabric"] #fabric-size, body[data-print="hoop"] #hoop-size, body[data-print="gauge"] #swatch,
  body[data-print="squares"] #squares{ display:grid; grid-template-columns:1fr 1fr; border:0; }
  body[data-print] .tq-make-head{ display:none; }
  .tq-calc, .tq-ws-sheet{ box-shadow:none; background:#fff; }
  .tq-ws{ display:block; }
}
.tq-ws-start{ display:grid; grid-template-columns:minmax(0,1fr) 11rem; column-gap:1.5rem; align-items:center; }
.tq-ws-start > *:not(img){ grid-column:1; }
.tq-ws-start-art{ grid-column:2; grid-row:1 / span 3; width:100%; height:auto; }
@media (max-width:560px){ .tq-ws-start{ grid-template-columns:1fr; } .tq-ws-start-art{ grid-column:1; grid-row:auto; width:8rem; order:-1; } }
/* The hidden attribute wins over every display rule above (a result list is a grid, a confirmation a row). */
.quiet-site [hidden]{ display:none !important; }

/* ---- /download: where you pay, and in which currency ---- */
.tq-pay{ margin-top:40px; padding-top:28px; border-top:1.6px dashed color-mix(in srgb,var(--text) 22%,transparent); }
.tq-pay h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,2.8vw,2.2rem); line-height:1.1; }
.tq-pay > p{ margin-top:12px; color:var(--text-soft); line-height:1.6; }
.tq-pay-list{ margin-top:18px; border-top:2px dotted color-mix(in srgb,var(--accent-text) 45%,transparent); }
.tq-pay-list > div{ display:grid; grid-template-columns:11rem minmax(0,1fr); gap:.3rem 1.4rem; padding:1rem 0;
  border-bottom:2px dotted color-mix(in srgb,var(--accent-text) 45%,transparent); }
.tq-pay-list dt{ font-family:var(--serif); font-size:1.2rem; }
.tq-pay-list dd{ margin:0; color:var(--text-soft); line-height:1.6; }
.tq-pay-list dd strong{ color:var(--text); }
.tq-pay-list a{ color:var(--accent-text); text-underline-offset:3px; }
.tq-pay-note{ font-size:15px; }
.tq-channel-note{ margin-top:6px; color:var(--text-soft); font-size:14px; line-height:1.6; max-width:32rem; }
.tq-channel-note a{ color:var(--accent-text); text-underline-offset:3px; }
@media (max-width:560px){ .tq-pay-list > div{ grid-template-columns:1fr; } }

/* ---- home: before you start ---- */
.tq-home-make{ padding-block:clamp(1.5rem,4vw,3rem) clamp(1rem,3vw,2rem); }
.tq-home-make h2{ font-family:var(--serif); font-size:clamp(1.8rem,3.2vw,2.8rem); font-weight:500; line-height:1.05; }
.tq-home-make > div > p{ margin-top:.8rem; color:var(--text-soft); font-size:16px; line-height:1.6; max-width:26rem; }
.tq-home-make .tq-related{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:0; }
@media (min-width:860px){
  .tq-home-make{ display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); column-gap:clamp(2rem,6vw,5rem); align-items:start; }
}
@media (max-width:1060px){ .tq-home-make .tq-related{ grid-template-columns:1fr; } }
@media (max-width:859px){ .tq-home-make .tq-related{ margin-top:1.2rem; } }
/* the key's legend for the version tag sits under the margin title */
@media (min-width:860px){
  .quiet-features .tq-v2-note{ grid-column:1; grid-row:2; align-self:start; }
  .quiet-features:has(> .tq-v2-note){ grid-template-rows:auto auto 1fr; }
  .quiet-features:has(> .tq-v2-note) > ul{ grid-row:1 / span 3; }
  .quiet-features .tq-v2-note{ margin-top:0; font-size:14px; max-width:20rem; }
  .quiet-features:has(> .tq-v2-note) > .quiet-text-link{ grid-row:3; }
}
@media (max-width:860px){ .tq-make-head + .tq-sheet{ border-top:0; padding-top:1rem; } }
@media (min-width:861px){ .tq-ws-side{ position:sticky; top:1.5rem; } }
.quiet-crafts a > .tq-v2{ margin:0; font-size:12px; }
@media (max-width:860px){ .quiet-crafts a > .tq-v2{ margin-left:auto; } }

/* ============================================================================
   "Het open atelier", part two (owner brief 2026-10-01 afternoon): a real menu, the Tondo 2.0 site
   work folded in (four crafts, worksheets, workspace, pay channels, the community), the community
   felt on the page, and every page in one voice. Loaded last on purpose: it settles the older
   page rules above for the pages this design now owns.
   ============================================================================ */

/* ---- header and menu: labelled links on wide screens, a labelled Menu panel on narrow ones ---- */
.quiet-site .lin-header{ display:flex; align-items:center; flex-wrap:nowrap; gap:10px 16px; position:relative; z-index:6; }
.quiet-site .lin-mark{ margin-right:auto; }
.tq-nav{ display:none; align-items:center; gap:2px 6px; font-size:16px; font-weight:560; }
.tq-nav > a, .tq-nav-crafts > summary{ display:inline-flex; align-items:center; min-height:44px; padding:0 9px; border-radius:6px; text-decoration:none; cursor:pointer; }
.tq-nav > a:hover, .tq-nav-crafts > summary:hover{ background:color-mix(in srgb,currentColor 10%,transparent); }
.tq-nav a[aria-current="page"], .tq-menu-panel a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; }
.tq-nav-crafts{ position:relative; }
.tq-nav-crafts > summary{ list-style:none; }
.tq-nav-crafts > summary::-webkit-details-marker, .tq-menu > summary::-webkit-details-marker{ display:none; }
.tq-nav-crafts > summary::after{ content:""; width:7px; height:7px; margin-left:8px; border:solid currentColor; border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg); }
.tq-nav-drop{ position:absolute; left:0; top:calc(100% + 6px); min-width:220px; display:grid; padding:8px; border-radius:12px; background:var(--surface);
  box-shadow:0 18px 40px -18px rgba(30,20,10,.45),0 0 0 1px var(--line); }
.quiet-site .tq-nav-drop a{ color:var(--text); padding:10px 12px; border-radius:8px; text-decoration:none; min-height:44px; display:flex; align-items:center; }
.quiet-site .tq-nav-drop a:hover{ background:var(--bg); color:var(--accent-text); }
.tq-menu{ position:static; }
.tq-menu > summary{ list-style:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:8px; font-weight:600; cursor:pointer;
  background:color-mix(in srgb,currentColor 12%,transparent); }
.tq-menu > summary::before{ content:""; width:16px; height:10px; border-block:2px solid currentColor; box-shadow:inset 0 -2px 0 -0px transparent;
  background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat; }
.tq-menu[open] > summary::before{ border:0; background:none; width:14px; height:14px;
  background:linear-gradient(45deg,transparent 45%,currentColor 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,currentColor 45% 55%,transparent 55%); }
.tq-menu-panel{ position:absolute; left:0; right:0; top:100%; display:grid; gap:22px; padding:22px 20px 26px; border-radius:16px; background:var(--surface); color:var(--text);
  box-shadow:0 24px 50px -20px rgba(30,20,10,.5),0 0 0 1px var(--line); max-height:calc(100svh - 90px); overflow:auto; }
.tq-menu-group p{ font:600 14px/1.2 var(--sans); color:var(--text-soft); margin:0 0 6px; }
.quiet-site .tq-menu-panel a{ display:flex; align-items:center; min-height:48px; padding:2px 0; border-bottom:1px solid var(--line); color:var(--text); text-decoration:none;
  font:500 1.35rem/1.2 var(--serif); }
.quiet-site .tq-menu-panel a:hover{ color:var(--accent-text); }
body.quiet-site:has(.at-hero) .tq-menu-panel a, body.quiet-site:has(.at-hero) .tq-nav-drop a{ color:var(--text); }
.quiet-site .lin-header .quiet-signin{ flex:none; }
@media (min-width:1100px){
  .tq-nav{ display:flex; }
  .tq-menu{ display:none; }
}
@media (max-width:560px){
  .quiet-site .lin-mark span{ font-size:22px; }
  .quiet-site .lin-mark img{ width:30px; height:30px; }
  .quiet-site .lin-header{ gap:8px; }
  .quiet-site .lin-header .quiet-signin, .tq-menu > summary{ padding:0 11px; font-size:15px; }
}

/* ---- status labels: Now (neutral) and Tondo 2.0 (indigo, the brand's state colour) ---- */
.at-toc em.v2, .at-rows em.v2, .at-pay em.v2{ background:transparent; color:var(--indigo); box-shadow:inset 0 0 0 1.5px var(--indigo); }
.at-toc a:nth-of-type(n+3) em:not(.v2){ background:var(--soon-bg); color:var(--soon); }
.tq-v2{ border-color:var(--indigo); color:var(--indigo); font:600 12px/1.3 var(--sans); border-radius:5px; white-space:nowrap; vertical-align:.25em; }

/* ---- a feature key (the 2.0 list on the homepage, the lists on every 2.0 page) ---- */
.quiet-site .tq-key ul, .at-v2 ul{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; grid-template-columns:1fr; }
.quiet-site .tq-key li, .at-v2 li{ display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:16px; align-items:start; padding:20px; border-radius:14px;
  background:var(--surface); outline:0; border:0; box-shadow:none; }
.quiet-site .tq-key li > *:not(.tq-sym), .at-v2 li > *:not(.tq-sym){ grid-column:2; min-width:0; }
.quiet-site .tq-sym{ grid-row:1 / span 2; width:48px; height:48px; padding:12px; margin:0; border-radius:50%; background:var(--bg); box-shadow:none;
  fill:none; stroke:var(--accent-text); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.quiet-site .tq-key li:nth-child(3n+2) .tq-sym, .at-v2 li:nth-child(3n+2) .tq-sym{ stroke:var(--indigo); }
.quiet-site .tq-key li:nth-child(3n) .tq-sym, .at-v2 li:nth-child(3n) .tq-sym{ stroke:#6f7c52; }
.quiet-site .tq-key h3, .at-v2 h3{ font:500 1.3rem/1.2 var(--serif); letter-spacing:-.01em; }
.quiet-site .tq-key li p, .at-v2 li p{ margin-top:6px; font-size:16.5px; line-height:1.55; color:var(--text-soft); }
.at-v2{ padding-block:clamp(56px,9vw,110px) 0; border:0; }
.at-v2 > h2{ font-size:clamp(2.2rem,7.6vw,4rem); }
.at-v2 .tq-v2-note{ margin-top:16px; font-size:15px; color:var(--text-soft); }
@media (min-width:760px){ .quiet-site .tq-key ul, .at-v2 ul{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .at-v2 ul{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* ---- Tondo Makers on the homepage: the circle, and what already works today ---- */
.at-makers{ align-items:start; }
.at-makers .at-kicker{ background:none; padding:0; }
.at-makers .at-btn{ margin-top:22px; }
.at-makers-art{ margin:0; justify-self:center; }
.at-already{ grid-column:1 / -1; border-top:2px solid var(--text); padding-top:18px; display:grid; gap:12px; }
.at-already h3{ font:600 15px/1.2 var(--sans); color:var(--text-soft); }
.at-already p{ font-size:17px; line-height:1.55; }
.at-already b{ font-family:var(--serif); font-weight:600; font-size:1.15em; }
@media (min-width:900px){ .at-already{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; } .at-already h3{ grid-column:1; } }

/* ---- before you start (worksheets), on the homepage ---- */
.quiet-site .tq-home-make{ display:grid; gap:20px; padding-block:clamp(56px,9vw,110px) 0; border:0; }
.quiet-site .tq-home-make h2{ font-size:clamp(2.2rem,7.6vw,4rem); }
.quiet-site .tq-home-make p{ color:var(--text-soft); margin-top:12px; max-width:36rem; }

/* ---- ways to pay ---- */
.at-pay{ margin-top:22px; padding:22px; border-radius:16px; border:1.5px solid var(--line); }
.at-pay h3{ font:500 1.5rem/1.1 var(--serif); }
.at-pay ul{ list-style:none; margin:12px 0 6px; padding:0; }
.at-pay li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding:14px 0; border-top:1px solid var(--line); }
.at-pay li b{ font-weight:650; }
.at-pay li span{ grid-column:1; font-size:16px; line-height:1.5; color:var(--text-soft); }
.at-pay li em{ grid-column:2; grid-row:1; align-self:start; font:600 13px/1 var(--sans); font-style:normal; padding:7px 9px; border-radius:6px; }

/* ---- questions ---- */
.quiet-site .tq-faq{ padding-block:clamp(56px,9vw,110px) clamp(32px,5vw,56px); border:0; }
.quiet-site .tq-faq h2{ font-size:clamp(2.2rem,7.6vw,4rem); }
.quiet-site .tq-faq details{ background:var(--surface); border:0; border-radius:12px; margin-top:10px; padding:0 18px; }
.quiet-site .tq-faq summary{ min-height:56px; display:flex; align-items:center; font:500 1.2rem/1.3 var(--serif); }

/* ---- the homepage circle is a photograph of people now, so it is shown whole, not cropped round ---- */
.at-makers-photo{ width:100%; max-width:none; aspect-ratio:3/2; border-radius:18px; }
.at-toc img{ object-position:50% 50%; }

/* ---- narrow header: the language picker shows its flag only (its name stays the accessible label) ---- */
@media (max-width:560px){
  body .lin-header [data-language-picker] .language-trigger bdi{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  body .lin-header [data-language-picker] .language-trigger{ padding-inline:10px; gap:6px; }
}

/* ---- Tondo Makers page ---- */
.tq-makers{ padding-top:0; }
.mk-hero{ position:relative; display:flex; align-items:flex-end; min-height:min(92svh,820px); margin-inline:calc(50% - 50vw);
  padding:120px max(20px,calc((100vw - 1280px)/2)) clamp(32px,6vw,72px); color:#fff; isolation:isolate; }
.mk-hero-photo{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.mk-hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(20,17,14,.55) 0%,rgba(20,17,14,.1) 24%,rgba(20,17,14,.55) 52%,rgba(20,17,14,.94) 80%); }
.mk-hero-copy{ max-width:40rem; }
.mk-hero h1{ font:500 clamp(3.2rem,13vw,7.4rem)/.95 var(--serif); letter-spacing:-.035em; color:#fff; }
.mk-hero .quiet-lead{ color:#f1e9dc; font-size:clamp(18px,2vw,22px); line-height:1.5; margin-top:16px; }
.mk-hero .at-link{ color:#fff; }
.mk-hero .quiet-price{ color:#e2d7c6; }
.mk-hero .tq-v2{ color:#fff; border-color:#fff; margin:0; }
body.quiet-site:has(.mk-hero) .lin-header{ position:absolute; z-index:6; top:0; left:0; right:0; color:#fff; }
body.quiet-site:has(.mk-hero) .lin-header > a, body.quiet-site:has(.mk-hero) .tq-nav > a{ color:#fff; }
body.quiet-site:has(.mk-hero) .lin-header .quiet-signin{ background:rgba(20,17,14,.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
body.quiet-site:has(.at-hero) .tq-nav > a, body.quiet-site:has(.at-hero) .tq-nav-crafts > summary{ color:#fff; }
.tq-makers > .quiet-back{ display:none; }
.mk-together{ padding-block:clamp(56px,9vw,110px) 0; max-width:46rem; }
.mk-together h2{ font-size:clamp(2.2rem,7.6vw,4rem); }
.mk-together p{ font-size:clamp(18px,2vw,21px); color:var(--text-soft); margin-top:14px; }
.tq-makers .tq-key{ padding-block:clamp(40px,7vw,80px) 0; }
.tq-makers .tq-key > h2{ font-size:clamp(1.9rem,6vw,3rem); }
.mk-sal{ display:grid; gap:24px; padding-block:clamp(56px,9vw,110px) 0; align-items:center; }
.mk-sal img{ width:100%; border-radius:18px; }
.mk-sal h2{ font-size:clamp(2.2rem,7.6vw,4rem); }
.mk-sal ol{ margin:22px 0 0; padding:0; list-style:none; counter-reset:none; }
.mk-sal li{ padding:14px 0; border-top:1px solid var(--line); font-size:17px; line-height:1.55; color:var(--text-soft); }
.mk-sal li b{ display:block; font:500 1.3rem/1.2 var(--serif); color:var(--text); margin-bottom:4px; }
.mk-today{ margin-top:clamp(56px,9vw,110px); padding:28px 24px; border-radius:18px; background:var(--surface); }
.mk-today h2{ font:600 15px/1.2 var(--sans); color:var(--text-soft); letter-spacing:0; }
.mk-today-grid{ display:grid; gap:14px; margin-top:12px; }
.mk-today-grid p{ font-size:17px; line-height:1.55; }
.mk-today-grid b{ font-family:var(--serif); font-weight:600; font-size:1.2em; }
.mk-thread{ margin:clamp(40px,7vw,80px) 0 0; }
.mk-thread img{ width:100%; max-height:620px; object-fit:cover; border-radius:18px; }
.tq-makers .tq-note{ margin-top:clamp(40px,7vw,80px); padding:24px; border-radius:18px; border:1.5px solid var(--line); background:transparent; }
.tq-makers .tq-note h2{ font-size:clamp(1.8rem,6vw,2.6rem); }
.tq-makers .quiet-disclosure{ margin-top:32px; }
@media (min-width:900px){
  .mk-sal{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; }
  .mk-today-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .mk-thread{ display:none; }
}
.at-toc a:nth-of-type(n) em.v2, .at-rows li em.v2{ background:transparent; color:var(--indigo); box-shadow:inset 0 0 0 1.5px var(--indigo); }
@media (min-width:900px){ .at-toc{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.tq-makers .tq-note{ outline:0; }
.quiet-site .lin-header .quiet-signin{ display:inline-flex; align-items:center; justify-content:center; line-height:1; white-space:nowrap; }
.quiet-site .lin-mark{ min-width:0; }
@media (max-width:400px){ .quiet-site .lin-mark span{ font-size:20px; } .quiet-site .lin-header{ gap:6px; } .quiet-site .lin-header .quiet-signin, .tq-menu > summary{ padding:0 9px; } }
.at-pay li em.soon{ background:var(--soon-bg); color:var(--soon); }
/* Narrow phones: the header keeps the icon, Sign in, Menu and the flag; the wordmark returns from 431px.
   Measured 2026-10-01: fr "Se connecter" and ja "サインイン"/"メニュー" pushed the name under the buttons at 375px. */
.tq-menu > summary{ white-space:nowrap; }
@media (max-width:430px){ .quiet-site .lin-mark span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } }

/* ---- review fixes 2026-10-01 (Codex): focus that shows on the photograph, the people kept in the Makers
   opening on phones, and the two website pay rows ---- */
body.quiet-site:is(:has(.at-hero),:has(.mk-hero),:has(.tondo-account)) .lin-header :is(a,summary):focus-visible{
  outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px rgba(20,17,14,.85); }
.at-pay li em:not(.soon){ background:var(--surface); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); }
.at-card .at-btn{ width:100%; }
@media (max-width:700px){
  .mk-hero{ display:block; min-height:0; padding:72px 0 0; background:#1e1b17; }
  .mk-hero::after{ display:none; }
  .mk-hero-photo{ position:static; display:block; width:100%; height:auto; aspect-ratio:3/2; z-index:auto; }
  .mk-hero-copy{ padding:22px 20px 34px; }
}
@media (max-width:899px){ .at-makers-art{ order:-1; margin-inline:calc(50% - 50vw); width:100vw; } .at-makers-art .at-makers-photo{ border-radius:0; } }