/* Fontdue components wear the site's language via their theme properties */
  body{
    --primary_text_color:#111111;
    --secondary_text_color:#8a8a8a;
    --primary_background_color:#fafafa;
    --secondary_background_color:#f1f1ef;
    --horizontal_rule_color:#dcdcdc;
    --link_color:#111111;
    --link_hover_color:#666666;
    --active_link_color:#111111;
    --cart_indicator_color:#111111;
    --button_background_color:#fafafa;
    --button_text_color:#111111;
    --button_border_color:#c4c4c4;
    --button_hover_background_color:#f1f1ef;
    --button_hover_border_color:#111111;
    --button_selected_background_color:#111111;
    --button_selected_text_color:#ffffff;
    --button_selected_border_color:#111111;
    --add_to_cart_button_background_color:#111111;
    --add_to_cart_button_text_color:#ffffff;
    --add_to_cart_button_border_color:#111111;
    --checkout_button_background_color:#111111;
    --checkout_button_text_color:#ffffff;
    --checkout_button_border_color:#111111;
  }

  :root{
    --ui:"Label","Helvetica Neue",Helvetica,Arial,sans-serif;
    --mono:"Label","Helvetica Neue",Helvetica,Arial,sans-serif;
    --ease:cubic-bezier(.6,0,.2,1);
    /* one radius language: pills/buttons/chips at 8, soft cards at 12 (panels stay 10) */
    --r-pill:8px;
    --r-card:12px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-font-smoothing:antialiased}

  /* ===== REAL FONTS — Label family (10 styles, each its own master) ===== */
  @font-face{font-family:"Label";src:url("LabelTrial-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
  @font-face{font-family:"Label";src:url("LabelTrial-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
  @font-face{font-family:"Label";src:url("LabelTrial-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Label";src:url("LabelTrial-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
  @font-face{font-family:"Label";src:url("LabelTrial-Book.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:"Label";src:url("LabelTrial-BookItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
  @font-face{font-family:"Label";src:url("LabelTrial-Medium.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:"Label";src:url("LabelTrial-MediumItalic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
  @font-face{font-family:"Label";src:url("LabelTrial-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:"Label";src:url("LabelTrial-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
  @font-face{font-family:"Gratitude";src:url("GratitudeTrial-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
  @font-face{font-family:"Gratitude";src:url("GratitudeTrial-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
  @font-face{font-family:"Gratitude";src:url("GratitudeTrial-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Gratitude";src:url("GratitudeTrial-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
  @font-face{font-family:"Gratitude";src:url("GratitudeTrial-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:"Gratitude";src:url("GratitudeTrial-SemiboldItalic.woff2") format("woff2");font-weight:600;font-style:italic;font-display:swap}
  @font-face{font-family:"Gratitude";src:url("GratitudeTrial-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:"Gratitude";src:url("GratitudeTrial-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
  @font-face{font-family:"Global";src:url("GlobalBeta0.008-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Kilne";src:url("KilneBeta1.014-TextRegular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Furmint";src:url("FurmintWebisteBeta-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:"Castling";src:url("CastlingBetav1.005-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Moreau";src:url("MoreauBetav1.014-Roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Moreau";src:url("MoreauBetav1.014-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
  @font-face{font-family:"Dialogue";src:url("Dialogue_Beta_v1.0-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
  @font-face{font-family:"Rodeo";src:url("RodeoBeta1.001-HeadlineCompressed.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
  @font-face{font-family:"Aster";src:url("AsterBeta1.004-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
  @font-face{font-family:"Stately";src:url("StatelyBeta1.003-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:"Albie";src:url("Albie1.002-Extrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
  body{font-family:var(--ui);background:#f6fafa;color:#fff;
    font-feature-settings:"ss03" 1; /* Label's alternate single-story 1 */ }
  a{color:inherit;text-decoration:none}
  /* the page never scrolls sideways — anything wider than the viewport is clipped, not panned to
     (Safari on iOS wants it on both html and body) */
  html,body{overflow-x:hidden;overscroll-behavior-x:none}
  /* touch screens: iOS zooms the whole page in when a field under 16px takes focus, and the page
     then pans sideways until it is pinched back — so every field is 16px there */
  @media(pointer:coarse){
    input,select,textarea{font-size:16px !important}
  }
  ::selection{background:#fff;color:#000}

  /* ============ MORPHING NAV PILL ============
     Home: wide + short (identity bar).
     Project: narrower + slightly taller, name centred.
     Expanded (hover): grows DOWNWARD, weights stack under the name. */
  .pill{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100;
    background:rgba(255,255,255,.68);color:#111;overflow:hidden;
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    display:flex;align-items:center;justify-content:center;
    width:min(360px,calc(100vw - 36px));height:52px;border-radius:8px; /* phones: the corner's 18px each side */
    transition:width .5s var(--ease),height .5s var(--ease),border-radius .5s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),opacity .4s var(--ease),transform .5s var(--ease),left .5s var(--ease);}
  /* opening the cart lifts the main nav up and out (and pushes the news away); both return when the cart closes */
  body.cart-full-open .pill{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-22px);}
  /* ...but not immediately — the nav waits out most of the panel's shrink, then settles back,
     the same held return the trays give their pill faces */
  body.cart-closing .pill{transition:width .5s var(--ease),height .5s var(--ease),border-radius .5s var(--ease),
    background .4s var(--ease),box-shadow .4s var(--ease),opacity .35s var(--ease) .3s,transform .45s var(--ease) .3s;}
  .pill.is-project{width:224px;height:60px;border-radius:9px;}
  /* expanded state is driven by hovering the PILL itself (stage 2) */
  .pill.is-project:hover{width:348px;height:112px;border-radius:10px;}
  .pill.is-project:hover .weights{max-height:40px;opacity:1;}
  /* a name-only family: the pill morphs to its name but has no weight row to open, so hover leaves it at rest */
  .pill.is-project.no-weights:hover{width:224px;height:60px;border-radius:9px;}
  .pill.is-project.no-weights:hover .weights{max-height:0;opacity:0;}

  .pill .layer{position:absolute;left:0;right:0;display:flex;align-items:center;
    transition:opacity .35s var(--ease),transform .45s var(--ease);}

  /* home identity — horizontal */
  .pill .pill-home{top:0;height:52px;padding:0 14px 0 22px;justify-content:space-between;}
  .pill .pill-home .name{font-size:14px;letter-spacing:.06em;font-weight:600;text-transform:uppercase}
  .pill .pill-home .links{display:flex;gap:16px}
  .pill .pill-home .links a{font-size:14px;opacity:.6;transition:opacity .2s}
  .pill .pill-home .links a:hover{opacity:1}

  /* project — vertical stack anchored to top so the name doesn't shift on expand */
  .pill .pill-project{top:0;bottom:0;flex-direction:column;justify-content:flex-start;gap:0;
    opacity:0;transform:translateY(6px);pointer-events:none;padding:0 14px;}
  .pill .pill-project .pname{font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1;
    height:60px;flex:0 0 60px;display:flex;align-items:center;justify-content:center;gap:7px}
  .pill .pill-project .pname .go{opacity:.4;font-size:13px;transition:transform .25s var(--ease),opacity .2s}
  .pill .pill-project:hover .pname .go{opacity:1;transform:translateX(2px)}

  /* weight specimen — stacked under the name, revealed on expand */
  .pill .weights{display:flex;align-items:baseline;justify-content:center;gap:11px;
    max-height:0;opacity:0;overflow:hidden;width:100%;
    transition:max-height .4s var(--ease),opacity .3s var(--ease);}
  .pill .weights .col{display:flex;flex-direction:column;align-items:center;gap:3px}
  .pill .weights .w{line-height:1;color:#0c0c0b;font-size:20px}
  .pill .weights .lbl{font-family:var(--mono);font-size:7.5px;letter-spacing:.03em;text-transform:uppercase;color:#6f6f6f}
  .pill .weights.serif .w{font-family:"Label","Times New Roman",serif}
  .pill .weights.grotesk .w{font-family:"Gratitude","Helvetica Neue",Arial,sans-serif}
  .pill .weights.global .w{font-family:"Global","Helvetica Neue",Arial,sans-serif}

  .pill.is-project .pill-home{opacity:0;transform:translateY(-6px);pointer-events:none}
  .pill.is-project .pill-project{opacity:1;transform:translateY(0);pointer-events:auto}

  /* ============ FULL-BLEED SLIDES ============ */
  .slide{height:100svh;width:100%;position:relative;z-index:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;overflow:hidden;cursor:default;}
  /* last slide lifts off the footer with a soft bottom shadow */
  .slide.global{box-shadow:0 40px 60px -10px rgba(0,0,0,.55);}
  .slide[data-href]{cursor:pointer;}
  .slide .wordmark{position:relative;z-index:2;text-align:center;padding:0 6vw;line-height:.9;letter-spacing:-.02em;}

  /* hero is a click-through slideshow of brand shots */
  .slide.hero{background:#f6fafa;}
  .slide.hero .wordmark{display:none;}
  .hero-shots{position:absolute;inset:0;overflow:hidden;}
  .hero-shot{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:cover;
    opacity:0;transition:opacity .45s var(--ease);}
  .hero-shot.on{opacity:1;}
  /* graphic slides (e.g. the board) sit fully visible on their own colour rather than cropping */
  /* the board's image carries its own grainy ground out to a taller 8:9 canvas, so it fills any
     screen like the other heroes and there is never a join to see */
  .hero-shot--board{background-color:#3e9cf7;}
  /* the sign is an object on a flat ground. Fitting its 16:9 frame to a narrow screen leaves it tiny,
     so the frame scales up, capped by the height and never under the width; the ground colour is the
     image's own, so nothing shows where the frame stops */
  .hero-shot--silence{background-color:#dedede;background-size:max(100%,min(165%,177svh)) auto;}
  .hero-shot--desert{background-color:#e9c9b3;background-position:64% center;}
  /* a tall screen sees about half the painting's width, so it looks further right: cabin, sign and pole */
  @media (max-aspect-ratio: 3/4){.hero-shot--desert{background-position:76% center;}}

  .slide.label{background:#79c3de url("label-invigilator.webp") center/cover no-repeat;}
  .slide.label .wordmark{display:none}

  .slide.gratitude{background:#366271 url("gratitude-slide.webp?v=2") center/cover no-repeat;}
  .slide.gratitude .wordmark{display:none}
  /* phones: full bleed shows a quarter of the picture's width; the slice is centred on the word,
     which sits a little right of the picture's middle */
  @media(max-width:640px){.slide.gratitude{background-position:53% 50%;}}

  /* the image is a 3:4 canvas (the wall and table continued) so a phone can hold the whole set.
     On a tall screen the frame is then scaled up so the set sits at about four fifths of the width,
     easing back to a plain cover as the screen squares off — one formula, so nothing jumps */
  .slide.global{background:#b9b9b7 url("global-hero.webp") center/cover no-repeat;
    background-size:max(100%,75svh,min(210%,194svh - 94%)) auto;}
  .slide.global .wordmark{display:none}
  @media (min-width:1800px) and (min-resolution:1.5dppx){.slide.global{background-image:url("global-hero-xl.webp")}}   /* big desktops take the full-size file */

  .footer-spacer{height:100svh;position:relative;z-index:1;pointer-events:none}

  /* REVEAL FOOTER — pinned behind the slide stack; the site's own paper and components
     (microcap labels, serif values, hairlines, pill controls — the Info page's language) */
  .reveal-footer{position:fixed;left:0;right:0;bottom:0;z-index:0;height:100svh;
    background:#f3f3f0;color:#111;font-family:var(--ui);
    /* the small print keeps the 18px the floating chrome keeps (news widget,
       nav pill, cart), and the column leaves it that much room */
    --rf-edge:18px;--rf-baseh:20px}
  .reveal-footer .rf-inner{width:100%;max-width:1560px;height:100%;margin:0 auto;
    padding:clamp(36px,6vh,72px) clamp(20px,4vw,64px) calc(var(--rf-edge) + var(--rf-baseh) + 8px);
    display:flex;flex-direction:column;gap:clamp(26px,4vh,54px)}
  /* the content pair floats to the vertical centre; the base line keeps the floor */
  .reveal-footer .rf-mid{margin:auto 0;display:flex;flex-direction:column;gap:clamp(16px,2.2vh,26px)}
  /* sections sit in the site's soft cards */
  .reveal-footer .rf-card{background:rgba(255,255,255,.74);border-radius:var(--r-card);
    box-shadow:0 2px 16px rgba(0,0,0,.045);padding:clamp(20px,2.4vw,28px)}
  /* top: newsletter block + link columns */
  .reveal-footer .rf-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(12px,1.4vw,18px);align-items:stretch}
  .reveal-footer .rf-news p{font-size:15px;line-height:1.55;color:#666;max-width:34ch;margin:0 0 20px}
  .rf-nl{display:flex;gap:8px;max-width:360px}
  .rf-nl input{flex:1 1 auto;min-width:0;font-family:"Label",Georgia,serif;font-size:15.5px;color:#111;
    background:rgba(0,0,0,.045);border:none;border-radius:var(--r-pill);outline:none;padding:11px 14px;transition:background .2s}
  .rf-nl input:focus{background:rgba(0,0,0,.075)}
  .rf-nl input::placeholder{color:#a8a8a8}
  .rf-nl button{flex:0 0 auto;border:none;border-radius:var(--r-pill);background:#111;color:#fff;
    font-family:var(--mono);font-size:12px;padding:0 18px;cursor:pointer;transition:background .3s var(--ease)}
  .rf-nl button:hover{background:#3a3a3a}
  .rf-nl button.done{background:#3a3a3a;cursor:default}
  /* lower band: studio / contact entries above a hairline */
  .reveal-footer .rf-band{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
  .reveal-footer .rf-loc h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a;margin-bottom:10px;font-weight:400}
  .reveal-footer .rf-loc p{font-size:15.5px;line-height:1.6;color:#111;margin:0}
  .reveal-footer .rf-loc a{color:#111;text-decoration:none;transition:color .2s}
  .reveal-footer .rf-loc a:hover{color:#6f6f6f}
  /* the studio clock: London time, in the face's own figures, and a colon that breathes */
  .reveal-footer .rf-tz{color:#9a9a9a;font-size:12px;letter-spacing:.06em;margin-left:2px}
  .reveal-footer .rf-colon{display:inline-block;animation:rf-tick 2s ease-in-out infinite}
  @keyframes rf-tick{0%,100%{opacity:1}50%{opacity:.25}}
  @media(prefers-reduced-motion:reduce){.reveal-footer .rf-colon{animation:none}}
  @media(max-width:900px){.reveal-footer .rf-top{grid-template-columns:1fr 1fr}.reveal-footer .rf-news{grid-column:1/-1}}
  @media(max-width:640px){.reveal-footer .rf-band{grid-template-columns:1fr}}
  .reveal-footer .rf-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a;margin-bottom:14px;font-weight:400}
  .reveal-footer .rf-col a{display:block;color:#111;text-decoration:none;font-size:17px;line-height:1.85;transition:color .2s}
  .reveal-footer .rf-col a:hover{color:#6f6f6f}
  .reveal-footer .rf-news h4{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a;margin-bottom:14px;font-weight:400}
  .reveal-footer .rf-base{position:absolute;left:0;right:0;bottom:0;
    padding:0 var(--rf-edge) var(--rf-edge);
    display:flex;justify-content:space-between;align-items:flex-end;
    flex-wrap:wrap;gap:8px clamp(18px,3vw,40px);
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9a9a9a}
  .reveal-footer .rf-base a{color:inherit;text-decoration:none;transition:color .2s}
  .reveal-footer .rf-base a:hover{color:#111}
  .reveal-footer .rf-base .rf-legal{margin-left:auto}
  .reveal-footer .rf-base .rf-legal a+a{margin-left:18px}
  /* the footer is one viewport tall, so on small screens the blocks tighten
     to keep the base line on the floor instead of past it */
  @media(max-width:900px){
    .reveal-footer .rf-inner{padding-top:clamp(24px,3vh,36px);gap:clamp(18px,2.4vh,26px)}
    .reveal-footer .rf-mid{gap:clamp(12px,1.6vh,18px)}
    .reveal-footer .rf-card{padding:16px 18px}
    .reveal-footer .rf-news p{margin-bottom:14px}
  }
  /* short phones: the blocks close up further so the contact band and the base
     line stay inside the one screen the footer is given */
  @media(max-width:900px) and (max-height:740px){
    .reveal-footer .rf-inner{padding-top:14px;gap:10px}
    .reveal-footer .rf-mid{gap:6px}
    .reveal-footer .rf-card{padding:12px 16px}
    .reveal-footer .rf-news p{margin-bottom:10px;line-height:1.45}
    .reveal-footer .rf-col h4,.reveal-footer .rf-news h4{margin-bottom:8px}
    .reveal-footer .rf-loc h4{margin-bottom:5px}
    .reveal-footer .rf-col a{font-size:15.5px;line-height:1.6}
    .reveal-footer .rf-loc p{font-size:14.5px;line-height:1.45}
  }
  /* phones: the line is too long to hold both corners, so it stacks to the left edge */
  @media(max-width:640px){
    .reveal-footer{--rf-baseh:40px}
    .reveal-footer .rf-base{font-size:10px;letter-spacing:.05em;gap:6px 12px}
    .reveal-footer .rf-base .rf-legal{margin-left:0}
    .reveal-footer .rf-base .rf-legal a+a{margin-left:14px}
  }
  /* phones: the footer is taller than the screen, and a pinned footer can only ever show one screen of
     itself, so here it joins the flow at the end of the page and simply scrolls, every card reachable */
  @media(max-width:640px){
    .footer-spacer{height:0}
    .reveal-footer{position:relative;height:auto;min-height:0;z-index:1}
    .reveal-footer .rf-inner{height:auto;padding-top:40px;padding-bottom:0}
    .reveal-footer .rf-mid{margin:0}
    .reveal-footer .rf-base{position:static;padding:22px var(--rf-edge) var(--rf-edge)}
  }

  /* deliberate: the site does NOT modify itself for prefers-reduced-motion — its motion
     is all gentle morphs and fades, and the choreography IS the experience (owner's call) */

  /* ============ SLIDE-UP SPECIMEN SHEET ============
     A panel that rises from the bottom over the index.
     The pill stays above it (persistent nav), the sheet scrolls internally. */
  .sheet{position:fixed;left:0;right:0;bottom:0;top:0;z-index:90;
    background:#fafafa;
    transform:translateY(100%);transition:transform .9s var(--ease);
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    --bg:#fafafa;--fg:#111;--dim:#8a8a8a;--line:#dcdcdc;
    --pad:clamp(32px,6vw,96px);} /* wider gutters — more breathing room on the sides */
  .sheet.open{transform:translateY(0);}
  body.sheet-open{overflow:hidden;}

  /* cart — count box top-right that MORPHS open into the selection panel (like the nav pill) */
  .cart{position:fixed;top:18px;right:18px;z-index:131;color:#111;
    width:46px;height:46px;border-radius:7px;overflow:hidden;
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    opacity:0;pointer-events:none;transform:scale(.7);transform-origin:top right;
    transition:opacity .4s var(--ease),transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);}
  .cart.show{opacity:1;pointer-events:auto;transform:scale(1);}
  .cart.show:hover{transform:scale(1.1);} /* slight grow on hover, like the nav close */
  /* legibility: over a dark surface the frosted widgets turn brighter/more opaque (set on body by JS) */
  body.over-dark .pill,body.over-dark .cart,body.over-dark .news,body.over-dark .consent,body.over-dark .closeX,body.over-dark .cartpill:not(:hover){
    background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(18px) saturate(115%);backdrop-filter:blur(18px) saturate(115%);
    box-shadow:0 4px 18px rgba(0,0,0,.3);}
  /* Info open: counter slips right and fades (mirrors the news widget slipping down); slides back in on close */
  body.info-open .cart.show{opacity:0;pointer-events:none;transform:translateX(10px) scale(1);}
  /* the count face — fades out while the cart panel is open, fades back once it has shrunk home */
  .cart-count{position:absolute;top:0;right:0;width:46px;height:46px;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:13px;color:#111;text-decoration:none;transition:opacity .3s var(--ease);}
  .cart.tucked .cart-count{opacity:0;pointer-events:none;}

  /* ============ FULL CART — opens like the Info panel from 'View Cart' (Fontdue's cart slots in here) ============ */
  body.cart-full-open .trial-backdrop{opacity:1;pointer-events:auto;}
  /* morphs open from the cart's top-right corner (grows to fit), like the Info panel */
  .cart-full{position:fixed;top:18px;right:18px;width:46px;height:46px;z-index:160;color:#111;
    border-radius:9px;overflow:hidden;
    background:rgba(255,255,255,.74);
    -webkit-backdrop-filter:blur(22px) saturate(160%) brightness(1.12);backdrop-filter:blur(22px) saturate(160%) brightness(1.12);
    box-shadow:0 24px 80px rgba(0,0,0,.26);
    opacity:0;pointer-events:none;
    transition:width .55s var(--ease),height .55s var(--ease),border-radius .5s var(--ease),opacity .3s var(--ease);}
  body.cart-full-open .cart-full{opacity:1;pointer-events:auto;border-radius:10px;
    width:calc(100vw - 36px);height:calc(100svh - 36px);}
  /* over a dark page (e.g. a font page's brown header), make the panel more opaque so content stays legible */
  body.over-dark .cart-full{background:rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(22px) saturate(118%);backdrop-filter:blur(22px) saturate(118%);}
  /* closing: hold the box opaque while it shrinks home, fade it out only at the very end */
  body.cart-closing .cart-full{transition:width .5s var(--ease),height .5s var(--ease),border-radius .5s var(--ease),opacity .16s var(--ease) .4s;}
  /* content fades in once the shape has grown */
  .cf-bar,.cart-full .cf-scroll{opacity:0;transition:opacity .25s var(--ease);}
  body.cart-full-open .cf-bar,body.cart-full-open .cart-full .cf-scroll{opacity:1;transition:opacity .35s var(--ease) .22s;}
  /* the bar overlays the panel's top; the scroller beneath is masked so content dissolves
     under it — no painted band, clean over the glass */
  .cf-bar{position:fixed;top:18px;left:18px;right:18px;height:60px;z-index:161;
    display:flex;align-items:center;justify-content:center;padding:0 18px;pointer-events:none;}
  /* buttons are clickable ONLY while the cart is open — otherwise this fixed top bar's
     invisible back/close buttons (opacity:0 still takes clicks) sit over other panels'
     controls at z-index 161 and block them (was eating the Info panel's close) */
  body.cart-full-open .cf-bar button{pointer-events:auto;}
  /* the back button sits at the far left, where the growing panel's edge arrives LAST —
     faded in with the bar it would hang over the bare page and get underrun. It waits
     out the growth and then arrives the way the title does. */
  .cf-bar .cf-back{transition:opacity .3s var(--ease);}
  body.cart-arriving .cf-bar .cf-back{opacity:0;transition:none;}
  /* the shrinking panel's edge sweeps past the back button almost immediately —
     it fades itself out ahead of that, rather than being cut off mid-air */
  body.cart-closing .cf-bar .cf-back{opacity:0;transition:opacity .12s var(--ease);}
  .cart-full .cf-scroll{position:absolute;inset:0;overflow-y:auto;
    -webkit-mask-image:linear-gradient(180deg,transparent 22px,#000 60px);
    mask-image:linear-gradient(180deg,transparent 22px,#000 60px);}
  .cf-title{font-family:var(--mono);font-size:15px;color:#111;}
  .cf-back{position:absolute;left:20px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13.5px;color:#111;padding:6px 2px;transition:opacity .2s;}
  /* phones: the label would collide with the centred title — the chevron alone is the
     grammar every mobile user already knows */
  @media(max-width:560px){ #cfBackLabel{display:none} .cf-back{padding:10px 8px} .cf-back .cf-back-arr{font-size:19px} }
  .cf-back[hidden]{display:none;}
  .cf-back:hover{opacity:.55;}
  .cf-back-arr{font-size:16px;line-height:1;}
  .cf-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;background:none;cursor:pointer;border-radius:7px;transition:background .2s;}
  .cf-close:hover{background:rgba(0,0,0,.06);}
  .cf-close span{position:absolute;top:50%;left:50%;width:16px;height:1px;background:#111;}
  .cf-close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);}
  .cf-close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg);}
  .cf-scroll{padding:calc(60px + clamp(8px,2vh,24px)) clamp(22px,4vw,48px) clamp(40px,7vh,80px);}
  .cf-scroll>*{max-width:980px;margin-left:auto;margin-right:auto;} /* content stays centred; the scroller spans the panel */
  .cf-empty{font-family:"Label",Georgia,serif;font-size:18px;color:#9a9a9a;padding:30px 0;}

  /* step 1 — collections: soft white cards, the family name set in its own type, black Buy pill */
  .cf-coll{display:flex;flex-direction:column;gap:12px;}
  .cf-card{position:relative;display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,36px);
    border:none;border-radius:var(--r-card);overflow:hidden;cursor:pointer;
    background:rgba(255,255,255,.74);box-shadow:0 2px 16px rgba(0,0,0,.05);
    padding:clamp(24px,3vw,40px) clamp(26px,3vw,42px);
    transition:transform .2s var(--ease),box-shadow .25s var(--ease);}
  .cf-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.10);}
  .cf-card .cf-cinfo{flex:1 1 auto;min-width:0;}
  .cf-card .cf-cname{font-size:clamp(30px,4.6vw,52px);line-height:1;color:#111;} /* font-family set inline */
  .cf-card .cf-cstyles{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a;margin-top:11px;}
  .cf-card .cf-buy{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
    font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
    background:#111;color:#fff;border:none;border-radius:var(--r-pill);padding:12px 18px;
    transition:background .2s var(--ease);}
  .cf-card:hover .cf-buy{background:#000;}
  .cf-card .cf-buy .arr{transition:transform .25s var(--ease)}
  .cf-card:hover .cf-buy .arr{transform:translateX(4px)}
  /* standalone browse link (empty-cart state) */
  .cf-buy{flex:0 0 auto;border:none;background:none;cursor:pointer;font-family:var(--mono);font-size:13px;color:#111;padding:8px 6px;transition:opacity .2s;}
  .cf-buy:hover{opacity:.55;}

  /* step 2 — buying options (same soft language as the cart) */
  .cf-sec{margin-bottom:clamp(30px,4.5vh,50px);}
  .cf-label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8a;margin-bottom:15px;}
  /* licensee — soft segmented toggle, held in a white box like the others */
  .cf-segcard{background:rgba(255,255,255,.74);border-radius:var(--r-card);box-shadow:0 2px 16px rgba(0,0,0,.045);padding:12px;}
  .cf-seg{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:620px){.cf-seg{grid-template-columns:1fr;}}
  .cf-segbtn{border:none;border-radius:var(--r-pill);cursor:pointer;padding:18px;font-family:"Label",Georgia,serif;font-size:17px;
    color:#666;background:rgba(0,0,0,.05);transition:background .2s var(--ease),color .2s;}
  .cf-segbtn:hover{background:rgba(0,0,0,.09);color:#111;}
  .cf-segbtn.on{background:#111;color:#fff;}
  /* licence — soft card: name+size row, a prominent pricing note, and a dropdown explainer */
  .cf-liccard{background:rgba(255,255,255,.74);border-radius:var(--r-card);box-shadow:0 2px 16px rgba(0,0,0,.045);padding:20px 22px;}
  .cf-licrow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
  .cf-licname{font-family:"Label",Georgia,serif;font-size:18px;color:#111;}
  /* company-size pricing — title + text, matching the dropdown's typography */
  .cf-licprice{margin-top:16px;padding-top:16px;border-top:1px solid rgba(0,0,0,.08);}
  .cf-licprice-h{font-family:"Label",Georgia,serif;font-size:16px;color:#111;margin-bottom:8px;}
  .cf-licprice p{font-family:"Label",Georgia,serif;font-size:clamp(14px,1.1vw,15.5px);line-height:1.55;color:#666;margin:0;max-width:66ch;}
  /* explainer dropdown — same accordion language as the FAQ */
  .cf-licdrop{margin-top:16px;padding-top:16px;border-top:1px solid rgba(0,0,0,.08);}
  .cf-licdrop summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;
    font-family:"Label",Georgia,serif;font-size:16px;color:#111;}
  .cf-licdrop summary::-webkit-details-marker{display:none;}
  .cf-licdrop summary::after{content:"+";font-family:var(--mono);font-size:18px;color:#aaa;transition:transform .25s var(--ease),color .2s;}
  .cf-licdrop[open] summary::after{transform:rotate(45deg);color:#111;}
  .cf-licdrop p{font-family:"Label",Georgia,serif;font-size:clamp(14px,1.1vw,15.5px);line-height:1.55;color:#666;
    margin:12px 0 0;max-width:66ch;animation:infoPageIn .3s var(--ease);}
  .cf-licdrop .cf-mono{font-family:var(--mono);font-size:.86em;color:#444;}
  .cf-note2{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:#9a9a9a;margin:14px 0 0;max-width:70ch;}
  /* font bundles + individual styles, in soft cards */
  .cf-sublabel{margin-top:clamp(20px,3vh,30px);}
  .cf-fonts{background:rgba(255,255,255,.74);border-radius:var(--r-card);box-shadow:0 2px 16px rgba(0,0,0,.045);overflow:hidden;}
  .cf-frow{display:flex;align-items:center;gap:16px;padding:14px clamp(16px,2vw,22px);cursor:pointer;
    border-top:1px solid rgba(0,0,0,.06);transition:background .18s var(--ease);}
  .cf-frow:first-child{border-top:none;}
  .cf-frow:hover{background:rgba(0,0,0,.025);}
  .cf-frow.on{background:rgba(0,0,0,.045);}
  .cf-frow-fam{padding-top:18px;padding-bottom:18px;}
  .cf-prev{flex:0 0 auto;min-width:62px;font-size:26px;line-height:1;color:#111;} /* font-family/weight/style set inline */
  .cf-frow-fam .cf-prev{font-size:34px;}
  .cf-prev-pair{display:inline-flex;align-items:baseline;gap:8px;} /* both cuts of the pair */
  .cf-fname{flex:1 1 auto;font-family:"Label",Georgia,serif;font-size:16px;color:#222;}
  .cf-fname b{font-weight:400;font-size:20px;color:#111;}
  .cf-fname small{font-family:var(--mono);font-size:11px;color:#a0a0a0;margin-left:9px;letter-spacing:.02em;}
  .cf-price{flex:0 0 auto;font-family:var(--mono);font-size:13px;color:#777;}
  /* bundle savings: the pre-discount price sits struck-through beside the real one */
  .cf-was{font-family:var(--mono);font-weight:400;font-size:.9em;color:#b3b3b3;
    text-decoration:line-through;text-decoration-color:rgba(0,0,0,.3);margin-right:6px;}
  .cf-check{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(0,0,0,.18);position:relative;transition:background .18s,border-color .18s;}
  /* phones: the bundle rows tighten so a name holds its line; the style count drops beneath the name on
     purpose, and a struck price stacks above the real one so the price column stays narrow */
  @media(max-width:640px){
    .cf-frow{gap:12px;}
    .cf-prev{min-width:46px;}
    .cf-frow-fam .cf-prev{font-size:30px;}
    .cf-fname b{white-space:nowrap;}
    .cf-fname small{display:block;margin:4px 0 0;}
    .cf-price{text-align:right;line-height:1.35;}
    .cf-price .cf-was{display:block;margin-right:0;}   /* stacked, it keeps the same right edge as the price beneath */
    /* the cart's item card: the style count drops beneath the name rather than wrapping beside it */
    .cf-item-name{font-size:30px;}
    .cf-item-name small{display:block;margin:6px 0 0;}
  }
  .cf-frow.on .cf-check{background:#111;border-color:#111;}
  .cf-frow.on .cf-check::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);}
  .cf-grid{display:grid;grid-template-columns:1fr 1fr;}
  @media(max-width:620px){.cf-grid{grid-template-columns:1fr;}}
  .cf-grid .cf-frow:nth-child(2n){border-left:1px solid rgba(0,0,0,.06);}
  .cf-grid .cf-frow:nth-child(2){border-top:none;} /* top-right (first italic) shouldn't carry a top border */
  /* bottom bar */
  .cf-obar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:clamp(26px,4vh,40px);}
  .cf-addcart{white-space:nowrap;}
  @media(max-width:560px){
    .cf-obar{flex-direction:column;align-items:stretch;gap:14px;}
    .cf-obar .cf-total{text-align:center;}
    .cf-obar .cf-addcart{width:100%;}
  }
  .cf-total{font-family:var(--mono);font-size:13px;color:#888;}
  .cf-total b{font-family:"Label",Georgia,serif;font-weight:400;font-size:18px;color:#111;}
  .cf-addcart{height:52px;padding:0 36px;border:none;border-radius:var(--r-pill);cursor:pointer;background:#111;color:#fff;
    font-family:var(--mono);font-size:12.5px;transition:opacity .2s,transform .15s var(--ease),background .2s;}
  .cf-addcart:disabled{opacity:.32;cursor:not-allowed;}
  .cf-addcart:hover:not(:disabled){transform:translateY(-1px);background:#000;}

  /* step 3 — cart */
  .cf-cart{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,5vw,70px);align-items:start;}
  @media(max-width:760px){.cf-cart{grid-template-columns:1fr;}}
  /* each font sits in a soft card; cuts shown each in their true weight, removable individually */
  .cf-item{position:relative;display:flex;flex-direction:column;padding:21px 23px 18px;margin-bottom:15px;
    border:none;border-radius:var(--r-card);background:rgba(255,255,255,.74);box-shadow:0 2px 16px rgba(0,0,0,.045);
    transition:box-shadow .25s var(--ease),transform .25s var(--ease);}
  .cf-item:hover{box-shadow:0 8px 26px rgba(0,0,0,.08);}
  .cf-item-top{display:flex;justify-content:space-between;align-items:baseline;gap:15px;}
  .cf-item-name{font-size:34px;line-height:1.02;color:#111;} /* font-family set inline to the actual typeface */
  .cf-item-name small{font-family:var(--mono);font-size:12px;color:#a0a0a0;letter-spacing:.02em;margin-left:11px;}
  .cf-item-price{font-family:var(--mono);font-size:16.5px;color:#111;white-space:nowrap;}
  .cf-weights{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 18px;}
  .cf-wchip{display:inline-flex;align-items:center;gap:8px;padding:7px 11px 7px 14px;border-radius:var(--r-pill);
    background:rgba(0,0,0,.05);color:#1c1c1c;font-size:14px;line-height:1.15;
    transition:background .2s var(--ease);} /* font-family/weight/style set inline = the exact cut */
  .cf-wchip:hover{background:rgba(0,0,0,.08);}
  .cf-wx{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border:none;
    background:none;cursor:pointer;border-radius:50%;font-family:var(--mono);font-size:15px;line-height:1;
    color:#bcbcbc;padding:0;transition:color .2s var(--ease),transform .2s var(--ease);}
  .cf-wchip:hover .cf-wx{color:#111;}             /* on hover the cross animates to black */
  .cf-wx:hover{transform:scale(1.18);}
  /* footer: this family's licence + its own company size + remove */
  .cf-item-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
    padding-top:15px;border-top:1px solid rgba(0,0,0,.07);}
  /* licence holder — a line, then the name field (mirrors Fontdue's "Name of License Owner" capture) */
  .cf-holder{margin-top:15px;padding-top:15px;border-top:1px solid rgba(0,0,0,.07);}
  .cf-holder-in{width:100%;font-family:"Label",Georgia,serif;font-size:15.5px;color:#111;
    background:none;border:none;border-bottom:1px solid #c4c4c4;outline:none;padding:6px 0;
    transition:border-color .2s;}
  .cf-holder-in::placeholder{color:#a2a2a2;}
  /* custom-name add-on — a bundle-style row (circle check right), input morphs open below */
  .cf-addon-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease);}
  .cf-addon-body.open{grid-template-rows:1fr;}
  .cf-addon-inner{overflow:hidden;min-height:0;}
  .cf-addon-inner-pad{padding:6px clamp(16px,2vw,22px) 18px;}
  .cf-custom-in{margin-top:10px;}
  .cf-addon-prev{margin-top:10px;font-family:var(--mono);font-size:12px;color:#8f8f8f;}
  .cf-addon-prev b{font-weight:400;color:#111;}
  /* breakout containers under each font card: the add-on (costed, editable) + licence holder */
  .cf-item-sub{margin-top:10px;padding:16px 20px;}
  .cf-sub-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
  .cf-sub-price{font-family:var(--mono);font-size:14px;color:#111;}
  .cf-item-sub .cf-holder-in{margin-top:10px;}
  .cf-sub-foot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:12px;}
  .cf-sub-note{font-family:var(--mono);font-size:11px;color:#9a9a9a;}
  .cf-holder-in:focus{border-color:#111;}
  .cf-lic-mini{display:flex;align-items:center;gap:11px;}
  .cf-lic-name{font-family:var(--mono);font-size:12.5px;color:#555;}
  .cf-csel{font-family:var(--mono);font-size:12.5px;color:#111;background:rgba(0,0,0,.05);border:none;
    border-radius:8px;padding:9px 13px;cursor:pointer;transition:background .2s;}
  .cf-csel:hover{background:rgba(0,0,0,.09);}
  .cf-item-rm{border:none;background:none;cursor:pointer;font-family:var(--mono);font-size:11px;
    letter-spacing:.04em;color:#a8a8a8;padding:2px 0;transition:color .2s;}
  .cf-item-rm:hover{color:#c2453a;}
  .cf-cart-note{font-family:var(--mono);font-size:11.5px;line-height:1.5;color:#8f8f8f;margin:19px 2px 0;}
  .cf-actions{display:flex;gap:12px;margin:24px 0;}
  .cf-action{flex:1;border:none;border-radius:8px;background:rgba(0,0,0,.05);cursor:pointer;padding:16px;font-family:var(--mono);font-size:12.5px;color:#333;transition:background .2s,color .2s;}
  .cf-action:hover{background:rgba(0,0,0,.09);color:#111;}
  .cf-totals{border-top:1px solid rgba(0,0,0,.12);padding-top:20px;}
  .cf-trow{display:flex;justify-content:space-between;font-family:var(--mono);font-size:14px;color:#555;margin-bottom:11px;}
  .cf-trow.cf-grand{color:#111;font-size:19.5px;margin-top:7px;}
  .cf-contact h4{font-family:var(--mono);font-size:14px;font-weight:600;color:#111;margin-bottom:20px;} /* 600 = Label Medium cut */
  /* progressive checkout — sections grow open (grid-rows morph), mirroring Fontdue's elongation */
  .cf-reveal{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease);}
  .cf-reveal.open{grid-template-rows:1fr;}
  .cf-reveal>div{overflow:hidden;min-height:0;}
  .cf-chead{display:flex;justify-content:space-between;align-items:baseline;}
  .cf-chead h4{margin-bottom:14px;}
  .cf-change{border:none;background:none;cursor:pointer;font-family:var(--mono);font-size:12px;color:#c2453a;padding:2px 0;transition:opacity .2s;}
  .cf-change:hover{opacity:.6;}
  .cf-sum{font-size:15.5px;line-height:1.55;color:#555;padding-bottom:18px;}
  .cf-sum b{font-weight:400;color:#111;}
  .cf-h4gap{margin-top:10px;}
  .cf-payhead{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;}
  .cf-stripe{font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:#a2a2a2;}
  .cf-stripe b{color:#635bff;font-weight:600;}
  .cf-vat{display:flex;align-items:center;gap:10px;border-bottom:1px solid #c4c4c4;transition:border-color .2s;}
  .cf-vat:focus-within{border-color:#111;}
  .cf-vat b{font-family:var(--mono);font-size:13px;font-weight:400;color:#888;}
  .cf-vat input{border-bottom:none !important;}
  .cf-cardrow{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin:6px 0 18px;}
  .cf-cardin{width:100%;font-family:var(--mono);font-size:13px;color:#111;background:rgba(0,0,0,.045);
    border:none;border-radius:var(--r-pill);outline:none;padding:13px 14px;transition:background .2s;}
  .cf-cardin::placeholder{color:#a8a8a8;}
  .cf-cardin:focus{background:rgba(0,0,0,.075);}
  .cf-agree a{color:#111;}
  .cf-checkout:disabled{opacity:.35;cursor:not-allowed;}
  .cf-field{margin-bottom:20px;}
  .cf-field span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:#888;margin-bottom:6px;}
  .cf-field input{width:100%;font-family:"Label",Georgia,serif;font-size:17.5px;color:#111;background:none;border:none;border-bottom:1px solid #c4c4c4;outline:none;padding:7px 0;transition:border-color .2s;}
  .cf-field input:focus{border-color:#111;}
  .cf-news{display:flex;align-items:flex-start;gap:9px;margin:17px 0 24px;cursor:pointer;font-size:13px;line-height:1.45;color:#666;}
  .cf-news input{margin-top:2px;accent-color:#111;width:15px;height:15px;flex:0 0 15px;}
  .cf-checkout{width:100%;height:53px;border:none;border-radius:8px;cursor:pointer;background:#111;color:#fff;font-family:var(--mono);font-size:12.5px;transition:transform .15s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);}
  .cf-checkout:hover{transform:translateY(-1px);background:#3a3a3a;box-shadow:0 6px 18px rgba(0,0,0,.18);}
  /* Fontdue-live: Stripe Element mounts wear the card-input skin */
  .fd-mount{padding:15px 14px 12px;}
  .fd-mount.StripeElement--focus{background:rgba(0,0,0,.075);}
  .cf-payerr{font-family:var(--mono);font-size:12px;color:#c2453a;line-height:1.5;margin:-8px 0 14px;}
  .cf-payerr:empty{margin:0;}
  .cf-payhint{font-family:var(--mono);font-size:11.5px;color:#8f8f8f;line-height:1.5;margin:-6px 0 12px;}
  .cf-country{width:100%;font-family:"Label",Georgia,serif;font-size:17.5px;color:#111;background:none;border:none;border-bottom:1px solid #c4c4c4;outline:none;padding:7px 0;cursor:pointer;transition:border-color .2s;appearance:none;-webkit-appearance:none;}
  .cf-country:focus{border-color:#111;}
  /* coupon: the action button grows an input row out of itself */
  .cf-coupon{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease);}
  .cf-coupon.open{grid-template-rows:1fr;}
  .cf-coupon>div{overflow:hidden;min-height:0;}
  .cf-coupon-row{display:flex;gap:10px;padding:14px 0 22px;} /* clear of the rule beneath */
  .cf-coupon-row input{flex:1;font-family:var(--mono);font-size:13px;color:#111;background:rgba(0,0,0,.045);border:none;border-radius:var(--r-pill);outline:none;padding:12px 14px;}
  .cf-coupon-row button{border:none;border-radius:var(--r-pill);background:#111;color:#fff;font-family:var(--mono);font-size:12px;padding:0 18px;cursor:pointer;}
  .cf-trow.cf-disc{color:#14803c;}
  .cf-trow.cf-disc button{border:none;background:none;color:#c2453a;font-family:var(--mono);font-size:11px;cursor:pointer;padding:0 0 0 8px;}
  /* the paid moment */
  .cf-done h3{font-family:"Label",Georgia,serif;font-size:32px;letter-spacing:-.01em;color:#111;margin:0 0 12px;font-weight:400;}
  .cf-done p{font-size:17px;line-height:1.6;color:#666;margin:0 0 8px;}
  .cf-done .cf-ordno{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:#8f8f8f;text-transform:uppercase;margin:18px 0 24px;}
  a.cf-checkout{display:flex;align-items:center;justify-content:center;text-decoration:none;margin-bottom:8px;}
  .cf-done a.cf-checkout{font-size:14.5px;height:58px;} /* the download moment carries a little more presence */
  .cf-done-browse{width:100%;border:none;background:none;font-family:var(--mono);font-size:13.5px;color:#888;cursor:pointer;padding:10px;transition:color .2s;}
  .cf-done-browse:hover{color:#111;}
  .cf-dlwait{opacity:1 !important;background:#f1f1ef;color:#8f8f8f;cursor:default;animation:cfPulse 1.4s var(--ease) infinite;}
  @keyframes cfPulse{0%,100%{opacity:.55;}50%{opacity:.9;}}

  /* ADD TO CART — simple button on the font page; opens Buying Options */
  .cartpill{position:fixed;bottom:18px;right:18px;z-index:130;cursor:pointer;
    background:rgba(255,255,255,.68);color:#111;border-radius:7px;
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    display:flex;align-items:center;justify-content:center;width:200px;height:46px;
    opacity:0;pointer-events:none;transform:translateY(8px) scale(.98);
    transition:opacity .45s var(--ease),transform .5s var(--ease),background .2s,color .2s,box-shadow .4s var(--ease);}
  .cartpill.show{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
  /* opening the cart drops the Add-to-Cart button away (like the news widget); it rises back on close */
  body.cart-full-open .cartpill{opacity:0;pointer-events:none;transform:translateY(18px) scale(.98);}
  .cartpill:hover{background:#111;color:#fff;}
  .cartpill .cart-label{font-family:"Label",Georgia,serif;font-size:14px;letter-spacing:-.01em;}

  /* thin chic close — fixed at pill level, top-right, shown only with sheet open */
  /* close X — boxed, sits beside the nav pill */
  .closeX{position:fixed;top:18px;left:calc(50% + 188px);z-index:120;
    width:52px;height:52px;border-radius:8px;
    background:rgba(255,255,255,.68);border:none;cursor:pointer;
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    opacity:0;pointer-events:none;transform:scale(.7);transform-origin:left center;
    transition:opacity .4s var(--ease),transform .45s var(--ease),left .5s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);}
  /* waits for the pill to reform, then plays the scale-in + fade together — the lovely button animation, just delayed */
  body.sheet-open .closeX{opacity:1;pointer-events:auto;transform:scale(1);
    transition:opacity .4s var(--ease) .34s,transform .45s var(--ease) .34s,left .5s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);}
  /* opening trials/info over a font page — dissolve the close-X so they're never both present */
  body.trials-open .closeX,body.info-open .closeX,body.fonts-open .closeX{opacity:0;pointer-events:none;transform:scale(.7);transition:opacity .25s var(--ease),transform .25s var(--ease);}
  /* opening the cart lifts the page close-X up and out, in step with the nav pill; returns on close */
  body.cart-full-open .closeX{opacity:0;pointer-events:none;transform:translateY(-22px);transition:opacity .4s var(--ease),transform .5s var(--ease);}
  /* it returns on the same held clock as the nav pill, so the pair land together */
  body.cart-closing .closeX{transition:opacity .35s var(--ease) .3s,transform .45s var(--ease) .3s;}
  /* when the pill morphs to the narrower project state, the X sticks to its right edge */
  body.pill-narrow .closeX{left:calc(50% + 126px);}
  /* in the next-font moment, hide the X and cart pill for a tidy unveil */
  /* keep the X at its resting x and fade it in place — don't let pill-narrow snap it leftward */
  body.in-next .closeX{opacity:0;pointer-events:none;left:calc(50% + 188px);
    transition:opacity .35s var(--ease),left .45s var(--ease)}
  /* phones: the close button keeps the corner's 18px like everything else, and with a font
     page open the nav pill narrows and shifts left to sit beside it (the trays keep their own layout) */
  @media(max-width:640px){
    .closeX,body.pill-narrow .closeX,body.in-next .closeX{left:auto;right:18px;transform-origin:right center;}
    /* the shift is on left, not the transform: Safari mis-interpolates a translate that mixes % and px */
    body.sheet-open:not(.fonts-open):not(.info-open):not(.trials-open) .pill{left:calc(50% - 31px);}
    body.sheet-open:not(.fonts-open):not(.info-open):not(.trials-open) .pill:not(.is-project){width:calc(100vw - 98px);}
    /* morphed to the next font's name it is narrow enough to sit centred again, clear of the X */
    body.sheet-open:not(.fonts-open):not(.info-open):not(.trials-open) .pill.is-project{left:50%;}
    /* (a width, not a max-width, so it animates; the project pill's grown state is capped the same way) */
    body.sheet-open:not(.fonts-open):not(.info-open):not(.trials-open) .pill.is-project:hover{width:min(348px,calc(100vw - 98px));}
    body.sheet-open:not(.fonts-open):not(.info-open):not(.trials-open) .pill.is-project.no-weights:hover{width:224px;}
  }
  /* no hover, no weight row: on touch screens a tap would hold the pill open in its hover state,
     so every family's pill behaves as Global's does, the name alone at rest */
  @media(hover:none){
    .pill.is-project:hover,body.sheet-open:not(.fonts-open):not(.info-open):not(.trials-open) .pill.is-project:hover{width:224px;height:60px;border-radius:9px;}
    .pill.is-project:hover .weights{max-height:0;opacity:0;}
  }
  body.in-next .cartpill{opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
  .closeX span{position:absolute;top:50%;left:50%;width:18px;height:1px;background:#111;
    transition:background .2s,width .3s var(--ease);}
  .closeX span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);}
  .closeX span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg);}
  .closeX:hover span{width:22px;}

  /* ============ TRIALS — frosted tray that blooms from the nav pill ============ */
  .trial-backdrop{position:fixed;inset:0;z-index:140;background:rgba(22,19,16,.30);
    opacity:0;pointer-events:none;transition:opacity .45s var(--ease);}
  /* the blur rides only on visible states — an idle full-viewport backdrop-filter node
     is a standing compositor cost the closed page shouldn't pay */
  body.trials-open .trial-backdrop,body.info-open .trial-backdrop,body.fonts-open .trial-backdrop,
  body.trials-closing .trial-backdrop,body.info-closing .trial-backdrop,body.fonts-closing .trial-backdrop{
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
  body.trials-open .trial-backdrop,
  body.info-open .trial-backdrop{opacity:1;pointer-events:auto;}
  /* the scrim leaves as one thing — its opacity carries the tint and the softness together,
     so there is no moment where the page is sharp but still dark. Same pace as the way in. */
  body.trials-closing .trial-backdrop,body.info-closing .trial-backdrop,body.fonts-closing .trial-backdrop{
    transition:opacity .45s var(--ease);}
  /* and the pill stays ABOVE the departing scrim — dropping to its resting z-index while the
     scrim is still fading put the freshly-clicked pill underneath it for a beat, which read
     as a dark pulse over the very thing your cursor was on */
  body.trials-closing .pill,body.info-closing .pill,body.fonts-closing .pill{z-index:160;}
  /* the nav pill IS the container: it morphs open to hold the trial content — same language as home<->project */
  body.trials-open .pill{z-index:160;
    width:min(560px,calc(100vw - 28px));
    /* as tall as its content asks (measured on open), never taller than the window */
    height:min(var(--tray-h,484px),calc(100svh - 30px));
    border-radius:7px; /* same radius as the home nav pill — keep it consistent */
    box-shadow:0 18px 60px rgba(0,0,0,.22);
    /* it now sits over the dimmed page, which darkens it through the glass — lift it back optically, subtly */
    background:rgba(255,255,255,.71);
    -webkit-backdrop-filter:blur(18px) saturate(160%) brightness(1.15);
    backdrop-filter:blur(18px) saturate(160%) brightness(1.15);}
  /* once the download fires, the "Download directly" line appears — the tray grows for it */
  body.trials-open.trials-done .pill{height:min(var(--tray-h,510px),calc(100svh - 30px));}
  /* swap the pill's inner layers with the SAME slide+fade as home<->project, for consistent behaviour */
  body.trials-open .pill .pill-home,
  body.trials-open .pill .pill-project{opacity:0;pointer-events:none;transform:translateY(-6px);}
  /* open: let the shape form first, THEN slide+fade the content in — avoids the big panel fighting the box morph */
  body.trials-open .pill .pill-trials{opacity:1;pointer-events:auto;transform:translateY(0);
    transition:opacity .34s var(--ease) .22s, transform .42s var(--ease) .22s;}
  /* on close, hold the nav text back until the trial content has faded, so the two never overlap in the header */
  body.trials-closing .pill .pill-home{transition:opacity .3s var(--ease) .28s, transform .3s var(--ease) .28s;}

  /* hidden state mirrors pill-project; close: content clears quickly so it's gone before the pill shrinks */
  .pill .pill-trials{top:0;bottom:0;display:block;align-items:stretch;
    overflow-y:auto;overflow-x:hidden;opacity:0;pointer-events:none;transform:translateY(6px);
    transition:opacity .3s var(--ease),transform .3s var(--ease);}
  /* sides match the home pill's 20px left edge so content doesn't shift on swap; no top padding — the header IS the nav bar */
  .pill .pill-trials .tt-inner{padding:0 22px 22px;}
  /* header occupies the same 46px bar as the home nav, so the title lands exactly where "Souvenir" was */
  /* centred title, close pinned to the right */
  .tt-head{position:relative;display:flex;align-items:center;justify-content:center;height:52px;}
  .tt-title{font-family:var(--mono);font-size:14px;letter-spacing:0;}
  .tt-close{position:absolute;right:0;top:50%;transform:translateY(-50%);width:30px;height:30px;border:none;background:none;cursor:pointer;border-radius:6px;transition:background .2s;}
  .tt-close:hover{background:rgba(0,0,0,.06);}
  /* the corner X sits 11px from the panel top — pull it out of each tray's side padding
     (trials: 22px, fonts: 18px) so it's 11px from the side too */
  .pill-trials .tt-close{right:-11px;}
  .pill-fonts .tt-close{right:-7px;}
  .tt-close span{position:absolute;top:50%;left:50%;width:14px;height:1px;background:#111;}
  .tt-close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);}
  .tt-close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg);}
  .tt-sub{margin:4px 0 18px;font-size:13px;line-height:1.5;color:#555;max-width:44ch;}

  /* ===== FONTS tray — the nav pill morphs open to a short stack of the families (same language as Trials) ===== */
  body.fonts-open .trial-backdrop{opacity:1;pointer-events:auto;}
  body.fonts-open .pill{z-index:160;
    width:min(440px,calc(100vw - 28px));
    height:min(calc(150px + (4 * clamp(70px,11vh,92px))), calc(100svh - 30px));
    border-radius:7px;box-shadow:0 18px 60px rgba(0,0,0,.22);background:rgba(255,255,255,.71);
    -webkit-backdrop-filter:blur(18px) saturate(160%) brightness(1.15);backdrop-filter:blur(18px) saturate(160%) brightness(1.15);}
  body.fonts-open .pill .pill-home,
  body.fonts-open .pill .pill-project{opacity:0;pointer-events:none;transform:translateY(-6px);}
  body.fonts-open .pill .pill-fonts{opacity:1;pointer-events:auto;transform:translateY(0);
    transition:opacity .34s var(--ease) .22s, transform .42s var(--ease) .22s;}
  body.fonts-closing .pill .pill-home{transition:opacity .3s var(--ease) .28s, transform .3s var(--ease) .28s;}
  .pill .pill-fonts{top:0;bottom:0;display:block;overflow-y:auto;opacity:0;pointer-events:none;transform:translateY(6px);
    transition:opacity .3s var(--ease),transform .3s var(--ease);}
  .pill .pill-fonts .ff-inner{padding:0 18px 18px;}
  /* coloured thumbnails — each family's identity palette, name centred */
  .ff-list{display:flex;flex-direction:column;gap:10px;}
  .ff-thumb{position:relative;width:100%;border:none;cursor:pointer;border-radius:var(--r-card);overflow:hidden;
    height:clamp(70px,11vh,92px);display:flex;align-items:center;justify-content:center;
    transition:transform .2s var(--ease),box-shadow .2s var(--ease);} /* background set inline = headerBg */
  .ff-thumb:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.2);}
  .ff-thumb-name{font-size:clamp(28px,4vw,38px);line-height:1;} /* font-family + colour (headerFg) set inline */
  .ff-thumb-meta{position:absolute;right:14px;bottom:11px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;opacity:.6;}
  /* "New" badge — set in Label, sits on the corner whenever the tray is open */
  .ff-new{position:absolute;top:10px;right:10px;z-index:2;display:flex;align-items:center;justify-content:center;
    background:#c8f4e0;border-radius:var(--r-pill);padding:5px 11px 6px;box-shadow:0 5px 16px rgba(0,0,0,.34);pointer-events:none;
    font-family:"Label",Georgia,serif;font-size:13.5px;line-height:1;color:#111;white-space:nowrap;
    transform-origin:top right;}
  /* Sketchbook — its own drawn artwork on graph paper; the name lives in the image,
     so the text stays for screen readers only */
  .ff-thumb.ff-sketch{background:#dcebfd url("sketchbook-widget.webp") center/cover no-repeat;}
  .ff-thumb.ff-sketch:hover{box-shadow:0 10px 26px rgba(31,111,224,.18);}
  .ff-sketch .ff-thumb-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  /* the tray breaks between the finished families and the sketchbook — the break is set
     exactly like the tray's own "Fonts" title */
  .ff-sec{display:flex;align-items:center;justify-content:center;height:40px;
    font-family:var(--mono);font-size:14px;letter-spacing:0;}

  /* however many faces are on trial, they share the full width in equal columns */
  .tt-faces{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;}
  @media(max-width:520px){.tt-faces{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);}}
  .tt-face{display:flex;align-items:center;justify-content:center;padding:26px 10px;cursor:pointer;
    border-radius:7px;background:rgba(0,0,0,.04);transition:background .15s var(--ease);}
  .tt-face:hover{background:rgba(0,0,0,.08);}
  /* the typeface's own name, set in the typeface */
  .tt-face .fa{font-size:26px;line-height:1;color:#111;white-space:nowrap;transition:color .15s;}
  .tt-face.sel{background:#111;}
  .tt-face.sel .fa{color:#fff;}

  .tt-form{margin-top:20px;display:flex;flex-direction:column;gap:15px;}
  .tt-row2{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
  @media(max-width:460px){.tt-row2{grid-template-columns:1fr;}}
  .tt-field{display:flex;flex-direction:column;gap:5px;}
  .tt-field span{font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:#888;}
  .tt-field input{font-family:var(--ui);font-size:15px;color:#111;background:none;border:none;
    border-bottom:1px solid #c4c4c4;outline:none;padding:5px 0;transition:border-color .2s;}
  .tt-field input:focus{border-color:#111;}

  .tt-agree{display:flex;align-items:flex-start;gap:9px;margin-top:16px;cursor:pointer;
    font-size:12.5px;line-height:1.45;color:#555;}
  .tt-agree input{margin-top:2px;accent-color:#111;width:14px;height:14px;flex:0 0 14px;cursor:pointer;}

  /* resting state matches the unselected typeface cards; fills black on hover */
  .tt-submit{margin-top:20px;width:100%;height:46px;border:none;border-radius:7px;cursor:pointer;
    background:rgba(0,0,0,.04);color:#333;font-family:var(--mono);font-size:13px;letter-spacing:0;
    transition:transform .15s var(--ease),background .2s,color .2s,opacity .2s;}
  .tt-submit:hover:not(:disabled){background:#111;color:#fff;}
  .tt-submit:active:not(:disabled){transform:translateY(1px);}
  .tt-manual{margin-top:10px;text-align:center;font-family:var(--mono);font-size:11px;color:#9a9a9a;}
  .tt-manual a{color:#555;}
  .tt-submit:disabled{opacity:.5;cursor:not-allowed;}
  .tt-submit.done{background:#1f7a4d;color:#fff;opacity:1;cursor:default;}

  /* ============ INFO — the nav pill morphs into a near-fullscreen panel (slight margin, not full bleed) ============ */
  body.info-open .pill{z-index:160;
    width:calc(100vw - 36px);
    height:calc(100svh - 36px);
    border-radius:10px;
    background:rgba(255,255,255,.74);
    box-shadow:0 24px 80px rgba(0,0,0,.26);
    -webkit-backdrop-filter:blur(22px) saturate(160%) brightness(1.12);
    backdrop-filter:blur(22px) saturate(160%) brightness(1.12);}
  /* over a dark header (e.g. Label's brown), the morphed Info/Trials panel firms up too — same as the cart panel.
     Firm enough to read, sheer enough that the surface still ghosts through. */
  body.over-dark.info-open .pill,body.over-dark.trials-open .pill,body.over-dark.fonts-open .pill{
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:blur(22px) saturate(135%) brightness(1.1);backdrop-filter:blur(22px) saturate(135%) brightness(1.1);}
  /* swap layers with the same slide+fade language as trials/project */
  body.info-open .pill .pill-home,
  body.info-open .pill .pill-project{opacity:0;pointer-events:none;transform:translateY(-6px);}
  body.info-open .pill .pill-info{opacity:1;pointer-events:auto;transform:translateY(0);
    transition:opacity .34s var(--ease) .24s, transform .42s var(--ease) .24s;}
  /* on close, hold the nav text back so it doesn't overlap the fading panel content */
  body.info-closing .pill .pill-home{transition:opacity .3s var(--ease) .28s, transform .3s var(--ease) .28s;}

  .pill .pill-info{top:0;bottom:0;display:block;align-items:stretch;--info-top:clamp(56px,7.5vh,74px);
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;opacity:0;pointer-events:none;transform:translateY(6px);
    transition:opacity .3s var(--ease),transform .3s var(--ease);}
  /* title strip — an overlay on the pill, NOT inside the scroller. The scroller itself is masked,
     so content dissolves under the title with no painted colour (clean over glass on any surface) */
  .pill .info-topbar{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;align-items:flex-start;justify-content:center;
    height:clamp(56px,7.5vh,74px);padding:16px 18px 0;pointer-events:none;
    opacity:0;transition:opacity .3s var(--ease);}
  body.info-open .pill .info-topbar{opacity:1;transition:opacity .34s var(--ease) .24s;}
  .pill .pill-info{
    -webkit-mask-image:linear-gradient(180deg,transparent calc(var(--info-top)*.4),#000 var(--info-top));
    mask-image:linear-gradient(180deg,transparent calc(var(--info-top)*.4),#000 var(--info-top));}
  .info-topbar .info-title{font-family:var(--mono);font-size:14px;letter-spacing:0;color:#111;}
  /* the panel has two faces — Information (About/Services/Licensing) and Legal (Privacy/
     Terms) — same container, same behaviour, the tab row showing one group at a time */
  .pill-info[data-mode="info"] .info-tab[data-group="legal"],
  .pill-info[data-mode="legal"] .info-tab[data-group="info"]{display:none;}
  /* legal pages: the About page's single container, denser prose, no hover lifts */
  .about-row-c.legal .info-prose{max-width:66ch;font-size:clamp(15.5px,1.25vw,18px);line-height:1.55;}
  .about-row-c.legal .info-prose b{font-weight:500;color:#111;}
  .about-row-c.legal .info-prose a{color:#111;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.25);}
  .about-row-c.legal .info-prose a:hover{text-decoration-color:#111;}
  .legal-date{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#9a9a9a;margin-top:14px;}
  .info-close{position:absolute;right:14px;top:12px;width:34px;height:34px;border:none;background:none;cursor:pointer;border-radius:7px;transition:background .2s;}
  /* only interactive while open — otherwise the invisible × overlaps the nav 'Trials' link and blocks it */
  body.info-open .pill .info-topbar .info-close{pointer-events:auto;}
  .info-close:hover{background:rgba(0,0,0,.06);}
  .info-close span{position:absolute;top:50%;left:50%;width:16px;height:1px;background:#111;}
  .info-close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg);}
  .info-close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg);}

  /* generous breathing room down from the top before the centred tabs */
  .pill .pill-info .info-inner{padding:clamp(34px,8vh,100px) clamp(22px,4vw,60px) clamp(80px,18vh,200px);}
  /* tabbed "pages" — a soft segmented pill in the site's own language; the active tab is a filled
     black pill that slides between options (morph, not a hard swap) */
  .info-tabs{position:relative;display:flex;width:fit-content;margin:0 auto;gap:4px;
    padding:6px;border-radius:var(--r-card);background:rgba(0,0,0,.05);}
  .info-tab{position:relative;z-index:1;background:none;border:none;cursor:pointer;border-radius:var(--r-pill);
    padding:clamp(9px,1.1vw,13px) clamp(20px,2.3vw,34px);line-height:1;white-space:nowrap;
    font-family:"Label",Georgia,serif;font-weight:400;font-size:clamp(18px,2vw,27px);letter-spacing:-.01em;
    color:#8f8f8f;transition:color .3s var(--ease);}
  .info-tab:hover{color:#333;}
  .info-tab.active{color:#fff;}
  .info-tab-ind{position:absolute;top:6px;bottom:6px;left:0;width:0;z-index:0;border-radius:var(--r-pill);
    background:#111;box-shadow:0 5px 16px rgba(0,0,0,.2);
    transition:transform .5s var(--ease),width .5s var(--ease);}
  .info-pages{padding-top:clamp(36px,6vh,76px);max-width:1140px;margin:0 auto;}
  .info-page{display:none;}
  .info-page.active{display:block;animation:infoPageIn .45s var(--ease);}
  /* cart steps arrive the same way the Info pages do — a settle, not a swap.
     The class is re-applied only when the STEP changes; same-step re-renders
     (toggling a style, typing a name) stay still. */
  .cf-scroll.step-in > *{animation:infoPageIn .45s var(--ease) backwards;}
  /* a freshly-opened panel is still growing out of the counter — hold the content
     until the panel has landed, then let it rise in (same hold the sheet wordmark uses) */
  .cf-scroll.step-in.fresh-open > *{animation-delay:.3s;}
  @keyframes infoPageIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  .info-page-inner{font-family:"Label",Georgia,serif;color:#2a2a2a;}
  /* a big, characterful lead line opens each chapter, with plenty of air below it */
  .info-lead{font-size:clamp(38px,5.8vw,76px);line-height:1.04;letter-spacing:-.025em;color:#111;
    max-width:19ch;margin:clamp(22px,5vh,64px) auto clamp(44px,8vh,96px);text-align:center;}
  /* the section title sits plainly on the top row, in the same voice as the licence + Services titles */
  .info-contact-h{display:block;font-family:"Label",Georgia,serif;font-size:clamp(16px,1.5vw,21px);
    letter-spacing:0;text-transform:none;color:#111;margin-bottom:clamp(10px,1.4vw,16px);}
  /* editorial rows — the margin label carries the structure, one type voice throughout */
  /* the whole page is ONE soft card — sections inside separated by hairlines,
     each named by a quiet microcap; the title names the container */
  .about-row-c{background:rgba(255,255,255,.74);border-radius:var(--r-card);
    box-shadow:0 2px 20px rgba(0,0,0,.05);
    padding:clamp(22px,2.6vw,38px) clamp(24px,2.8vw,42px);
    margin-top:clamp(36px,5.5vh,60px);}
  .about-row-c .info-contact-h{margin-bottom:clamp(16px,2vw,24px);}
  .about-sec{margin-top:clamp(30px,4.5vh,48px);padding-top:clamp(20px,2.8vh,30px);
    border-top:1px solid rgba(0,0,0,.08);}
  .about-sec-l{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
    text-transform:uppercase;color:#9a9a9a;margin-bottom:clamp(14px,1.8vh,20px);}
  .ac-col a{display:block;}
  .ac-col a+a{margin-top:6px;}
  .info-prose{max-width:60ch;font-size:clamp(17px,1.5vw,22px);line-height:1.52;color:#1c1c1c;}
  .info-prose p+p{margin-top:1em;}
  .about-contact3{display:grid;grid-template-columns:1.1fr .7fr 1.6fr;gap:clamp(24px,3.5vw,56px);}
  @media(max-width:900px){.about-contact3{grid-template-columns:1fr;gap:30px;}}
  .ac-h{color:#9a9a9a;font-size:clamp(15px,1.25vw,18px);margin-bottom:8px;}
  .ac-col a{color:#111;font-size:clamp(16px,1.35vw,19px);text-decoration:none;transition:color .2s;}
  .ac-col a:hover{color:#6f6f6f;}
  /* the newsletter's introduction sits above its form, set as body copy rather than a footnote */
  .ac-col .nl-note{margin:0 0 14px;font-family:"Label",Georgia,serif;font-size:clamp(14.5px,1.15vw,16px);
    letter-spacing:0;color:#666;line-height:1.55;max-width:42ch;}

  /* SERVICES — every card in one centred row (no cut-off); the row breaks out wider than the text
     column so the cards read generous; hover lifts one and dims the rest */
  .svc-carousel{margin-top:clamp(34px,5vh,62px);width:min(1320px,calc(100vw - 52px));margin-left:50%;transform:translateX(-50%);}
  /* four across while each card can stay a proper width; two by two once they would thin out; one on a phone */
  .svc-track{display:grid;grid-template-columns:repeat(4,minmax(0,340px));justify-content:center;align-items:stretch;
    gap:clamp(14px,1.5vw,22px);padding:14px 0 18px;}
  @media(max-width:1100px){.svc-track{grid-template-columns:repeat(2,minmax(0,340px));}}
  @media(max-width:560px){.svc-track{grid-template-columns:minmax(0,340px);}}
  /* smooth spring lift; transform/opacity only so it stays 60fps */
  .svc-card{min-width:0;
    display:flex;flex-direction:column;align-items:center;text-align:center;
    min-height:clamp(330px,46vh,430px);
    border-radius:var(--r-card);background:#fff;border:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 36px rgba(0,0,0,.07);
    padding:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,24px) clamp(20px,2.2vw,28px);
    transition:transform .5s cubic-bezier(.34,1.4,.5,1),box-shadow .4s var(--ease),opacity .4s var(--ease);will-change:transform,opacity;}
  .svc-card:hover{transform:translateY(-10px);box-shadow:0 26px 60px rgba(0,0,0,.14);}
  /* dim + settle the siblings of whichever card is hovered */
  .svc-track:hover .svc-card:not(:hover){opacity:.4;transform:scale(.985);}
  .svc-pill{align-self:stretch;padding:6px 0;font-family:"Label",Georgia,serif;font-size:clamp(15px,1.3vw,19px);color:#111;}
  .svc-art{flex:1;display:flex;align-items:center;justify-content:center;width:100%;position:relative;padding:clamp(12px,2.2vh,26px) 0;}
  /* the four illustrations share one artboard height, so each takes its width as a share of the
     widest — they sit at the scale they were drawn, and at one height across the row */
  .svc-illo{display:block;height:auto;width:calc(var(--w) / 525.8 * min(100%, 270px));
    -webkit-user-select:none;user-select:none;pointer-events:none;
    transition:transform .5s cubic-bezier(.34,1.5,.5,1);will-change:transform;}
  .svc-card:hover .svc-illo{transform:translateY(-4px) rotate(-1.5deg);}
  .svc-desc{font-size:clamp(13.5px,1.05vw,16px);line-height:1.5;color:#5a5a5a;max-width:32ch;margin:0 auto;}
  .info-cta{margin-top:clamp(40px,6vh,68px);font-size:clamp(21px,2vw,30px);color:#111;text-align:center;}
  /* newsletter — lives in the contact card, wired to the real store */
  .info-nl{margin-top:18px;padding-top:4px;}
  .nl-form{display:flex;gap:8px;margin-top:2px;}
  .nl-form input{flex:1 1 auto;min-width:0;font-family:"Label",Georgia,serif;font-size:15.5px;color:#111;
    background:rgba(0,0,0,.045);border:none;border-radius:var(--r-pill);outline:none;padding:11px 13px;transition:background .2s;}
  .nl-form input:focus{background:rgba(0,0,0,.075);}
  .nl-form input::placeholder{color:#a8a8a8;}
  .nl-form button{flex:0 0 auto;border:none;border-radius:var(--r-pill);background:#111;color:#fff;
    font-family:var(--mono);font-size:12px;padding:0 16px;cursor:pointer;transition:background .3s var(--ease);}
  .nl-form button:hover{background:#3a3a3a;}
  .nl-form button.done{background:#3a3a3a;cursor:default;}
  .nl-note{margin-top:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:#9a9a9a;line-height:1.5;}
  /* colophon — microcap rows, hairlines only */
  .about-row-c .colo-row:first-child{padding-top:0;}
  .colo-row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:13px 2px;}
  .colo-row+.colo-row{border-top:1px solid rgba(0,0,0,.06);}
  .colo-row span{font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#9a9a9a;white-space:nowrap;}
  .colo-row b{font-weight:400;font-size:15px;color:#333;text-align:right;}
  /* phones: the value drops beneath its label, left-aligned, so a long line breaks where it reads rather than ragged on the right */
  @media(max-width:640px){
    .colo-row{flex-direction:column;align-items:flex-start;gap:5px;}
    .colo-row b{text-align:left;}
  }
  /* commissions — numbered bare rows with hairlines; white card on hover, like Characters/OT */
  /* how commissions run — the licence card's soft container, with the steps as hairline rows inside */
  .svc-steps{max-width:800px;margin:clamp(44px,7vh,80px) auto 0;text-align:left;
    background:rgba(255,255,255,.74);border-radius:var(--r-card);box-shadow:0 2px 20px rgba(0,0,0,.05);
    padding:clamp(24px,3vw,40px);}
  .svc-steps-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    padding-bottom:clamp(14px,2vh,20px);}
  .svc-step{display:grid;grid-template-columns:44px 1fr;column-gap:clamp(14px,2vw,24px);align-items:baseline;
    padding:clamp(16px,2.2vh,22px) 0;border-top:1px solid rgba(0,0,0,.08);}
  .svc-step:last-child{padding-bottom:4px;}
  .svc-step-n{font-family:"Label",Georgia,serif;font-size:clamp(22px,2vw,28px);line-height:1;color:#111;
    letter-spacing:-.02em;}
  .svc-step-n::before{content:"0";}
  .svc-step b{display:block;font-family:"Label",Georgia,serif;font-weight:400;font-size:clamp(17px,1.4vw,20px);color:#111;margin-bottom:5px;}
  .svc-step p{font-family:"Label",Georgia,serif;font-size:clamp(14px,1.1vw,15.5px);line-height:1.55;color:#666;max-width:60ch;margin:0;}
  @media(max-width:560px){.svc-step{grid-template-columns:36px 1fr;} .svc-step-n{font-size:20px;}}
  .info-cta a{color:#111;text-decoration:none;border-bottom:1px solid #111;transition:color .2s,border-color .2s;}
  .info-cta a:hover{color:#6f6f6f;border-color:#6f6f6f;}

  /* LICENSING — a single General Font Licence, in the cart's soft-card language */
  .info-intro{max-width:60ch;margin:0 auto;text-align:center;font-size:clamp(17px,1.5vw,22px);line-height:1.55;color:#3a3a3a;}
  .lic-card{max-width:800px;margin:clamp(38px,6vh,68px) auto 0;text-align:left;
    background:rgba(255,255,255,.74);border-radius:var(--r-card);box-shadow:0 2px 20px rgba(0,0,0,.05);
    padding:clamp(24px,3vw,40px);}
  .lic-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  /* the title sits plainly on the top row — the same voice as the Services cards */
  .lic-pill{font-family:"Label",Georgia,serif;font-size:clamp(16px,1.5vw,21px);color:#111;}
  .lic-lead{font-family:"Label",Georgia,serif;font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:#3a3a3a;
    margin:clamp(18px,2.6vh,28px) 0 0;max-width:62ch;}
  .lic-uses{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:clamp(20px,3vh,30px) 0 0;}
  @media(max-width:620px){.lic-uses{grid-template-columns:1fr;}}
  .lic-use{display:flex;flex-direction:column;gap:6px;background:rgba(0,0,0,.035);border-radius:var(--r-card);
    padding:16px 17px;font-size:13.5px;line-height:1.42;color:#666;transition:background .2s var(--ease);}
  .lic-use:hover{background:rgba(0,0,0,.06);}
  .lic-use b{font-family:"Label",Georgia,serif;font-weight:400;font-size:17px;color:#111;}
  .lic-price{margin-top:clamp(20px,3vh,28px);padding-top:clamp(18px,2.4vh,22px);border-top:1px solid rgba(0,0,0,.08);}
  .lic-price-h{font-family:"Label",Georgia,serif;font-size:16px;color:#111;margin-bottom:8px;}
  .lic-price p{font-family:"Label",Georgia,serif;font-size:clamp(14px,1.1vw,15.5px);line-height:1.55;color:#666;margin:0;max-width:66ch;}
  .info-faq{margin:clamp(56px,9vh,110px) auto 0;max-width:800px;}
  .info-faq-h{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#888;margin-bottom:6px;}
  .info-faq details{border-bottom:1px solid rgba(0,0,0,.12);}
  .info-faq summary{cursor:pointer;list-style:none;padding:clamp(22px,2.6vh,30px) 0;font-size:clamp(21px,2vw,29px);color:#111;
    display:flex;justify-content:space-between;align-items:center;gap:18px;}
  .info-faq summary::-webkit-details-marker{display:none;}
  .info-faq summary::after{content:"+";font-family:var(--mono);font-size:28px;color:#b0b0b0;transition:transform .25s var(--ease),color .2s;}
  .info-faq details[open] summary::after{transform:rotate(45deg);color:#111;}
  .info-faq details p{font-size:clamp(16.5px,1.4vw,20px);line-height:1.65;color:#555;padding:0 0 clamp(24px,3vh,34px);max-width:68ch;animation:infoPageIn .35s var(--ease);}
  /* links inside an answer read as ink with a hairline underline, the same as the legal pages */
  .info-faq details p a{color:#111;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.25);transition:text-decoration-color .2s;}
  .info-faq details p a:hover{text-decoration-color:#111;}

  /* ── the full agreement: a download moment with a hand-drawn mark ── */
  .eula-dl{margin-top:clamp(56px,9vh,110px);}
  .eula-dl-card{max-width:800px;margin:0 auto;display:flex;align-items:center;gap:clamp(24px,4vw,56px);
    flex-wrap:wrap;justify-content:center;text-align:left;
    background:rgba(255,255,255,.74);border-radius:var(--r-card);box-shadow:0 2px 20px rgba(0,0,0,.05);
    padding:clamp(28px,3.4vw,48px);}
  .eula-dl-art{flex:0 0 auto;width:clamp(140px,16vw,190px);height:auto; /* cropped to its ink, at the Services drawings' size */
    -webkit-user-select:none;user-select:none;pointer-events:none;
    transition:transform .5s cubic-bezier(.34,1.5,.5,1);}
  .eula-dl-card:hover .eula-dl-art{transform:translateY(-4px) rotate(-1.5deg);}
  .eula-dl-body{flex:1 1 300px;min-width:0;}
  .eula-dl-h{font-family:"Label",Georgia,serif;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;color:#111;}
  .eula-dl-p{font-size:clamp(14px,1.15vw,16px);line-height:1.6;color:#5f5f5f;margin:clamp(10px,1.4vh,16px) 0 clamp(18px,2.4vh,26px);max-width:46ch;}
  /* the download itself — the site's dark pill button, arrow nudges down on hover */
  .eula-dl-btn{display:inline-flex;align-items:center;gap:14px;text-decoration:none;
    background:#111;color:#fff;border-radius:var(--r-pill);padding:15px 22px;
    transition:transform .15s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);}
  .eula-dl-btn:hover{transform:translateY(-1px);background:#000;box-shadow:0 10px 26px rgba(0,0,0,.2);}
  .eula-dl-btn-l{font-family:var(--mono);font-size:13px;letter-spacing:.02em;}
  .eula-dl-btn-l::after{content:"↓";margin-left:9px;display:inline-block;transition:transform .25s var(--ease);}
  .eula-dl-btn:hover .eula-dl-btn-l::after{transform:translateY(3px);}

  /* ============ NEWS widget — frosted card, bottom-left, auto-cycling + dismissible ============ */
  .news{position:fixed;left:18px;bottom:18px;z-index:128;
    width:min(300px,calc(100vw - 32px));color:#111;display:flex;align-items:center;gap:14px;padding:12px;
    background:rgba(255,255,255,.68);
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 2px 10px rgba(0,0,0,.12);border-radius:8px;
    transition:opacity .4s var(--ease),transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);}
  /* hide while an overlay owns the screen */
  body.sheet-open .news,body.trials-open .news,body.info-open .news,body.cart-full-open .news,body.fonts-open .news,body.at-footer .news,body.off-hero .news{opacity:0;pointer-events:none;transform:translateY(10px);}
  /* lives on the hero only — fade out once a typeface becomes the active nav (scrolled past the hero), fade back in on scroll up */
  .pill.is-project ~ .news{opacity:0;pointer-events:none;transform:translateY(10px);}
  .news-thumb{flex:0 0 auto;width:70px;height:70px;border-radius:6px;
    background:#e6e6e3 center/cover no-repeat;transition:opacity .2s var(--ease);}
  .news-right{flex:1 1 auto;min-width:0;}
  .news-bar{margin:0 0 9px;height:2px;background:rgba(0,0,0,.1);border-radius:2px;overflow:hidden;}
  .news-bar i{display:block;height:100%;background:#111;border-radius:2px;transform-origin:left center;transform:scaleX(0);}
  .news-content{transition:opacity .2s var(--ease);}
  .news-eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#8a8a8a;margin-bottom:6px;}
  .news-copy{font-family:"Label",Georgia,serif;font-size:14px;line-height:1.45;color:#111;}
  .news-copy b{font-weight:600;}

  /* ============ COOKIE consent — the news widget's slimmer twin, stacked above it ============
     Analytics is the one optional cookie on the site, so this is a real gate: nothing loads
     until Accept, and Reject keeps it that way. It stays until answered; it only moves. */
  .consent{position:fixed;left:18px;bottom:18px;z-index:128;display:none;
    width:min(300px,calc(100vw - 32px));color:#111;padding:12px;
    background:rgba(255,255,255,.68);
    -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 2px 10px rgba(0,0,0,.12);border-radius:8px;
    /* it sits on the news widget's shoulders; when the news slips away it settles into the slot */
    --consent-lift:calc(var(--news-h,94px) + 10px);
    opacity:0;transform:translateY(calc(10px - var(--consent-lift)));
    transition:opacity .4s var(--ease),transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);}
  .consent.on{display:block;}
  /* the store's own consent banner stays off: this site asks the question once, with its own, and without an
     answer Fontdue keeps to the cookies it needs anyway */
  .fontdue-consent-banner{display:none !important;}
  .consent.show{opacity:1;transform:translateY(calc(-1 * var(--consent-lift)));}
  body.sheet-open .consent,body.trials-open .consent,body.info-open .consent,body.cart-full-open .consent,
  body.fonts-open .consent,body.off-hero .consent,.pill.is-project ~ .consent{--consent-lift:0px;}
  body.at-footer .consent{--consent-lift:46px;} /* clear of the small print */
  .consent-copy{font-family:"Label",Georgia,serif;font-size:14px;line-height:1.4;color:#111;margin:0 0 8px;}
  .consent-row{display:flex;align-items:center;gap:6px;}
  .consent-btn{flex:0 0 auto;height:26px;padding:0 14px;border:none;border-radius:var(--r-pill);cursor:pointer;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
    transition:background .3s var(--ease),color .3s var(--ease);}
  /* the two answers carry equal weight — neither is pre-chosen for you */
  .consent-btn{background:rgba(0,0,0,.06);color:#111;}
  .consent-btn:hover{background:rgba(0,0,0,.11);}
  .consent-more{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
    color:#8a8a8a;text-decoration:none;transition:color .2s;}
  .consent-more:hover{color:#111;}
  @media(max-width:640px){
    body.at-footer .consent{--consent-lift:62px;}  /* the small print stacks to two lines there */
    body.sheet-open .consent{--consent-lift:56px;} /* and the cart pill shares the floor on a phone */
  }
  /* phones: the Add to Cart pill sits at the centre of the floor rather than the corner */
  @media(max-width:640px){ .cartpill{right:auto;left:calc(50% - 100px);} }
  /* phones: the top corner belongs to the nav pill and, on a font page, the close button — so the
     cart counter sits in the bottom corner instead, the size of the close button, and the cart
     panel grows from there up to the top edge. The bottom-left widgets leave it room. */
  @media(max-width:640px){
    .cart{top:auto;bottom:18px;width:52px;height:52px;border-radius:8px;}
    .cart-count{width:52px;height:52px;}
    .cart-full{top:calc(100svh - 70px);width:52px;height:52px;
      transition:width .55s var(--ease),height .55s var(--ease),border-radius .5s var(--ease),opacity .3s var(--ease),top .55s var(--ease);}
    body.cart-full-open .cart-full{top:18px;}
    /* the close animates the top too, so the panel shrinks back into the corner as one shape */
    body.cart-closing .cart-full{transition:width .5s var(--ease),height .5s var(--ease),border-radius .5s var(--ease),opacity .16s var(--ease) .4s,top .5s var(--ease);}
    /* and the header and contents wait for the panel to finish travelling up before they arrive */
    body.cart-full-open .cf-bar,body.cart-full-open .cart-full .cf-scroll{transition:opacity .35s var(--ease) .5s;}
    .cf-scroll.step-in.fresh-open > *{animation-delay:.55s;}
    .news,.consent{width:min(300px,calc(100vw - 98px));}
  }
  /* handsets only: a touch screen at phone width. A narrow window on a computer, or a tablet, keeps the desktop card */
  @media(max-width:480px) and (hover:none) and (pointer:coarse){
    .news{right:18px;width:auto;}
    .cart.show ~ .news{right:80px;}   /* with something in the cart, the counter has the bottom corner: the card stops short of it */
  }
  .sheet-pad{padding-top:84px;}

  .sheet .s-head{min-height:82vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:0 var(--pad);position:relative;text-align:center}
  /* phones: the header keeps only a slim gutter, so the longest names can sit a little larger */
  @media(max-width:640px){ .sheet .s-head{padding-left:16px;padding-right:16px} }
  /* main (top) header bleeds to fill the whole window — no grey band above or below */
  .sheet .sheet-pad > .s-head:first-child{min-height:100svh;margin-top:-84px;padding-top:40px}
  .sheet .s-head .big{font-family:"Label",Georgia,serif;color:#111;
    font-size:clamp(112px,22vw,360px);line-height:.82;letter-spacing:-.02em;font-weight:400}
  /* 'unstuck' letters — each rolls in from a peeled edge (driven by the Web Animations API) */
  .sheet .s-head .big .ltr{display:inline-block;will-change:transform,opacity;
    transform-style:preserve-3d;backface-visibility:hidden}
  .sheet .s-head .dot-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
  /* typewriter caret — full-height line, blinks like a chat input */
  .sheet .s-head .tw-caret{display:inline-block;width:.3em;position:relative;color:transparent;
    animation:twBlink 1.05s steps(1) infinite}
  .sheet .s-head .tw-caret::before{content:"";position:absolute;left:.06em;
    top:-.04em;height:.92em;width:3px;background:var(--headerFg,#e83b2c)}
  @keyframes twBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

  /* Sketchbook — graph paper for a header, and the wordmark scribbles itself in:
     each letter is traced stroke-first (a long dash pulled through the glyph outline),
     then the ink floods the counters. Plain strokes, no filter: it stays light to draw. */
  .sheet .s-head.sketch{
    background-image:linear-gradient(#b6d2f4 1px,transparent 1px),linear-gradient(90deg,#b6d2f4 1px,transparent 1px);
    background-size:27px 27px;background-position:center top;}
  .sheet .s-head .scribble{display:block;overflow:visible;margin:0 auto}
  .sheet .s-head .scribble text{font-family:"Furmint","Label",Georgia,serif;font-weight:700;letter-spacing:-.01em;
    text-anchor:middle;fill:#2f7deb;stroke:#2f7deb}
  .sheet .s-head .scribble tspan{fill-opacity:0;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1400;stroke-dashoffset:1400;
    animation:scribTrace .85s cubic-bezier(.45,.05,.55,.95) forwards, scribInk .4s ease forwards}
  @keyframes scribTrace{to{stroke-dashoffset:0}}
  @keyframes scribInk{to{fill-opacity:1}}

  /* Global — night-mode lume: the field fades to night and the text glows in the dark */
  .sheet .s-head.night{background:#06080b !important;transition:background 1.6s cubic-bezier(.4,0,.2,1)}
  .sheet .s-head .big.lume{
    color:#cfffe9;
    animation:lumeIn 1.6s cubic-bezier(.4,0,.2,1) forwards, lumeBreathe 4.5s ease-in-out 1.6s infinite;
    will-change:opacity;
  }
  @keyframes lumeIn{
    0%{ color:#3a4a44; text-shadow:0 0 0 rgba(120,255,205,0); }
    100%{ color:#cfffe9; text-shadow:0 0 18px rgba(120,255,205,.55), 0 0 42px rgba(90,240,190,.4), 0 0 90px rgba(70,220,175,.25); }
  }
  @keyframes lumeBreathe{
    0%,100%{ text-shadow:0 0 18px rgba(120,255,205,.5), 0 0 42px rgba(90,240,190,.36), 0 0 90px rgba(70,220,175,.22); }
    50%{ text-shadow:0 0 26px rgba(140,255,215,.7), 0 0 60px rgba(100,245,195,.5), 0 0 120px rgba(80,230,180,.32); }
  }
  .sheet .s-head .facts{margin-top:clamp(28px,4vw,52px);display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
    font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8a8a8a}
  .sheet .s-head .facts b{color:#111;font-weight:400}

  /* About / family story */

  /* section header used for Specimen + Glyphs */
  .sheet .sec{display:flex;justify-content:space-between;align-items:baseline;
    padding:clamp(28px,3.5vw,48px) var(--pad) 16px;
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8a}

  /* SPECIMEN — finished: cut label top-left, type with consistent margins between dividers */
  .sheet .wf .row{position:relative}
  .sheet .wf .row:first-child::before{display:none}
  .sheet .wf .row{padding:clamp(36px,4.5vw,68px) var(--pad) clamp(36px,4.5vw,68px); display:block; min-height:0}
  .sheet .wf .row::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1.5px;background:var(--rule,#dcdcdc)}
  .sheet .wf .spec-label{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#111;
    position:absolute;top:clamp(10px,1.3vw,16px);left:var(--pad)}
  .sheet .wf .spec{font-family:"Label",Georgia,serif;color:#111;
    line-height:1.05;letter-spacing:-.02em;outline:none;word-break:break-word;position:relative;z-index:1}
  /* body-size blocks stay at natural tracking for readability */
  .sheet .wf .spec.passage{letter-spacing:normal;word-break:normal}
  .sheet .wf .spec.twocol{letter-spacing:0;word-break:normal}
  .sheet .wf .spec .spec-foot{display:block;column-span:all;margin-top:.9em}
  /* (no mobile column collapse — the specimen's typesetting is frozen and scales as one piece) */

  /* the interactive tester sits in its own block */
  .sheet .tester .row{padding:clamp(16px,2.2vw,28px) var(--pad)}
  .sheet .tester .spec{font-family:"Label",Georgia,serif;color:#111;line-height:1.15;
    letter-spacing:-.01em;outline:none;cursor:text;word-break:break-word;min-height:1.2em}

  /* in-use image slideshow — its own specimen chapter: rule + label above, image centred beneath */
  .sheet .wf .inuse-row{padding-bottom:clamp(44px,5.5vw,80px)}
  .sheet .wf .slideshow{position:relative;margin:clamp(14px,2vw,26px) auto 0;
    width:min(680px,100%);aspect-ratio:4/3;
    overflow:hidden;background:#e6e6e3;cursor:pointer;border-radius:var(--r-card);
    box-shadow:0 10px 36px rgba(0,0,0,.07)}
  /* slides cross-fade in place: no drift in scale, the photograph simply arrives */
  .sheet .wf .slideshow .slide-img{position:absolute;inset:0;background-size:cover;background-position:center;
    opacity:0;transition:opacity .7s var(--ease)}
  .sheet .wf .slideshow .slide-img.on{opacity:1}
  /* placeholder: plain grey until real photography lands (the pill carries the caption) */
  .sheet .wf .slideshow .slide-img.ph{background:#e6e6e3}
  /* caption pill — pops up bottom-centre on hover to name the image */
  .sheet .wf .slideshow .cap-pill{position:absolute;bottom:14px;left:50%;
    z-index:4;max-width:calc(100% - 48px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--r-pill);padding:10px 18px;
    font-family:"Label",Georgia,serif;font-size:15px;color:#111;
    box-shadow:0 5px 16px rgba(0,0,0,.12);pointer-events:none;transform-origin:bottom center;
    opacity:0;transform:translateX(-50%) translateY(8px) scale(.92);
    transition:opacity .25s var(--ease),transform .38s cubic-bezier(.34,1.6,.5,1)}
  .sheet .wf .slideshow:hover .cap-pill{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  .sheet .wf .slideshow:hover .cap-pill.swap{opacity:0;transform:translateX(-50%) translateY(5px) scale(.96)}
  /* a credit in the caption links out: the pill itself stays inert, the link alone takes the pointer */
  .sheet .wf .slideshow .cap-pill .cap-link{pointer-events:auto;color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.3);transition:text-decoration-color .2s}
  .sheet .wf .slideshow .cap-pill .cap-link:hover{text-decoration-color:#111}
  /* prev / next hit zones */
  .sheet .wf .slideshow .nav-zone{position:absolute;top:0;bottom:0;width:38%;z-index:3}
  .sheet .wf .slideshow.single{cursor:default}
  .sheet .wf .slideshow .nav-zone.prev{left:0;cursor:w-resize}
  .sheet .wf .slideshow .nav-zone.next{right:0;cursor:e-resize}

  /* continuous next-font header — inherits .s-head sizing; sits as a layer beneath */
  .sheet .nextfont{position:relative;background:#fafafa;cursor:pointer}

  /* GLYPHS section */
  .sheet .glyphs{padding:0 var(--pad) clamp(50px,7vw,90px)}

  /* styles list + buy */
  .sheet .styles-list{padding:clamp(56px,7vw,104px) var(--pad) clamp(44px,6vw,84px);position:relative;text-align:center}
  .sheet .styles-list::after{content:"";position:absolute;bottom:0;left:var(--pad);right:var(--pad);height:1.5px;background:var(--rule,#dcdcdc)}
  /* 'Available Styles' chapter label, top-left; the Aa's keep the full width so they stay big */
  .sheet .styles-label{position:absolute;top:clamp(22px,3vw,40px);left:var(--pad);
    font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8a8a8a}
  /* cuts as Aa specimens — uprights on one line, italics on the next; hover reveals the weight */
  .sheet .styles-aa{display:flex;flex-direction:column;}
  /* the cells share one baseline: each face brings its own ascent and descent, so their boxes don't line up on their own */
  .sheet .aa-line{display:flex;justify-content:center;align-items:baseline;gap:clamp(12px,2.3vw,40px);
    padding:clamp(20px,2.6vw,38px) 0;}
  .sheet .aa-line:first-child{padding-top:clamp(4px,0.8vw,12px);}
  .sheet .styles-aa .aa{position:relative;flex:0 0 auto;font-family:inherit;color:#111;
    font-size:clamp(60px,10.3vw,178px);line-height:.86;cursor:default;transition:opacity .25s var(--ease);}
  /* dim only the OTHER letters when one is hovered — the hovered one stays lit, gaps never grey them all */
  .sheet .styles-aa:has(.aa:hover) .aa:not(:hover){opacity:.24}
  .sheet .styles-aa .aa-lbl{position:absolute;left:50%;top:100%;margin-top:13px;
    transform:translate(-50%,-6px);opacity:0;pointer-events:none;white-space:nowrap;z-index:3;
    background:#111;color:#fafafa;padding:7px 12px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.2);
    font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
    transition:opacity .22s var(--ease),transform .22s var(--ease);}
  .sheet .styles-aa .aa:hover .aa-lbl{opacity:1;transform:translate(-50%,0);}
  /* phones: the Aa's size to the width so a full row of weights fits, and a row may wrap rather than spill */
  @media(max-width:640px){
    .sheet .aa-line{flex-wrap:wrap;gap:10px 12px;padding:14px 0;}
    .sheet .styles-aa .aa{font-size:clamp(40px,11vw,60px);}
  }

  /* richer per-row tester controls */
  .sheet .bar2{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px;
    font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:#9a9a9a;
    position:relative;z-index:5;background:var(--bg);padding:8px 0}
  .sheet .bar2 select{font-family:var(--mono);font-size:11px;color:#444;background:none;border:none;
    border-bottom:1px solid #c4c4c4;padding:3px 14px 3px 2px;outline:none;cursor:pointer;letter-spacing:.03em}
  .sheet .bar2 .ctl{display:flex;align-items:center;gap:8px}
  .sheet .bar2 .ctl label,.sheet .bar2 .seg label{color:#9a9a9a}
  .sheet .bar2 .ctl .val{color:#555;min-width:34px}
  .sheet .bar2 input[type=range]{-webkit-appearance:none;appearance:none;width:clamp(64px,7vw,96px);height:1px;background:#bcbcbc;outline:none}
  .sheet .bar2 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--accent,#111);cursor:pointer}
  .sheet .bar2 input[type=range]::-moz-range-thumb{width:10px;height:10px;border:none;border-radius:50%;background:var(--accent,#111);cursor:pointer}
  /* OT toggles */
  .sheet .bar2 .togs{display:flex;align-items:center;gap:4px}
  .sheet .bar2 .tog{font-family:var(--mono);font-size:11px;color:#aaa;background:none;
    border:1px solid #d6d6d6;border-radius:4px;padding:3px 7px;cursor:pointer;transition:.15s;line-height:1}
  .sheet .bar2 .tog:hover{color:#111;border-color:#999}
  .sheet .bar2 .tog.on{color:var(--accentFg,#fff);background:var(--accent,#111);border-color:var(--accent,#111)}
  /* segmented controls: alignment + columns */
  .sheet .bar2 .seg{display:flex;align-items:center;gap:6px}
  .sheet .bar2 .seg .segb{font-family:var(--mono);font-size:11px;color:#aaa;background:none;
    border:1px solid #d6d6d6;border-radius:4px;min-width:24px;padding:3px 7px;cursor:pointer;transition:.15s;line-height:1}
  .sheet .bar2 .seg .segb:hover{color:#111;border-color:#999}
  .sheet .bar2 .seg .segb.on{color:var(--accentFg,#fff);background:var(--accent,#111);border-color:var(--accent,#111)}

  /* information: about + technical + opentype + languages, four columns, larger type */
  .sheet .infocols{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,56px) clamp(28px,3.2vw,52px);
    padding:clamp(8px,1.5vw,22px) var(--pad) clamp(28px,3.5vw,48px)}
  @media(min-width:680px){.sheet .infocols{grid-template-columns:1fr 1fr}}
  @media(min-width:1000px){.sheet .infocols-3{grid-template-columns:2fr 1fr 1fr}}
  /* About alone on the row (the Sketchbook): one column, held to a reading measure */
  .sheet .infocols.infocols-solo{grid-template-columns:1fr}
  .sheet .infocols-solo .infocol-about{max-width:64ch}
  .sheet .infocol h4,.sheet .otf-h{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:#8a8a8a;font-weight:400;margin-bottom:clamp(14px,1.4vw,20px);padding-bottom:12px;border-bottom:1px solid #e4e4e4}
  /* about prose */
  .sheet .about-body{font-family:"Label",Georgia,serif;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:#333;max-width:54ch}
  /* technical — clean key/value rows */
  .sheet .tech{font-family:var(--mono)}
  .sheet .tech-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid #ededed}
  .sheet .tech-row:last-child{border-bottom:none}
  .sheet .tech-row span{font-size:12px;color:#9a9a9a;white-space:nowrap}
  .sheet .tech-row b{font-weight:400;color:#111;font-family:"Label",Georgia,serif;font-size:16px;text-align:right}
  /* languages — closed by default behind a soft fade; a pill toggle reveals the rest */
  .sheet .langflow{font-family:"Label",Georgia,serif;font-size:clamp(15px,1.2vw,17px);line-height:1.8;color:#333;
    position:relative;max-height:6.4em;overflow:hidden;transition:max-height .55s var(--ease)}
  .sheet .langflow.expanded{max-height:200em}
  .sheet .langflow:not(.expanded)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3em;
    background:linear-gradient(rgba(250,250,250,0),#fafafa);pointer-events:none}
  .sheet .lang-toggle{margin-top:16px;border:none;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.04em;
    background:rgba(0,0,0,.05);border-radius:var(--r-pill);padding:9px 16px;color:#333;transition:background .2s var(--ease),color .2s}
  .sheet .lang-toggle:hover{background:#111;color:#fff}
  /* opentype — every feature shown live in a grid: sample set WITH the feature applied, the
     affected glyphs marked in accent. Hovering a cell holds it in the standard (feature-off)
     state, so the white hover card carries the change itself. */
  .sheet .otf-block{padding:clamp(28px,3.5vw,46px) var(--pad) clamp(48px,7vw,90px)}
  .sheet .otf-h small{text-transform:none;letter-spacing:0;color:#bcbcbc;font-size:11px}
  .sheet .otf{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));row-gap:30px}
  /* the divider is drawn, not bordered — a border would follow the card radius and curve away at the ends */
  .sheet .ot-cell{position:relative;padding:6px 18px 12px;min-width:0;
    border-radius:var(--r-card);
    transition:background .25s var(--ease),box-shadow .25s var(--ease)}
  .sheet .ot-cell::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:#ededed;
    transition:opacity .25s var(--ease)}
  /* a cell lifts and shows the feature switched off: on hover where there is a pointer, and on a tap
     (the .off class, toggled by click) where there is not, so a second tap switches it back on */
  @media(hover:hover){
    .sheet .ot-cell:hover{background:#fff;box-shadow:0 12px 34px rgba(0,0,0,.06)}
    .sheet .ot-cell:hover::before,.sheet .ot-cell:hover+.ot-cell::before{opacity:0}
  }
  .sheet .ot-cell.off{background:#fff;box-shadow:0 12px 34px rgba(0,0,0,.06)}
  .sheet .ot-cell.off::before,.sheet .ot-cell.off+.ot-cell::before{opacity:0}
  .sheet .ot-lbl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
    color:#9a9a9a;margin-bottom:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sheet .ot-lbl i{font-style:normal;color:#bcbcbc}
  /* the sample is clipped horizontally only — the line box carries enough leading (and a little
     padding, which overflow honours) that tall diacritics like the dotted I are never shaved */
  .sheet .ot-ex{display:block;font-size:clamp(30px,2.6vw,46px);line-height:1.14;color:#111;
    padding:.03em 0 .11em;white-space:nowrap;overflow:hidden;font-feature-settings:var(--otag) 1}
  @media(hover:hover){ .sheet .ot-cell:hover .ot-ex{font-feature-settings:var(--otag) 0} }
  .sheet .ot-cell.off .ot-ex{font-feature-settings:var(--otag) 0}
  .sheet .ot-ex b{font-weight:400;color:var(--mark,#e83b2c)}

  /* glyph explorer: inspector + blocks */
  .sheet .explorer{display:grid;grid-template-columns:1fr;gap:30px;padding:clamp(28px,3.5vw,48px) var(--pad) clamp(50px,7vw,90px)}
  @media(min-width:900px){.sheet .explorer{grid-template-columns:300px 1fr;align-items:start}}
  .sheet .inspector{position:sticky;top:84px}
  /* the stage sits bare on the page — the metric lines are the drawing; it is a readout, so nothing reacts to the pointer */
  .sheet .inspector .stage{aspect-ratio:1;position:relative;background:none;
    border-radius:var(--r-card);overflow:hidden}
  .sheet .inspector .stage canvas{position:absolute;inset:0;display:block}
  .sheet .inspector .stage .ml{position:absolute;left:0;right:0;height:0;border-top:1px solid rgba(0,0,0,.07);
    font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:#9a9a9a}
  .sheet .inspector .stage .ml span{position:absolute;right:12px;top:-15px}
  .sheet .inspector .stage .ml .lbltxt{left:12px;right:auto}
  /* details read like the Info page's contact card: microcap labels, values in the serif */
  .sheet .inspector .data{margin-top:14px}
  .sheet .inspector .data .r{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:10px 10px;
    font-family:var(--mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#8a8a8a}
  .sheet .inspector .data .r+.r::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:#ededed}
  .sheet .inspector .data .r b{font-family:"Label",Georgia,serif;font-size:15.5px;letter-spacing:0;
    text-transform:none;color:#111;font-weight:400;text-align:right}
  /* the Font style row is a control: the value is set exactly like the other rows, and an
     unseen select lies over it to take the click, so the browser's own box never shifts the text */
  .sheet .inspector .data .r .pick{position:relative;display:inline-block}
  .sheet .inspector .data .r .pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:0;cursor:pointer;
    -webkit-appearance:none;appearance:none;font:inherit}
  .sheet .inspector .data .r .pick b{transition:color .2s}
  .sheet .inspector .data .r .pick:hover b{color:#6f6f6f}
  .sheet .block h4{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
    color:#9a9a9a;font-weight:400;margin:24px 0 10px}
  .sheet .block:first-child h4{margin-top:0}
  /* the full map is long — closed by default behind a fade, opened by the toggle beneath it */
  .sheet .charmap{min-width:0}
  /* below the two-column layout the inspector rides above the grid as a compact bar: shallower stage,
     an opaque ground so the letters never show through it, and the two number rows set aside */
  @media(max-width:899px){
    .sheet .inspector{top:72px;z-index:5;background:#fafafa;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.08);margin-bottom:6px}
    .sheet .inspector .stage{aspect-ratio:2.3/1}
    .sheet .inspector .data .r{padding:7px 10px}
    .sheet .inspector .data .r:nth-child(4),.sheet .inspector .data .r:nth-child(5){display:none}
    .sheet .inspector .stage .ml span{display:none}
  }
  .sheet #blocks{position:relative;max-height:none}
  .sheet #blocks:not(.expanded){max-height:38em;overflow:hidden}
  .sheet #blocks:not(.expanded)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5em;
    background:linear-gradient(rgba(250,250,250,0),#fafafa);pointer-events:none}
  .sheet .charmap .lang-toggle{margin-top:18px}
  .sheet .bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:0;background:none;border:none}
  .sheet .bgrid .g{background:none;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--rule-soft,rgba(0,0,0,.06));margin:-0.5px 0 0 -0.5px;
    font-family:"Label",Georgia,serif;font-size:24px;color:#111;cursor:pointer;transition:.12s}
  .sheet .bgrid .g:hover,.sheet .bgrid .g.sel{background:#111;color:#fafafa;border-radius:6px}

  /* authored column counts live in classes so small screens can overrule them:
     a phone reads every passage as a single column, a mid width caps at two */
  .sheet .spec.cols-2{column-count:2}
  .sheet .spec.cols-3{column-count:3}
  /* only the tester reflows at a mid width; the specimen keeps its columns and scales as one piece */
  @media(min-width:641px) and (max-width:900px){ .sheet .tester .spec.cols-3{column-count:2} }
  /* phones: text too small to scale is reset for reading in one column (the row engine marks it),
     as is the tester; every other specimen row keeps its columns and scales */
  .sheet .wf .spec.reading{column-count:1}
  @media(max-width:640px){ .sheet .tester .spec.cols-2,.sheet .tester .spec.cols-3{column-count:1} }
  .sheet .module{padding:clamp(26px,3.5vw,46px) var(--pad);position:relative}
  .sheet .module::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);height:1.5px;background:var(--rule,#dcdcdc)}
  .sheet .module .one{font-family:"Label",Georgia,serif;color:#111;font-size:clamp(18px,2.2vw,27px);
    line-height:1.4;letter-spacing:-.005em;max-width:62ch}
  .sheet .module .two{font-family:"Label",Georgia,serif;color:#111;font-size:clamp(14px,1.4vw,17px);
    line-height:1.5;column-count:2;column-gap:clamp(24px,4vw,56px)}
  @media(max-width:680px){.sheet .module .two{column-count:1}}
  /* touch devices carry half the frost — visually near-identical at phone scale,
     roughly half the compositing cost (the 2px scrim stays as it is) */
  @media(pointer:coarse){
    .pill,.cart,.cart-full,.cartpill,.closeX,.news,.consent,
    body.over-dark .pill,body.over-dark .cart,body.over-dark .news,body.over-dark .consent,body.over-dark .closeX,body.over-dark .cartpill:not(:hover),
    body.over-dark .cart-full,
    body.info-open .pill,body.trials-open .pill,body.fonts-open .pill,
    body.over-dark.info-open .pill,body.over-dark.trials-open .pill,body.over-dark.fonts-open .pill{
      -webkit-backdrop-filter:blur(10px) saturate(150%) brightness(1.08);
      backdrop-filter:blur(10px) saturate(150%) brightness(1.08);
    }
  }

/* ---- keyboard access: a focus ring wherever the pointer styles took it away, a skip link,
   and the page heading assistive tech reads (the wordmark in the nav is a link, not a heading) ---- */
:focus-visible{outline:2px solid #111 !important;outline-offset:3px}
.cf-frow:focus-visible{outline-offset:0}
/* text fields show focus their own way, the underline or the fill darkening, never a box;
   the ring is for buttons, links, pickers, sliders and checkboxes, which have no other cue */
input:not([type=range]):not([type=checkbox]):focus-visible,select:focus-visible,textarea:focus-visible,
[contenteditable]:focus-visible{outline:none !important}
.cf-coupon-row input:focus{background:rgba(0,0,0,.075)}
.sheet .bar2 select:focus{border-bottom-color:#111}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:18px;z-index:400;background:#111;color:#fff;font-family:var(--mono);font-size:12px;
  letter-spacing:.04em;padding:12px 16px;border-radius:var(--r-pill);text-decoration:none;transition:top .2s var(--ease)}
.skip-link:focus{top:18px}

/* ---------- COMING SOON: a family announced but not yet sold (Global, for now) ----------
   The page opens as a preview — the header keeps its full colour, everything beneath it
   dims and goes inert, and the card sits over the middle with a notify field. Delete the
   flags on the family record and none of this applies (README, "Launching Global"). */
.sheet.soon{overflow:hidden}                                     /* the page does not scroll: the header is the whole preview */
.sheet.soon .s-head{min-height:calc(100svh - 84px)}             /* and it fills the window, so nothing beneath shows */
.sheet.soon .sheet-pad > :not(.s-head){opacity:.28;pointer-events:none}
body.soon-open .consent{opacity:0;pointer-events:none}          /* the cookie widget waits until the preview closes */
.soon-card{position:fixed;left:50%;top:50%;z-index:95;transform:translate(-50%,-50%) translateY(14px);
  width:min(400px,calc(100vw - 36px));padding:22px 24px 20px;box-sizing:border-box;color:#111;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border-radius:var(--r-card);box-shadow:0 18px 50px rgba(0,0,0,.18),0 2px 10px rgba(0,0,0,.08);
  opacity:0;transition:opacity .3s var(--ease),transform .3s var(--ease)}   /* out: with the page, as it starts to slide */
.soon-card[hidden]{display:none}
.soon-card{pointer-events:none}                                  /* faded out, it must not catch clicks meant for the page */
body.soon-open .soon-card{opacity:1;transform:translate(-50%,-50%);pointer-events:auto;
  transition:opacity .5s var(--ease) .6s,transform .5s var(--ease) .6s}             /* in: after the page has arrived */
.soon-card h3{font-family:"Label",Georgia,serif;font-weight:400;font-size:24px;line-height:1.1;margin:0 0 10px}
.soon-card p{font-family:"Label",Georgia,serif;font-size:14.5px;line-height:1.45;color:#333;margin:0 0 16px}
.soon-nl{display:flex;gap:8px;margin-top:2px}
.soon-nl input{flex:1 1 auto;min-width:0;font-family:"Label",Georgia,serif;font-size:16px;color:#111;
  background:rgba(0,0,0,.05);border:none;border-radius:var(--r-pill);outline:none;padding:11px 14px;transition:background .2s}
.soon-nl input:focus{background:rgba(0,0,0,.085)}
.soon-nl input::placeholder{color:#a8a8a8}
.soon-nl button{flex:0 0 auto;border:none;border-radius:var(--r-pill);background:#111;color:#fff;
  font-family:var(--mono);font-size:12px;padding:0 18px;cursor:pointer;transition:background .3s var(--ease)}
.soon-nl button:hover{background:#3a3a3a}
.soon-nl button.done{background:#3a3a3a;cursor:default}
.soon-card p a{color:#111;text-decoration:none;border-bottom:1px solid #111;transition:color .2s,border-color .2s}
.soon-card p a:hover{color:#6f6f6f;border-color:#6f6f6f}
body.soon-open .cartpill{display:none}                           /* the card's own link is the enquiry; no second button */
@media(max-width:640px){
  .soon-card{top:auto;bottom:18px;transform:translate(-50%,0) translateY(14px);padding:18px 18px 16px} /* on the floor, the name stays in view above it */
  body.soon-open .soon-card{transform:translate(-50%,0)}
  .soon-card h3{font-size:21px}
}