/* Fonts: self-hosted from Fontsource 5.3.0 (SIL Open Font License; licenses in /fonts). Latin set only. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/cormorant-garamond-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'),url(/fonts/inter-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Petit Formal Script';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/petit-formal-script-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ==========================================================================
   Empty Cup Development LLC: the atelier design.
   Materials, not flat colour: navy worsted cloth, cotton paper with deckled
   edges, bottle-green suede, aubergine flannel with a chalk stripe, pebble
   leather, gold foil and blind embossing. Window light falls across the page.
   Every texture is generated in tools/art/ and served from this site.
   One deliberate dark look; reading bands are paper, so text stays black on cream.
   ========================================================================== */
:root{
  --motion:1; /* 0 when the visitor asks for reduced motion: every transition then takes no time */
  --ink-0:#070D17; --navy:#0E1A2B; --navy-2:#13233A; --navy-3:#1A2E4A;
  --bottle:#1F4A3D; --bottle-2:#2A5E4E; --aubergine:#3A2240; --aubergine-2:#4A2C52;
  --gold:#C9A54C; --gold-hi:#F2DE9C; --gold-soft:#E7CF8E; --gold-deep:#523A0B;
  --ivory:#F3EEE3; --linen:#E6E0D2; --mist:#BDB7A8;
  --paper:#F4EFE4; --paper-2:#ECE5D6; --on-paper:#13233A; --on-paper-muted:#3B4556; --on-paper-fine:#3E3B33;
  --display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script:'Petit Formal Script', 'Snell Roundhand', cursive;
  --mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --sheen:50%;
  --gutter:max(20px, env(safe-area-inset-left, 0px));
  color-scheme:dark;
}
@view-transition{navigation:auto}

/* --- Base ---------------------------------------------------------------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;color:var(--ivory);font-family:var(--body);font-size:16px;line-height:1.6;font-optical-sizing:auto;
  background:url(/textures/twill.webp) 0 0/256px,radial-gradient(140% 90% at 50% 0%,#12213A 0%,var(--navy) 55%,#0A1424 100%) fixed;
  background-color:var(--navy);background-blend-mode:soft-light,normal;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.site{position:relative;width:100%;overflow-x:clip}
a{color:var(--gold-soft);text-underline-offset:.2em;text-decoration-thickness:1px;transition:color calc(300ms*var(--motion)) var(--ease)}
a:hover{color:var(--ivory)}
a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
::selection{background:rgba(201,165,76,.35);color:inherit}
img{max-width:100%}
[hidden]{display:none}
.skip{position:absolute;left:16px;top:-100px;z-index:100;background:var(--ivory);color:var(--navy);padding:10px 16px;border-radius:8px}
.skip:focus{top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main:focus{outline:none}
.inner{position:relative;max-width:1240px;margin:0 auto;padding-left:var(--gutter);padding-right:max(20px, env(safe-area-inset-right, 0px));box-sizing:border-box}

/* --- Window light: panes and the shadows of branches, over the whole page --- */
.daylight{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.daylight::before,.daylight::after{content:"";position:absolute;inset:-8% -6%}
.daylight::before{background:url(/textures/window-light.webp) 0 0/cover no-repeat;mix-blend-mode:soft-light;opacity:.20}
.daylight::after{background:url(/textures/leaf-shadow.webp) 0 0/cover no-repeat;mix-blend-mode:multiply;opacity:.16;transform-origin:0 0;animation:sway 19s ease-in-out infinite alternate}
@keyframes sway{0%{transform:translate(0,0) rotate(0)}35%{transform:translate(.6%,.3%) rotate(.35deg)}70%{transform:translate(-.3%,.5%) rotate(-.2deg)}100%{transform:translate(.4%,-.2%) rotate(.25deg)}}
@media (max-width:700px){.daylight::before{opacity:.14}.daylight::after{opacity:.12}}

/* --- Type ------------------------------------------------------------------ */
h1,h2,h3{font-family:var(--display);font-weight:500;text-wrap:balance;margin:0}
p{text-wrap:pretty}
.eyebrow{margin:0;font-size:12px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.lead{margin:0;font-size:1.2rem;line-height:1.7;color:var(--linen);max-width:42rem}
.muted{color:var(--mist);margin:0;line-height:1.7}
.fine{font-size:12.5px;color:var(--mist);line-height:1.6}
.script{margin:0;font-family:var(--script);font-size:28px;line-height:1.2;color:var(--gold-soft)}
#hf-guide-h .guide-2{display:block;white-space:nowrap;font-size:min(.78em,6.2vw)}
.tlink{color:var(--gold-soft)}
/* Gold foil: brushed metal with a sheen that follows the light (the page sets --sheen) */
.foil{color:var(--gold-soft);background:url(/textures/foil.webp) 0 0/180px,linear-gradient(100deg,#8C6B22 0%,#C9A54C 18%,#E9D18C calc(var(--sheen) - 14%),#FFF6D2 var(--sheen),#E2C677 calc(var(--sheen) + 10%),#A9852F 82%,#D2B25E 100%);
  background-blend-mode:overlay,normal;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.35))}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.foil{-webkit-text-fill-color:currentColor;background:none}}
/* Large foil headings (h2): a paler foil with no dark stops or texture, so every point of the letters stays at
   3.5:1 or more against the cloth as drawn (Engineering + QA ruling, Oct 27, 2026). The hero words keep the full foil. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h2.foil,h2 .foil{background:linear-gradient(100deg,#F3DEA4 0%,#F6E4AF 18%,#FAECC2 calc(var(--sheen) - 14%),#FFF9E0 var(--sheen),#F8E8B8 calc(var(--sheen) + 10%),#F4DFA6 82%,#F7E6B2 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 0 2px rgba(0,0,0,.35))}
}
/* Letterpress: words pressed into paper */
.press{color:var(--on-paper);text-shadow:0 1px 0 rgba(255,255,255,.65),0 -1px 0 rgba(19,35,58,.06)}
/* Debossed into cloth or leather */
.deboss{text-shadow:0 -1px 0 rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.08)}

