/* ============================================================
   ramblings & musings — shared paper stylesheet
   Type: Exposure (variable serif) + Departure Mono, on cream.
   EB Garamond is kept only as a per-glyph fallback so Vietnamese
   (e.g. identity.html) still renders where Exposure lacks glyphs.
   ============================================================ */

/* --- Exposure: body serif (variable weight) --- */
@font-face{
  font-family:'Exposure';
  src:url(../fonts/Exposure_VAR.woff2) format('woff2-variations'),
      url(../fonts/Exposure_VAR.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Exposure';
  src:url(../fonts/Exposure_VAR-550-Italic.woff2) format('woff2');
  font-weight:400 600;font-style:italic;font-display:swap;
}
/* Exposure 650: a crisp static instance for titles & emphasis */
@font-face{
  font-family:'Exposure 650';
  src:url(../fonts/Exposure_VAR-650.woff2) format('woff2');
  font-weight:650;font-style:normal;font-display:swap;
}
/* Departure Mono: tracked-caps labels & footer */
@font-face{
  font-family:'Departure Mono';
  src:url(../fonts/DepartureMono-Regular.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* --- EB Garamond: fallback only (Vietnamese diacritics, etc.) --- */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/eb-garamond-latin.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:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/eb-garamond-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/eb-garamond-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/eb-garamond-latin-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:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/eb-garamond-latin-ext-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(../fonts/eb-garamond-vietnamese-italic.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

/* --- tokens --- */
:root{
  --cream:#fffbf4;
  --ink:rgba(43,43,43,.92);
  --ink-soft:rgba(43,43,43,.55);
  --ink-faint:rgba(43,43,43,.28);
  --rule:rgba(43,43,43,.12);
  --serif:"Exposure","EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --serif-bold:"Exposure 650","Exposure","EB Garamond",Georgia,serif;
  --mono:"Departure Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,monospace;
}

/* --- base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%}
body{
  min-height:100vh;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.9rem;
  line-height:1.62;
  letter-spacing:-.006em;
  font-feature-settings:"kern","liga","onum";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
@media(min-width:768px){body{font-size:2.1rem;line-height:1.64}}

/* --- paper texture: a vellum wash + a fine, slowly drifting grain,
       both self-contained SVG noise blended into the cream --- */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1}
body::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.17 0 0 0 0 0.17 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:320px 320px;mix-blend-mode:multiply;opacity:.08;
}
body::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size:180px 180px;mix-blend-mode:multiply;opacity:.045;
  animation:grain-drift 14s steps(8) infinite;
}
@keyframes grain-drift{
  0%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-1%)}
  60%{transform:translate(-1%,3%)}
  80%{transform:translate(3%,1%)}
  100%{transform:translate(0,0)}
}

/* --- typography --- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--serif-bold);font-weight:650;
  line-height:1.15;letter-spacing:-.02em;margin:0 0 1rem;
}
p{margin:0 0 1.4em}
strong,b{font-family:var(--serif-bold);font-weight:650}
em,i{font-style:italic}
a{color:var(--ink);text-decoration:none}
hr{margin:2.6em 0;border:0;border-top:1px solid var(--rule)}
::selection{background:rgba(43,43,43,.12)}

/* --- layout --- */
.container{
  position:relative;z-index:0;
  width:88%;max-width:34em;margin:0 auto;
  padding:11vh 22px 16vh;
}
@media(max-width:599px){.container{padding:5.5rem 20px 7rem}}

/* index: the menu block is vertically centred (sitting a touch below
   middle) inside an 800px column, left-aligned — exactly as before */
.index-page{display:flex;flex-direction:column;align-items:center;justify-content:center}
.index-main{width:85%;max-width:800px;padding:0 20px}
.index-main .menu-container{padding-top:20vh}
@media(max-height:700px){.index-main .menu-container{padding-top:0}}

.story-container{max-width:31em;margin:0 auto}

/* --- shared pieces --- */
.eyebrow{
  font-family:var(--mono);font-size:1.15rem;line-height:1.4;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 1.4em;
}
.masthead{margin-bottom:3.4em}

.page-title{
  font-family:var(--serif-bold);font-weight:650;
  font-size:1.7em;line-height:1.04;letter-spacing:-.03em;
  margin:0 0 .3em;
}
@media(min-width:768px){.page-title{font-size:1.95em}}

.subtitle{font-size:.8em;font-style:italic;color:var(--ink-soft);margin:0 0 2.2em}
.by{color:var(--ink-soft)}

