/* ------------------------------------------------------------------
   PCG — coming soon, concept "the curtain".
   One file. No network beyond the local fonts and one local image.
   ------------------------------------------------------------------ */

@font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Bodoni Moda';src:url('/assets/fonts/bodoni-moda-latin.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap;
  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+2212,U+FEFF,U+FFFD;}

:root{
  --onyx:#0B0B0C;
  --onyx-deep:#070708;
  --houtskool:#141416;
  --houtskool-2:#1A1A1C;
  --alloy-1:#5A461A;
  --alloy-2:#96742C;
  --alloy-3:#C9A14A;
  --alloy-4:#E6CF8F;
  --alloy-5:#F0DEA9;
  --alloy-6:#FBF2DC;
  --champagne:#E6CF8F;
  --creme:#F4ECD8;
  --steen:#918A79;
  /* --linen and --whisper sit on the line between --steen and --creme.
     No new hue, only tints of two brand tokens, chosen for contrast:
     --linen  #B7AF9D  9.0:1 on --onyx, 6.8:1 on the brightest lit cloth
     --whisper #A49C8A 7.2:1 on --onyx, 5.3:1 on the brightest lit cloth */
  --linen:#B7AF9D;
  --whisper-ink:#A49C8A;
  --gut:clamp(22px, 6.2vw, 132px);
}

*,*::before,*::after{box-sizing:border-box;}

html{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  background:var(--onyx-deep);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  height:100%;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  overscroll-behavior:none;
  color:var(--linen);
  background-color:var(--onyx);
  /* The static sheet. This is the whole page when JavaScript never runs. */
  background-image:
    radial-gradient(125% 95% at 23% -14%, rgba(201,161,74,.17), rgba(150,116,44,.055) 40%, rgba(11,11,12,0) 71%),
    radial-gradient(115% 62% at 50% 109%, rgba(230,207,143,.115), rgba(150,116,44,.03) 44%, rgba(11,11,12,0) 79%),
    radial-gradient(70% 100% at -8% 60%, rgba(150,116,44,.07), rgba(11,11,12,0) 62%),
    linear-gradient(157deg, #1B1B1D 0%, #151517 45%, #08080A 100%);
  background-repeat:no-repeat;
  font-family:'Switzer',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-synthesis-style:none;
  -webkit-touch-callout:none;
}

/* Two lazy folds and a vignette, so the no-script page still reads as cloth. */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    linear-gradient(101deg, rgba(0,0,0,0) 27%, rgba(0,0,0,.16) 33%, rgba(255,246,228,.028) 36%, rgba(0,0,0,0) 43%),
    linear-gradient(96deg, rgba(0,0,0,0) 58%, rgba(0,0,0,.13) 64%, rgba(255,246,228,.022) 67%, rgba(0,0,0,0) 74%);
  z-index:0;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(105% 88% at 44% 40%, rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 78%, rgba(0,0,0,.58) 100%);
  z-index:0;
}

#sheet{
  position:fixed;
  inset:0;
  z-index:1;
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:start;
  padding:calc(var(--gut) * .86) var(--gut) calc(var(--gut) * .70);
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
  max-width:100%;
  overflow:hidden;
  transition:opacity 240ms linear;
}
html.cloth-live #sheet{opacity:0;}

.mark{
  margin:0;
  display:flex;
  align-items:center;
  gap:.6em;
  min-width:0;
}
.mark img{
  height:clamp(28px, 4.4vh, 44px);
  width:auto;
  display:block;
  flex:0 0 auto;
}
.mark span{
  font-weight:500;
  font-size:clamp(11px, .9vw + 4.4px, 14px);
  letter-spacing:.055em;
  color:var(--linen);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.msg{
  align-self:center;
  min-width:0;
  max-width:100%;
}

h1{
  margin:0;
  font-family:'Bodoni Moda',Georgia,'Times New Roman',serif;
  font-weight:500;
  font-size:clamp(27px, min(7.6vw, 10.2vh), 86px);
  line-height:1.04;
  letter-spacing:-.014em;
  color:var(--creme);
  text-wrap:balance;
}

.lede{
  margin:clamp(14px,2.2vh,30px) 0 0;
  font-size:clamp(13px, min(.9vw + 7.2px, 2.5vh), 18.5px);
  line-height:1.58;
  color:var(--linen);
  max-width:34ch;
}
.lede + .lede{margin-top:0;}

.whisper{
  margin:0;
  align-self:end;
  font-size:clamp(11px, min(.5vw + 8px, 1.8vh), 13.5px);
  line-height:1.5;
  letter-spacing:.012em;
  color:var(--whisper-ink);
  max-width:40ch;
}

#cloth{
  position:fixed;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  cursor:default;
  transition:opacity 240ms linear;
}
html.cloth-live #cloth{opacity:1;}

:focus-visible{
  outline:2px solid var(--champagne);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  #cloth,#sheet{transition:none;}
}

/* Very short landscape: keep everything inside the fold. */
@media (max-height:430px){
  #sheet{padding-top:calc(var(--gut) * .55);padding-bottom:calc(var(--gut) * .45);}
  .lede + .lede{display:none;}
}