/* --- Buttons: a foil-stamped plate and a stitched outline ------------------ */
.btn,.hf-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 30px;border-radius:12px;border:0;box-sizing:border-box;
  font:600 15px/1 var(--body);letter-spacing:.06em;color:#14130F;text-decoration:none;cursor:pointer;
  background:url(/textures/foil.webp) 0 0/160px,linear-gradient(180deg,#F0D98F 0%,#D4B25C 46%,#B8933B 54%,#C9A54C 100%);background-blend-mode:overlay,normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(84,60,10,.45),0 1px 0 rgba(0,0,0,.35),0 12px 24px -12px rgba(201,165,76,.65),0 3px 6px rgba(0,0,0,.35);
  transition:transform calc(320ms*var(--motion)) var(--ease),box-shadow calc(320ms*var(--motion)) var(--ease),filter calc(320ms*var(--motion)) var(--ease)}
.btn::after,.hf-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 62%) calc(var(--sheen) * 2 - 50%) 0/220% 100% no-repeat;mix-blend-mode:soft-light;pointer-events:none}
.btn:hover,.hf-btn:hover{color:#14130F;transform:translateY(-1px);filter:brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(84,60,10,.45),0 1px 0 rgba(0,0,0,.35),0 18px 30px -12px rgba(201,165,76,.75),0 4px 8px rgba(0,0,0,.35)}
.btn:active,.hf-btn:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(84,60,10,.5),0 1px 0 rgba(0,0,0,.35)}
.btn-ghost,.hf-ghost{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:12px;box-sizing:border-box;
  font:500 15px/1 var(--body);letter-spacing:.05em;color:var(--ivory);text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,rgba(26,46,74,.75),rgba(14,26,43,.75));
  border:1px solid rgba(231,207,142,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 22px -14px rgba(0,0,0,.85);transition:border-color calc(300ms*var(--motion)) var(--ease),background-color calc(300ms*var(--motion)) var(--ease)}
.btn-ghost::before,.hf-ghost::before{content:"";position:absolute;inset:4px;border-radius:9px;border:1px dashed rgba(231,207,142,.32);pointer-events:none}
.btn-ghost:hover,.hf-ghost:hover{color:var(--ivory);border-color:var(--gold);background-color:rgba(201,165,76,.10)}
button.hf-ghost,button.btn-ghost{font-family:var(--body)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* The email address on the contact buttons stays on one line */
.email-btn{white-space:nowrap;letter-spacing:.02em}
@media (max-width:400px){.email-btn{font-size:14px;padding-left:16px;padding-right:16px}}

/* --- Masthead -------------------------------------------------------------- */
.masthead{position:relative;z-index:45;view-transition-name:masthead;
  background:url(/textures/herringbone.webp) 0 0/220px,linear-gradient(180deg,#0F1D31,#0B1626);background-blend-mode:soft-light,normal;
  box-shadow:0 1px 0 rgba(201,165,76,.22),0 14px 28px -18px rgba(0,0,0,.9)}
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(242,222,156,.6) calc(var(--sheen) - 20%),rgba(201,165,76,.35) var(--sheen),transparent)}
.strip{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.18));color:var(--mist);font-size:12.5px;letter-spacing:.1em;border-bottom:1px solid rgba(201,165,76,.12)}
.strip .inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-block:8px}
.strip .inner > span:first-child{white-space:nowrap}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ivory)}
.brand:hover{color:var(--ivory)}
.brand svg{flex:0 0 auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.brand-name{font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:.01em;line-height:1.05}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;font-size:15px}
.navlink{position:relative;color:var(--ivory);text-decoration:none;padding:8px 0}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:linear-gradient(90deg,var(--gold),var(--gold-hi),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform calc(420ms*var(--motion)) var(--ease)}
.navlink:hover{color:var(--gold-soft)}
.navlink:hover::after,.navlink[aria-current="page"]::after{transform:scaleX(1)}
.navlink[aria-current="page"]{color:var(--gold-soft)}
.menu-btn{display:none}
@media (max-width:640px){
  .strip-extra{display:none}
  .strip{font-size:clamp(10px,3.1vw,12.5px);letter-spacing:.05em}
  .js .menu-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:12px;border:1px solid rgba(201,165,76,.8);background:transparent;color:var(--gold-soft);font:inherit;font-size:15px;cursor:pointer}
  .links{width:100%}
  .js .links{display:none}
  .js .nav[data-open] .links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-bottom:8px}
  .links a{min-height:44px;display:inline-flex;align-items:center}
}
@media (max-width:480px){.brand-name{font-size:21px}.brand-name span{display:block}}

/* --- Bands: each a material -------------------------------------------------- */
/* Text on the green suede (its bands and "More planned") is the brightest ivory and gold, and the suede is given a
   little inner shade: the window light makes it lighter than its base colours, and this keeps its text at WCAG AA
   contrast as the page is actually drawn (measured Oct 27, 2026). */