/* --- index menu --- */
.menu-container{max-width:30em}
.menu-container{font-size:1.55rem}
.menu-link{
  position:relative;display:inline-block;color:var(--ink);text-decoration:none;
  line-height:1.45;
  transition:transform .16s cubic-bezier(.2,0,0,1),color .16s cubic-bezier(.2,0,0,1);
}
/* hairline underline that draws in from the left */
.menu-link::before{
  content:"";position:absolute;left:0;right:0;bottom:-.06em;height:1px;
  background:currentColor;opacity:.4;
  transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.menu-link:hover,.menu-link:focus-visible{color:#000;transform:translateX(.3em)}
.menu-link:hover::before,.menu-link:focus-visible::before{transform:scaleX(1)}
.menu-link:active{transform:translateX(.3em) translateY(1px)}

/* external links leave the site — a slim arrow glides out on hover */
.menu-link[href^="http"]::after{
  content:"\2192";display:inline-block;margin-left:.4em;
  font-size:.82em;color:var(--ink-faint);
  opacity:0;transform:translateX(-.35em);
  transition:opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.menu-link[href^="http"]:hover::after,
.menu-link[href^="http"]:focus-visible::after{opacity:1;transform:translateX(0)}

/* navigating: dim the other links, keep the chosen one deepened + pulsing */
body.is-navigating .menu-link:not(.is-loading){opacity:.3;transition:opacity .45s ease}
.menu-link.is-loading{color:#000;transform:translateX(.3em)}
.menu-link.is-loading::before{transform:scaleX(1);animation:link-pulse 1.1s ease-in-out infinite}
.menu-link.is-loading[href^="http"]::after{opacity:1;transform:translate(0,0);animation:arrow-go 1.1s ease-in-out infinite}
@keyframes link-pulse{0%,100%{opacity:.25}50%{opacity:.65}}
@keyframes arrow-go{0%,100%{transform:translateX(0)}50%{transform:translateX(.28em)}}

/* top progress bar shown while an external page loads */
.page-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  opacity:0;z-index:100;pointer-events:none;
}
.page-progress.is-active{
  opacity:1;transform:scaleX(.92);
  transition:transform 5.5s cubic-bezier(.16,1,.3,1),opacity .2s ease;
}

.site-footer{
  position:fixed;bottom:2.4rem;left:50%;transform:translateX(-50%);
  width:85%;max-width:800px;padding:0 20px;pointer-events:none;
  font-family:var(--mono);font-size:1.1rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint);
}

/* --- recipe (coffee.html) --- */
.recipe{margin:0}
.recipe-header{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5em;margin-bottom:1.6em;padding-bottom:.9em;
  border-bottom:1px solid var(--rule);
}
@media(max-width:480px){.recipe-header{flex-direction:column;align-items:flex-start;gap:.1em}}
.recipe-title{font-family:var(--serif-bold);font-weight:650;font-size:1em;line-height:1.25;margin:0}
.recipe-num{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink-faint);margin-right:.5em}
.recipe-ratio{font-style:italic;color:var(--ink-soft);font-size:.85em;white-space:nowrap;margin:0}

.timeline{display:grid;grid-template-columns:5.4em 1fr;column-gap:1.6em;row-gap:.32em;margin:0 0 2em;font-size:.9em}
.timeline dt{color:var(--ink-faint);font-style:italic;text-align:right;font-feature-settings:"lnum","tnum";white-space:nowrap}
.timeline dd{margin:0;color:var(--ink)}
.timeline dd.pause{color:var(--ink-faint);font-style:italic}
.timeline .pct{color:var(--ink-faint);font-style:italic;font-size:.94em;margin-left:.15em}

.notes{list-style:none;margin:0;padding:0;font-size:.9em;color:var(--ink-soft)}
.notes li{padding-left:1.2em;text-indent:-1.2em;margin-bottom:.12em}
.notes li::before{content:"\2014\2009";color:var(--ink-faint)}

.divider{text-align:center;color:var(--ink-faint);letter-spacing:1.2em;margin:3.5em 0 3.5em 1.2em;font-size:.85em}

/* --- footer / back link --- */
.page-footer{margin-top:4.5em;padding-top:1.8em;border-top:1px solid var(--rule)}
.back-link{
  position:relative;display:inline-block;
  font-family:var(--mono);color:var(--ink-faint);text-decoration:none;
  font-size:1.15rem;letter-spacing:.22em;text-transform:uppercase;
  transition:color .3s ease,transform .2s cubic-bezier(.2,0,0,1);
}
.back-link::before{
  content:"\2190";position:absolute;right:100%;margin-right:.5em;
  opacity:0;transform:translateX(.3em);
  transition:opacity .2s ease,transform .2s cubic-bezier(.16,1,.3,1);
}
.back-link:hover,.back-link:focus-visible{color:var(--ink);transform:translateX(.4em)}
.back-link:hover::before,.back-link:focus-visible::before{opacity:1;transform:translateX(0)}
.back-link:active{transform:translateX(.4em) translateY(1px)}

/* --- motion off --- */
@media(prefers-reduced-motion:reduce){
  body::after{animation:none}
  .menu-link,.back-link{transition:color .2s ease}
  .menu-link:hover,.menu-link:focus-visible,
  .back-link:hover,.back-link:focus-visible,
  .menu-link:active,.back-link:active,
  .menu-link.is-loading{transform:none}
  .menu-link::before,.back-link::before,.menu-link[href^="http"]::after{transition:opacity .2s ease}
  .menu-link.is-loading::before,.menu-link.is-loading[href^="http"]::after{animation:none}
  .page-progress.is-active{transition:opacity .2s ease}
}