/* ATELIER. Paper, ink, lapis and a thread of saffron.
   Ibarra Real Nova for the voice, Ysabeau for everything quiet. */
:root{
  --paper:#ECE2CF; --sheet:#F6EFE0; --ink:#1D2130; --ink-2:#4A4639;
  --rule:#C8BCA4; --lapis:#233E8B; --lapis-deep:#1B3071; --saffron:#D8982C; --saffron-text:#EDB651;
  --on-lapis:#F6EFE0; --on-lapis-2:#D5D3D6;
  --serif:"Ibarra Real Nova","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Ysabeau Office","Gill Sans","Trebuchet MS",sans-serif;
  --sc:"Ysabeau SC","Ysabeau Office","Gill Sans",sans-serif;
  --gutter:20px; --max:1240px; --gap:32px;
  --ease:cubic-bezier(.22,.8,.2,1);
  /* --head is the sticky header's height (bar + double rule); the scenes pad themselves clear of it */
  --head:69px; --scroll-pad:88px;
  /* --dock is the height of the mobile bottom bar; content and scenes keep clear of it */
  --dock:72px;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--scroll-pad);scroll-padding-bottom:var(--dock)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;color:var(--ink);font-family:var(--sans);font-size:1.125rem;line-height:1.6;font-weight:420;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .11 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body{padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom,0px))}
body.is-locked{overflow:hidden}
img,svg{display:block;max-width:100%}
p{margin:0}
a{color:var(--lapis);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.nb{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-80px;z-index:60;background:var(--ink);color:var(--sheet);padding:12px 18px}
.skip:focus{top:12px;color:var(--sheet)}

/* type */
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;font-feature-settings:"liga","kern"}
h1{font-size:clamp(2.55rem,10.4vw,5.35rem);line-height:1.04;letter-spacing:-.012em}
h1 span{display:block;text-wrap:balance}
h1 span+span{text-indent:1.1em}
h2{font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.08;letter-spacing:-.008em;text-wrap:balance}
h3{font-size:clamp(1.85rem,4.4vw,2.5rem);line-height:1.1}
.sc{font-family:var(--sc);font-weight:520;font-size:1rem;letter-spacing:.075em;line-height:1.35;color:var(--ink-2)}
.note{font-family:var(--serif);font-style:italic;font-size:1.2rem;line-height:1.45;color:var(--ink-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;background:var(--lapis);color:var(--on-lapis);
  font-family:var(--sans);font-weight:560;font-size:1.0625rem;letter-spacing:.01em;text-decoration:none;border-radius:2px;transition:background-color .2s}
.btn:hover{background:var(--ink);color:var(--on-lapis)}
.btn--small{min-height:44px;padding:0 20px;font-size:1rem}
.btn--saffron{background:var(--saffron);color:var(--ink)}
.btn--saffron:hover{background:var(--sheet);color:var(--ink)}
.quiet-link{display:inline-flex;align-items:center;min-height:48px;color:var(--ink);font-weight:500}

/* header */
.site-header{position:sticky;top:0;z-index:30;background:var(--paper)}
.site-header::after{content:"";display:block;height:5px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.wordmark{font-family:var(--serif);font-size:1.5rem;letter-spacing:-.005em;color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:48px}
.wordmark i{color:var(--lapis)}
.nav{display:none}
/* "Luk" inside the sheet: two crossed hairlines, never a burger */
.menu-toggle{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding-inline:14px 0;color:inherit;text-decoration:none;
  font-family:var(--sc);font-weight:560;font-size:1.0625rem;letter-spacing:.09em;cursor:pointer}
.menu-glyph{position:relative;width:22px;height:12px;flex:none}
.menu-glyph::before,.menu-glyph::after{content:"";position:absolute;left:0;right:0;top:5px;height:1.5px;background:currentColor}
.menu-glyph::before{transform:rotate(45deg)}.menu-glyph::after{transform:rotate(-45deg)}