.band{position:relative;isolation:isolate;
  background:url(/textures/twill.webp) 0 0/256px,linear-gradient(180deg,#15273F 0%,var(--navy-2) 50%,#102035 100%);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 30px 40px -30px rgba(3,8,16,.75)}
.band > .inner{padding-block:clamp(56px,8vw,96px)}
.band h2{font-size:clamp(2.1rem,4vw,3.1rem);line-height:1.06}
.band h3{font-size:1.6rem;line-height:1.15}
.band p{line-height:1.75}
/* Bottle-green suede */
.band.bottle{background:url(/textures/suede.webp) 0 0/240px,radial-gradient(110% 140% at 50% 40%,#2A5E4E 0%,var(--bottle) 55%,#163A30 100%);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 30px 40px -30px rgba(3,8,16,.75),inset 0 0 0 100vmax rgba(8,22,18,.22)}
/* Aubergine flannel with a chalk stripe */
.band.violet{background:url(/textures/chalkstripe.png) 0 0/200px,url(/textures/twill.webp) 0 0/256px,radial-gradient(100% 130% at 80% 20%,var(--aubergine-2) 0%,var(--aubergine) 55%,#2A1830 100%);background-blend-mode:normal,soft-light,normal}
.band.violet .eyebrow{color:var(--gold-soft)}
@media (max-width:640px){.band.violet .col > .btn{align-self:center}}
/* Deep water teal, brushed */
.band.teal{background:url(/textures/suede.webp) 0 0/240px,radial-gradient(110% 140% at 85% 30%,#24697A 0%,#1F5C6B 45%,#173F4C 100%);background-blend-mode:soft-light,normal}
/* Cotton paper with deckled edges, lying over the cloth: the sheet and its shadow are two masked layers */
.band.paper,.band.laid{background:none;box-shadow:none;color:var(--on-paper);margin-block:-22px;z-index:2}
.band.paper > .inner,.band.laid > .inner{padding-block:clamp(78px,9vw,118px)}
.band.paper::before,.band.laid::before,.band.paper::after,.band.laid::after{content:"";position:absolute;inset:0;pointer-events:none}
.band.paper::before,.band.laid::before{z-index:-2;inset:-6px 0 -18px;background:rgba(2,6,12,.62);
  -webkit-mask:url(/textures/deckle-top-shadow.png) 0 0/1024px 72px repeat-x,linear-gradient(#000 0 0) 0 70px/100% calc(100% - 140px) no-repeat,url(/textures/deckle-bottom-shadow.png) 0 100%/1024px 72px repeat-x;
          mask:url(/textures/deckle-top-shadow.png) 0 0/1024px 72px repeat-x,linear-gradient(#000 0 0) 0 70px/100% calc(100% - 140px) no-repeat,url(/textures/deckle-bottom-shadow.png) 0 100%/1024px 72px repeat-x}
.band.paper::after,.band.laid::after{z-index:-1;
  background:url(/textures/paper-grain.webp) 0 0/400px,radial-gradient(120% 120% at 28% 22%,#FBF8F0 0%,var(--paper) 48%,var(--paper-2) 100%);background-blend-mode:soft-light,normal;
  -webkit-mask:url(/textures/deckle-top.png) 0 0/1024px 48px repeat-x,linear-gradient(#000 0 0) 0 46px/100% calc(100% - 92px) no-repeat,url(/textures/deckle-bottom.png) 0 100%/1024px 48px repeat-x;
          mask:url(/textures/deckle-top.png) 0 0/1024px 48px repeat-x,linear-gradient(#000 0 0) 0 46px/100% calc(100% - 92px) no-repeat,url(/textures/deckle-bottom.png) 0 100%/1024px 48px repeat-x}
/* Laid paper: for the home page's "How we build", and for the documents (Privacy, Terms, Accessibility) */
.band.laid::after,[data-page="privacy"] .band.paper::after,[data-page="terms"] .band.paper::after,[data-page="accessibility"] .band.paper::after{background:url(/textures/laid-paper.webp) 0 0/360px,url(/textures/paper-grain.webp) 0 0/400px,radial-gradient(120% 120% at 28% 22%,#FBF8F0 0%,var(--paper) 48%,var(--paper-2) 100%);background-blend-mode:soft-light,soft-light,normal}
.band.paper p,.band.laid p,.band.paper li,.band.laid li{color:var(--on-paper-muted)}
.band.paper h2,.band.laid h2,.band.paper h3,.band.laid h3,.band.paper strong,.band.laid strong{color:var(--on-paper)}
.band.paper .eyebrow,.band.laid .eyebrow{color:var(--gold-deep)}
.band.paper .fine,.band.laid .fine{color:var(--on-paper-fine)}
.band.paper a,.band.laid a{color:var(--gold-deep)}
.band.paper a:hover,.band.laid a:hover{color:var(--on-paper)}
.band.paper :focus-visible,.band.laid :focus-visible{outline-color:var(--gold-deep)}
.band.paper .tlink.dark{color:var(--gold-deep)}
/* Leather and suede pieces lying on paper keep their own light lettering */
.band.paper .card h2,.band.paper .card h3,.band.paper .more p{color:var(--ivory)}
.band.paper .more h2,.band.paper .more h3{color:var(--gold-hi)}
.band.paper .card p{color:var(--linen)}
.band.paper .card a{color:var(--gold-soft)}
.band.paper .card a:hover{color:var(--ivory)}
.band.paper .card :focus-visible{outline-color:var(--gold)}
/* A bound edge between dark bands: a hairline of gold thread */
.band + .band:not(.paper):not(.laid)::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,165,76,.35),transparent)}

/* Engravings: line art printed through a mask, in foil, ink or blind */
.engraving{position:absolute;pointer-events:none;z-index:-1;-webkit-mask:var(--art) center/contain no-repeat;mask:var(--art) center/contain no-repeat}
.engraving.in-foil{background:url(/textures/foil.webp) 0 0/200px,linear-gradient(120deg,#8C6B22,#E9D18C 45%,#FFF2C4 var(--sheen),#C9A54C 70%,#8C6B22);background-blend-mode:overlay,normal}

/* --- Page heading for inner pages ------------------------------------------ */
.ph{position:relative;isolation:isolate;overflow:hidden;
  background:url(/textures/twill.webp) 0 0/256px,radial-gradient(120% 120% at 85% 20%,#1A3A4C 0%,var(--navy) 60%);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 30px 40px -30px rgba(3,8,16,.75)}
.ph::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 70% at 10% 0%,rgba(201,165,76,.14),transparent 70%)}
.ph::after{content:"";position:absolute;z-index:-1;right:max(-80px,calc((100vw - 1240px) / 2 - 120px));top:50%;width:min(52vw,560px);aspect-ratio:1;transform:translateY(-50%);opacity:.20;
  background:url(/textures/foil.webp) 0 0/200px,linear-gradient(120deg,#8C6B22,#E9D18C 45%,#FFF2C4 var(--sheen),#C9A54C 70%,#8C6B22);background-blend-mode:overlay,normal;
  -webkit-mask:var(--ph-art,url(/art/rosette.webp)) center/contain no-repeat;mask:var(--ph-art,url(/art/rosette.webp)) center/contain no-repeat}
[data-page="contact"] .ph{--ph-art:url(/art/envelope.webp)}
[data-page="contact"] .ph::after{opacity:.24;width:min(56vw,620px);aspect-ratio:1100/756}
[data-page="mission"] .ph{--ph-art:url(/art/fern.webp)}
[data-page="mission"] .ph::after{opacity:.24;aspect-ratio:760/1036;width:min(34vw,360px)}
[data-page="404"] .ph{--ph-art:url(/art/empty-glass.webp)}
[data-page="404"] .ph::after{opacity:.30;aspect-ratio:640/853;width:min(30vw,340px);
  /* centred between the end of the words and the right edge */
  right:max(16px,calc((100vw - max(20px,(100vw - 1240px) / 2) - 650px) / 2 - min(15vw,170px)))}
@media (max-width:760px){.ph::after{opacity:.10;right:-30%}[data-page="contact"] .ph::after,[data-page="mission"] .ph::after,[data-page="404"] .ph::after{opacity:.12}}
.ph .inner{padding-block:clamp(56px,8vw,88px) clamp(52px,7vw,80px);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.ph.tall .inner{padding-block:120px 150px}
.ph h1{font-size:clamp(2.4rem,5.4vw,4.3rem);line-height:1.04;max-width:20ch;color:var(--ivory);text-shadow:0 2px 18px rgba(0,0,0,.45)}
.ph h1::after{content:"";display:block;width:140px;height:1px;margin-top:24px;background:linear-gradient(90deg,var(--gold),rgba(201,165,76,0))}
.ph .eyebrow{color:var(--gold-soft)}
.rule{display:block;width:140px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(201,165,76,0))}

/* --- Layout helpers -------------------------------------------------------- */
.split{display:flex;flex-wrap:wrap;gap:40px 64px;align-items:flex-start}
.col{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.col p{margin:0}
.headrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;margin-bottom:32px}
.headrow p{max-width:32rem}
.headrow.centred{justify-content:center;text-align:center}
.headrow.centred h2{flex:1 1 100%;text-align:center}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:24px}
/* Lines that each start on a line of their own */
.ph .lead .line,.cta p .line,.copy .line{display:block}
@media (max-width:640px){
  .headrow{justify-content:center;text-align:center}
  .headrow h2{flex:1 1 100%;text-align:center}
  .col > .eyebrow,.col > h2{align-self:stretch;text-align:center}
}

/* --- Cards: navy leather, stitched ------------------------------------------ */
.card{position:relative;border-radius:18px;color:var(--ivory);
  background:url(/textures/leather.webp) 0 0/220px,linear-gradient(160deg,#1C3150 0%,var(--navy-2) 55%,#0F1D31 100%);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.4),0 30px 50px -30px rgba(0,0,0,.9),0 3px 8px rgba(0,0,0,.3)}
.card::before{content:"";position:absolute;inset:9px;border-radius:11px;border:1.5px dashed rgba(231,207,142,.36);pointer-events:none;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6))}
.card.pad{padding:30px 30px;display:flex;flex-direction:column;gap:10px}
.card.pad p{margin:0;color:var(--linen)}
.card.pad > .script,.card.pad > .script + h3,.card.pad > .script ~ p{text-align:center}
.card h3{color:var(--ivory)}
.col .card{align-self:stretch}
/* On paper: a heavier card stock, letterpressed */
.card-light{position:relative;border-radius:16px;
  background:url(/textures/paper-grain.webp) 0 0/380px,linear-gradient(180deg,#FFFDF7,#F7F2E6);background-blend-mode:soft-light,normal;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(19,35,58,.08),0 24px 40px -28px rgba(19,35,58,.5),0 2px 6px rgba(19,35,58,.10)}

/* Woven label, sewn on at both ends */
.label{position:relative;display:inline-flex;align-items:center;align-self:flex-start;padding:6px 18px;border-radius:3px;
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);
  background:url(/textures/weave.png) 0 0/48px,linear-gradient(180deg,#1F3555,#14243C);background-blend-mode:overlay,normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.45)}
.label::before,.label::after{content:"";position:absolute;top:3px;bottom:3px;width:0;border-left:1px dashed rgba(231,207,142,.55)}
.label::before{left:6px}.label::after{right:6px}
.label .line{display:block;white-space:nowrap}

/* Card-stock tags with an eyelet, for the three promises */
.tags{display:flex;flex-wrap:wrap;gap:16px 18px;margin:12px 0 0;padding:0;list-style:none}
.tag{position:relative;box-sizing:border-box;flex:1 1 170px;min-width:0;max-width:200px;padding:14px 18px 14px 40px;border-radius:6px 14px 14px 6px;color:var(--on-paper);
  background:url(/textures/paper-grain.webp) 0 0/300px,linear-gradient(180deg,#FBF7EC,#EFE7D5);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 0 rgba(0,0,0,.25),0 16px 22px -14px rgba(0,0,0,.85),0 3px 6px rgba(0,0,0,.35);
  transition:transform calc(600ms*var(--motion)) var(--ease)}
.tag:hover{transform:translateY(-2px)}
.tag::before{content:"";position:absolute;left:14px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;
  background:radial-gradient(circle,#0B1626 0 3px,transparent 3.5px),radial-gradient(circle at 40% 35%,#F2DE9C,#B08C35 55%,#6E5418);
  box-shadow:0 1px 1px rgba(0,0,0,.4)}
.tag b{display:block;font-family:var(--display);font-weight:600;font-size:27px;line-height:1.05;color:var(--on-paper)}
.tag span{display:block;margin-top:2px;font-size:13px;color:var(--on-paper-muted)}

/* --- A phone, as an object: titanium frame, glass, its shadow on the cloth --- */
.device{position:relative;flex:0 0 auto;width:196px;margin:0 auto;filter:drop-shadow(0 34px 30px rgba(0,0,0,.55)) drop-shadow(0 6px 8px rgba(0,0,0,.4))}
.phone{position:relative;box-sizing:border-box;width:196px;height:410px;padding:8px;border-radius:42px;
  background:conic-gradient(from 210deg at 50% 50%,#8A8F98,#3B3F46 12%,#C9CDD3 24%,#4C5058 38%,#1E2126 52%,#9AA0A8 66%,#2B2E34 80%,#8A8F98);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 0 0 2px rgba(0,0,0,.6),inset 0 0 0 3.5px #0A0B0D,0 0 0 .5px rgba(0,0,0,.6)}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:34px;background:#000}
/* With a status bar: the app starts below the camera, as on a real phone, and its whole screen shows */
.phone.bar{height:438px}
.phone.bar img{box-sizing:border-box;border-top:30px solid var(--bar);object-fit:contain;object-position:bottom;background:var(--bar)}
.phone::before{content:"";position:absolute;top:17px;left:50%;width:60px;height:17px;margin-left:-30px;border-radius:10px;background:#050608;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.phone::after{content:"";position:absolute;inset:8px;border-radius:34px;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 26%,transparent 27%,transparent 70%,rgba(255,255,255,.04) 100%)}
.device::before,.device::after{content:"";position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#3B3F46,#9AA0A8,#3B3F46)}
.device::before{left:-2px;top:96px;height:54px;box-shadow:0 66px 0 #6E737B}
.device::after{right:-2px;top:120px;height:76px}

/* --- Products: an app's card ------------------------------------------------- */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:28px}
.products.one{grid-template-columns:minmax(0,640px);justify-content:center}
.product{display:flex;flex-wrap:wrap;gap:28px;align-items:center;padding:36px}
/* Its words: the label stays at the top left (centred on phones); the rest sits centred in the space below it */
.product .copy{flex:1 1 230px;align-self:stretch;min-width:0;display:flex;flex-direction:column;gap:12px;padding-top:6px;text-align:center;container-type:inline-size}
.product .copy > .label{align-self:flex-start}
.product .copy > .label + *{margin-top:auto}
.product .copy > :last-child{margin-bottom:auto;align-self:center}
.product .label{flex-direction:column;align-items:center;gap:3px;text-align:center}
/* Fits one-word app names such as MeetingPlace.app on one line in any card width */
.product h2,.product h3{font-size:2.8rem;font-size:min(2.8rem,14cqi);line-height:1}
.product .desc{line-height:1.7;color:var(--linen)}
/* "Find out more about" stretches over the whole card, which links to our page for the app. A second, smaller link
   visits the app; it sits above the stretched link so both can be tapped. */
.stretch{color:var(--gold-soft);letter-spacing:.03em}
.stretch::after{content:"";position:absolute;inset:0;border-radius:18px}
.stretch:focus-visible{outline:none}.stretch:focus-visible::after{outline:2px solid var(--gold);outline-offset:3px}
.product .copy > .stretch{align-self:center}
.product .copy > .visit{position:relative;z-index:1;align-self:center;font-size:14px;color:var(--mist);letter-spacing:.02em}
.product .copy > .visit:hover{color:var(--ivory)}
.product:hover .device{transform:translateY(-4px) rotate(-.6deg)}
.product .device{transition:transform calc(700ms*var(--motion)) var(--ease)}
@media (max-width:640px){
  .product .copy > .label{align-self:center}
  .product .label{font-size:10.5px;letter-spacing:.16em;padding:6px 14px}
}
@media (max-width:360px){.product .label{letter-spacing:.1em;padding:6px 12px}}
/* "More planned": a piece of green suede, its words centred */
.more{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 28px;padding:30px 34px;border-radius:18px;overflow:hidden;isolation:isolate;text-align:center;
  background:url(/textures/suede.webp) 0 0/240px,radial-gradient(120% 160% at 10% 50%,#285A4B 0%,var(--bottle) 55%,#193D33 100%);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 100vmax rgba(8,22,18,.22),0 24px 44px -28px rgba(0,0,0,.85)}
.more::before{content:"";position:absolute;inset:9px;border-radius:11px;border:1.5px dashed rgba(231,207,142,.3);pointer-events:none}
.more h2,.more h3{font-family:var(--script);font-weight:400;font-size:24px;color:var(--gold-hi)}
.more p{flex:0 1 auto;min-width:0;margin:0;font-family:var(--display);font-size:1.15rem;line-height:1.35;color:var(--ivory)}
@media (min-width:900px){.more{flex-wrap:nowrap}.more p{white-space:nowrap;font-size:clamp(.9rem,1.5vw,1.15rem)}}
@media (max-width:640px){.more h2,.more h3,.more p{flex:1 1 100%}}

/* --- Home ------------------------------------------------------------------ */
.hero{position:relative;z-index:41;overflow:hidden;isolation:isolate;background:#0B1524;min-height:min(92vh,880px);display:flex;align-items:center}
.hero-stage{position:absolute;inset:0;z-index:-2}
.hero-stage picture{position:absolute;inset:0;display:block}
.hero-stage img,.hero-stage canvas{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;display:block}
.hero-stage canvas{opacity:0;transition:opacity calc(1400ms*var(--motion)) var(--ease)}
.hero-stage.live canvas{opacity:1}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(9,17,30,.88) 0%,rgba(9,17,30,.72) 34%,rgba(9,17,30,.20) 58%,rgba(9,17,30,0) 72%),linear-gradient(0deg,rgba(9,17,30,.55),transparent 22%)}
.hero-copy{width:100%;padding-block:96px 88px}
.hero-copy > div{max-width:640px;display:flex;flex-direction:column;gap:24px}
.hero h1{font-size:clamp(2.6rem,6vw,4.9rem);line-height:1.02;color:var(--ivory);text-shadow:0 2px 22px rgba(0,0,0,.55)}
.hero h1 .script-word{font-family:var(--script);font-weight:400;font-size:.82em}
.notes{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity calc(1200ms*var(--motion)) var(--ease) calc(600ms*var(--motion))}
.hero-stage.live ~ .notes,.hero-stage.still ~ .notes{opacity:1}
/* The photo and its notes wait while the 3D scene loads, so the scene appears once, finished, with its notes, instead
   of the photo (lit differently) first and then the scene over it. The home script calls the photo at once (.photo)
   where the scene won't run, fails or is slow (3 s); if the script never runs, the photo comes in after 3 s anyway. The
   notes come in with whichever shows first, in the same fade. When the scene is up, the photo stays as it was (paused):
   unseen under the scene, or already shown if the scene came late. Reduced motion: the photo at once (below). */
@keyframes hero-in{from{opacity:0}to{opacity:1}}
.js .hero-stage picture{animation:hero-in calc(900ms*var(--motion)) var(--ease) 3s both}
.js .hero-stage.photo picture{animation-delay:0s}
.js .hero-stage.live picture{animation-play-state:paused}
.js .hero-stage:not(.photo):not(.live) ~ .notes{opacity:0}
.notes span{position:absolute;left:0;top:0;font-family:var(--display);font-style:italic;font-size:21px;color:var(--ivory);white-space:nowrap;
  text-shadow:0 1px 10px rgba(0,0,0,.7);transform:translate(var(--x,-999px),var(--y,-999px)) translate(-50%,-50%)}
@media (max-width:900px){.notes{display:none}}
/* Tall and narrow screens: the words first, then the scene below them */
@media (max-aspect-ratio:1/1),(max-width:760px){
  .hero{flex-direction:column;align-items:stretch;min-height:0}
  .hero-copy{order:-1;position:relative;z-index:1;padding-block:48px 0}
  .hero-stage{position:relative;z-index:0;inset:auto;height:min(104vw,580px);margin-top:-72px}
  .hero-stage::before{content:"";position:absolute;inset:0 0 auto;height:22%;z-index:1;background:linear-gradient(#0B1524,rgba(11,21,36,0))}
  .hero::before{background:none}
  .tags{gap:12px}
}
@media (max-width:640px){.hero .tags{justify-content:center}}

/* Mission and vision: suede band with engraved ripples; each sentence sits centred as a block under its heading */
.mv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:48px 96px;align-items:start}
.mv > div{justify-self:center;width:fit-content;max-width:100%}
.mv h2{font-family:var(--script);font-weight:400;font-size:28px;line-height:1.3;text-align:center}
.mv p{max-width:9.6em;margin:10px auto 0;font-family:var(--display);font-weight:500;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.15;color:var(--ivory);text-shadow:0 2px 16px rgba(0,0,0,.35)}
.mv-art{left:50%;top:50%;width:min(1600px,140%);aspect-ratio:1600/604;transform:translate(-50%,-50%);opacity:.15}

/* Guide promotion: the three pieces as embossed plates */
.plates{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;flex:0 1 440px;min-width:0}
.plate{display:flex;align-items:center;gap:18px;padding:20px 24px}
.plate > span{flex:1 1 auto;min-width:0}
.plate strong{display:block;text-align:center;font-weight:600}

/* How we build: a numbered list set in a letterpress column */
.steplist{flex:1 1 440px;min-width:0;margin:0;padding:10px 30px;list-style:none}
.steplist li{display:flex;gap:20px;align-items:baseline;padding:17px 0;border-bottom:1px solid rgba(19,35,58,.12);color:var(--on-paper-muted);line-height:1.6}
.steplist li:last-child{border-bottom:0}
.steplist li > span:not(.rn){flex:1 1 auto}   /* the words of each step take the rest of the line */
.steplist strong{color:var(--on-paper);font-weight:600;font-size:1.05rem}
.steplist .step{font-size:1.1rem;color:var(--on-paper)}
.band.laid .steplist li{justify-content:center;text-align:center}
.rn{flex:0 0 36px;font-family:var(--display);font-size:28px;line-height:1;color:var(--gold-deep)}

/* Values: eight short rules, each on a hairline with a foil numeral */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 44px;counter-reset:v;margin:0}
.values > div,.values > p{position:relative;margin:0;padding:20px 0;border-top:1px solid rgba(201,165,76,.30);counter-increment:v}
.values h3,.values .v-name{display:block;text-align:center;font-family:var(--display);font-size:1.55rem;line-height:1.2;color:var(--gold-soft)}
.values p,.values .v-text{margin:6px 0 0;display:block;text-align:center;color:var(--linen);line-height:1.6}
.fern-art{right:-4%;bottom:-6%;width:min(40vw,440px);aspect-ratio:760/1036;opacity:.14}

/* Contact call: envelope engraving behind */
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.cta > div:first-child{min-width:0}
.cta .btnrow{justify-content:center}
.cta h2{font-size:clamp(2.1rem,3.8vw,2.8rem);line-height:1.1}
.cta p{margin:12px 0 0;color:var(--ivory);font-size:1.1rem}
.env-art{right:2%;top:50%;width:min(46vw,560px);aspect-ratio:1100/756;transform:translateY(-50%) rotate(3deg);opacity:.13}

/* --- About: the company's particulars, as a certificate with the seal pressed into its corner --- */
.facts-wrap{position:relative;flex:0 1 580px;min-width:0;display:flex}
.split > .facts-wrap{margin-inline:auto}
.facts-wrap .facts{flex:1 1 auto}
.facts-wrap .seal{position:absolute;right:-26px;bottom:-34px;width:132px;height:132px;pointer-events:none}
.facts{position:relative;flex:0 1 460px;min-width:0;margin:0;padding:18px 32px 26px;overflow:hidden}
/* Short lines: each particular beside its name, the products one above the other */
.facts div{display:grid;grid-template-columns:8.5rem 1fr;gap:12px;padding:15px 0;border-bottom:1px solid rgba(201,165,76,.2)}
.facts div:last-child{border-bottom:0}
.facts dt{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);padding-top:3px}
.facts dd{margin:0;color:var(--linen)}
.facts dd .line{display:block}
.facts dd a{display:block;width:fit-content}
.facts dd.one,.facts dd .mail{white-space:nowrap;font-size:clamp(12px,3.6vw,16px)}
/* Contact: the email as before, then the phone, then the address on three lines */
.facts dd.contact a + a,.facts dd.contact address{margin-top:10px}
.facts address{font-style:normal}
.facts a{color:var(--gold-soft)}
@media (max-width:640px){.facts dd a{margin-inline:auto}}
@media (max-width:560px){.facts div{grid-template-columns:1fr;gap:4px}}

/* --- Seal: blind-embossed with the rosette and the company's name ------------ */
.seal{display:block;width:150px;height:150px;color:#0E1A2B}
.seal text{font-family:var(--display);font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;fill:currentColor}

/* --- Legal and statement pages: a document on laid paper --------------------- */
.prose{max-width:min(100%,64rem)}
.prose h2{font-size:1.95rem;margin-top:2.4rem;color:var(--on-paper)}
.prose h2 + p{margin-top:.7rem}
.prose ul{padding-left:1.2rem;line-height:1.75}
.prose li{margin:.3rem 0}
.prose li::marker{color:var(--gold-deep)}
.prose > p:first-of-type:not(.ver)::first-letter{float:left;font-family:var(--display);font-weight:600;font-size:3.6em;line-height:.82;padding:.06em .1em 0 0;color:var(--gold-deep)}
.ver{font-size:14px;padding:10px 16px;border-left:2px solid var(--gold-deep);background:rgba(122,90,22,.06);border-radius:0 8px 8px 0}
.prose .ver + p::first-letter{float:left;font-family:var(--display);font-weight:600;font-size:3.6em;line-height:.82;padding:.06em .1em 0 0;color:var(--gold-deep)}

/* --- Reading progress: a foil thread along the top of long pages ------------- */
.progress{position:fixed;left:0;top:0;z-index:60;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--read,0));pointer-events:none;
  background:linear-gradient(90deg,#8C6B22,#E9D18C 60%,#FFF2C4);box-shadow:0 0 8px rgba(201,165,76,.5)}

/* --- Footer: pebble leather with a stitched edge and the blind seal ----------- */
.colophon{position:relative;isolation:isolate;color:var(--linen);
  background:url(/textures/leather.webp) 0 0/240px,linear-gradient(180deg,#0D192B,#08111D);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 30px 40px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(201,165,76,.25)}
.colophon::before{content:"";position:absolute;left:0;right:0;top:10px;border-top:1.5px dashed rgba(231,207,142,.30)}
.colophon .inner{padding-block:56px 30px;display:flex;flex-direction:column;gap:32px}
.cols{display:flex;flex-wrap:wrap;gap:28px 44px;font-size:15px}
.cols > div{flex:1 1 170px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
/* The link lists and the contact button sit centred under their headings */
.cols > div:not(.lead-col){align-items:center;text-align:center}
/* The company: its line stays on one line, and the seal lies behind its words */
.cols > .lead-col{position:relative;z-index:0;flex:2 1 320px;align-self:flex-start;min-width:min(100%,max-content);gap:14px}
.lead-col > p.muted{white-space:nowrap;font-size:clamp(10px,3.1vw,14px)}
.lead-col .seal{position:absolute;z-index:-1;left:-14px;top:50%;transform:translateY(-50%);pointer-events:none}
/* The contact button: one size, never wrapping */
.cols > .contact-col{flex:1 0 15.5rem}
.contact-col .hf-ghost{min-width:15.5rem}
.cols .eyebrow{margin-bottom:4px;letter-spacing:.28em}
.cols a:not(.hf-ghost){color:var(--linen);display:inline-flex;align-items:center;min-height:32px;text-decoration:none;border-bottom:1px solid transparent}
.cols a:not(.hf-ghost):hover{color:var(--gold-soft);border-bottom-color:rgba(201,165,76,.5)}
/* the phone and the address under the contact button */
.cols .tel{margin-top:2px}
.foot-address{font-style:normal;line-height:1.6;color:var(--mist)}
.foot-address .line{display:block}
.foot-brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:500;font-size:22px;color:var(--ivory)}
/* the cup drawing has empty space on its left; pulled out, the cup, the name and the line share one left edge */
.foot-brand svg{margin-left:-7px}
.base{border-top:1px solid rgba(201,165,76,.16);padding-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 20px;font-size:13px;color:var(--mist)}
.base .motto{font-family:var(--display);font-style:italic;font-size:17px;color:var(--linen)}
.base nav{display:flex;flex-wrap:wrap;gap:18px}
.base a{color:var(--mist)}
@media (max-width:640px){
  .colophon .lead-col .seal{left:50%;transform:translate(-50%,-50%)}
  .base{flex-direction:column;text-align:center}
  .base nav{justify-content:center}
  .cols a:not(.hf-ghost),.base a{min-height:44px;display:inline-flex;align-items:center}
}

/* --- Our work: the app pages ------------------------------------------------- */
.centre-note{text-align:center;margin:18px auto 0;max-width:42rem}
.band:not(.paper) .centre-note.muted,.band.bottle .centre-note{color:var(--linen)}
.band:not(.paper):not(.laid) .fine.centre-note{color:var(--linen)}
/* At a glance: a small table on card stock; on phones each app's answer stacks under its question */
.glance-wrap,.shares{display:flex;flex-direction:column;align-items:center;gap:18px}
.glance-wrap h2,.shares h2{font-size:clamp(1.8rem,3vw,2.4rem);text-align:center}
.shares{align-items:stretch}
.glance{width:100%;max-width:820px;border-collapse:separate;border-spacing:0;padding:10px 22px;font-size:15px}
.glance th,.glance td{text-align:left;vertical-align:top;padding:13px 12px;border-bottom:1px solid rgba(19,35,58,.12);color:var(--on-paper-muted)}
.glance thead th{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--on-paper)}
.glance tbody th{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;white-space:nowrap}
.glance tr:last-child > *{border-bottom:0}
@media (min-width:1000px){.glance{max-width:none;width:auto}.glance td{white-space:nowrap}}
@media (max-width:640px){
  .glance thead{display:none}
  .glance,.glance tbody,.glance tr,.glance th,.glance td{display:block;width:100%;box-sizing:border-box;text-align:center}
  .glance tr{padding:10px 0;border-bottom:1px solid rgba(19,35,58,.12)}
  .glance tr:last-child{border-bottom:0}
  .glance th,.glance td{border:0;padding:3px 0}
  .glance td[data-app]::before{content:attr(data-app) ": ";font-weight:600;color:var(--on-paper)}
}
/* An app's own page: its engraved emblem stamped in foil beside the heading (the rosette is left off) */
.app-top::after{display:none}
.app-emblem{right:max(24px,calc((100vw - 1240px) / 2 + 24px));top:50%;width:min(34vw,360px);aspect-ratio:1;transform:translateY(-50%);opacity:.9;z-index:0}
@media (max-width:900px){.app-emblem{position:relative;display:block;right:auto;top:auto;transform:none;width:min(62vw,260px);margin:0 auto 40px}}
.art-app-enough{--art:url(/art/enough.webp)}
.art-app-meeting-place{--art:url(/art/meeting-place.webp)}
.app-top .inner{z-index:1}
.app-top .lead{max-width:36rem}
.app-top .label{flex-direction:column;align-items:center;gap:3px;margin-top:4px}
.app-top .btnrow .tlink{margin-left:8px}
/* Cards one above the other, each the full width */
.stack{display:flex;flex-direction:column;gap:22px}
.stack .card.pad{padding:34px 40px;gap:12px}
.stack .card h3{text-align:center;font-size:1.75rem}
.shares .stack .card p{text-align:center}
@media (max-width:640px){.stack .card.pad{padding:28px 24px}}
.steplist.wide{flex:none;width:100%;box-sizing:border-box}

/* Every screen: one at a time in a slim dark display with a gold edge, a sheen across the glass and a small
   stand. Swipe, use the arrow keys, Previous and Next, or pick a screen by name. Without scripts the screens
   still scroll sideways. */
.gallery{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:26px;min-width:0}
.display{width:100%;max-width:560px}
.bezel{position:relative;padding:14px 12px 20px;border-radius:16px;background:linear-gradient(160deg,#22334F 0%,#101C30 55%,#0A1322 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.5),0 0 0 1px rgba(201,165,76,.32),0 26px 48px -22px rgba(0,0,0,.75)}
.bezel::before{content:"";position:absolute;top:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#2B3A52;box-shadow:inset 0 0 1px rgba(255,255,255,.35)}
.bezel::after{content:"";position:absolute;bottom:7px;left:50%;width:46px;height:2px;margin-left:-23px;border-radius:2px;background:rgba(201,165,76,.5)}
.track{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/3;border-radius:5px;
  outline:1px solid rgba(201,165,76,.38);background:#fff;overscroll-behavior-x:contain}
.track::-webkit-scrollbar{display:none}
.track:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.track li{flex:0 0 100%;scroll-snap-align:center;position:relative}
.track li::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 70%,rgba(255,255,255,.05) 100%);box-shadow:inset 0 0 18px rgba(0,0,0,.18)}
.track a{display:block;height:100%}
.track img{display:block;width:100%;height:100%;object-fit:cover}
.stand{position:relative;height:30px}
.stand::before{content:"";position:absolute;top:0;left:50%;width:70px;margin-left:-35px;height:22px;background:linear-gradient(180deg,#0A1322,#1C2B43);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.stand::after{content:"";position:absolute;top:21px;left:50%;width:190px;margin-left:-95px;height:7px;border-radius:0 0 50% 50%/0 0 100% 100%;
  background:linear-gradient(180deg,#22334F,#0A1322);box-shadow:0 0 0 1px rgba(201,165,76,.24),0 8px 14px -8px rgba(0,0,0,.6)}
@media (max-width:480px){.bezel{padding:10px 8px 15px;border-radius:12px}.stand::after{width:140px;margin-left:-70px}}
.cap{margin:0;text-align:center;width:100%;max-width:36rem;box-sizing:border-box;min-height:3.4em;color:var(--ivory)}
.cap b{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--gold-hi)}
.ctrl{align-items:center;justify-content:center;gap:14px}
.ctrl:not([hidden]){display:flex}
.ctrl button{font:600 14px var(--body);color:var(--ivory);background:linear-gradient(180deg,rgba(26,46,74,.85),rgba(14,26,43,.85));border:1px solid rgba(231,207,142,.55);border-radius:99px;padding:0 18px;min-height:44px;cursor:pointer}
.ctrl button:hover{border-color:var(--gold)}
.ctrl button:disabled{opacity:.45;cursor:default}
.count{display:inline-block;min-width:6.5em;font-size:14px;color:var(--linen);text-align:center;font-variant-numeric:tabular-nums}
.jump{flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:14px;color:var(--linen)}
.jump:not([hidden]){display:flex}
.jump select{font:15px var(--body);color:var(--ivory);background:#13233A;border:1px solid rgba(231,207,142,.45);border-radius:10px;padding:8px 10px;min-height:44px;width:17rem;max-width:100%}
.jump select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* --- Phones: below each page's top section, everything is centred ------------- */
/* Long reading text stays left: the guide's body (.hw) and the Privacy, Terms and Accessibility documents (.prose). */
@media (max-width:640px){
  main .band:not(:has(> .prose)),.colophon{text-align:center}
  main .band:not(:has(> .prose)) .col,.colophon .cols > .lead-col{align-items:center;text-align:center}
  main .band:not(:has(> .prose)) :is(.btnrow,.tags){justify-content:center}
}

/* --- Arrival: content rises into place once, as it comes into view ----------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity calc(1000ms*var(--motion)) var(--ease),transform calc(1000ms*var(--motion)) var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:calc(120ms*var(--motion))}.js .reveal.d2{transition-delay:calc(240ms*var(--motion))}

::view-transition-old(root),::view-transition-new(root){animation-duration:420ms;animation-timing-function:var(--ease)}

/* --- Reduced motion: nothing moves --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root{--motion:0}
  .daylight::after{animation:none}
  .js .hero-stage picture{animation:none}
  .js .reveal{opacity:1;transform:none}
  @view-transition{navigation:none}
}
/* --- Forced colours (Windows contrast themes): drop the materials, keep the words --- */
@media (forced-colors:active){
  .foil,h2.foil,h2 .foil{-webkit-text-fill-color:CanvasText;background:none;filter:none}
  .daylight,.engraving,.ph::after,.hero::before{display:none}
  .btn,.hf-btn,.btn-ghost,.hf-ghost{border:1px solid ButtonText}
  .bezel,.stand{background:Canvas;border:1px solid CanvasText}
}

/* Values that used to sit in style="" attributes. The Content Security Policy allows no inline styles
   (style-src 'self'), so each value is a class here instead. Kept last so they win like the attributes did. */
.sprite{position:absolute}
.art-ripples{--art:url(/art/ripples.webp)}
.art-fern{--art:url(/art/fern.webp)}
.art-envelope{--art:url(/art/envelope.webp)}
.bar-blue{--bar:#203b94}
.bar-green{--bar:#427a60}
.mt-28{margin-top:28px}
.items-center{align-items:center}
.gap-18{gap:18px}
.self-center{align-self:center}
.max-36{max-width:36rem}