/* ============================================================================
   GrindUni - stylesheet.
   One file, written once. No inline styles anywhere in the markup: a page that
   needs a spacing or layout decision names a class from here. Layout uses
   max-widths and simple grids, never grid-column offsets, which is what made
   the previous version fragile.
   ========================================================================== */

/* Self-hosted. No Google Fonts request: it is blocked in mainland China and, as
   a render-blocking stylesheet, left a visitor there staring at nothing until
   the connection timed out. Also keeps visitor IPs away from Google. */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-400-italic.woff2') format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/instrument-serif-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-500.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/jetbrains-mono-700.woff2') format('woff2')}

/* ---------------------------------------------------------------- tokens -- */
:root{
  --void:#080B14; --panel:#0F141F; --panel-2:#141B28;
  --line:#1C2431; --line-2:#2A3444;
  --text:#EDE9E2; --dim:#96A0B2; --dimmer:#5F6C80;
  --accent:#FF8A5B; --accent-lift:#FF9A70; --accent-ink:#160709;
  --s1:8px; --s2:16px; --s3:24px; --s4:36px; --s5:56px; --s6:80px; --s7:112px;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --serif:'Instrument Serif', Georgia, serif;
  --wrap:1080px; --radius:6px;
}

/* ------------------------------------------------------------------ base -- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--void); color:var(--text);
  font-family:var(--mono); font-size:15.5px; line-height:1.72; letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg,video{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.04em; line-height:1.2; text-wrap:balance}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.35rem,2.4vw,1.75rem)}
h3{font-size:1.1rem; letter-spacing:-.03em}
p{margin:0; text-wrap:pretty}
p + p{margin-top:1.05em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
b,strong{font-weight:700; color:var(--text)}
em.serif{font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.02em}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:300; background:var(--accent);
  color:var(--accent-ink); padding:10px 16px; border-radius:var(--radius)}

/* ---------------------------------------------------- background effects -- */
#gl{position:fixed; inset:0; z-index:-3; width:100%; height:100%; display:block;
  pointer-events:none; background:var(--void)}
#grain{position:fixed; inset:-120px; z-index:-2; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay; animation:grain 700ms steps(2) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes grain{0%{transform:translate(0,0)}50%{transform:translate(-6px,4px)}100%{transform:translate(4px,-5px)}}
#cur,#curdot{position:fixed; z-index:200; left:0; top:0; pointer-events:none;
  border-radius:50%; mix-blend-mode:difference; opacity:0; transition:opacity .3s}
#cur{width:34px; height:34px; border:1px solid #B9C4D6;
  transition:opacity .3s, width .22s, height .22s, background .22s}
#cur.hot{width:56px; height:56px; background:rgba(185,196,214,.12)}
#curdot{width:5px; height:5px; background:var(--text)}
body.cursor-on #cur,body.cursor-on #curdot{opacity:1}
body.cursor-on,body.cursor-on a,body.cursor-on button,
body.cursor-on input,body.cursor-on textarea,body.cursor-on .person{cursor:none}
@media (hover:none){ body.cursor-on{cursor:auto} #cur,#curdot{display:none} }

/* ---------------------------------------------------------------- layout -- */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:30px}
@media (max-width:640px){ .wrap{padding-inline:20px} }
.band{padding-block:var(--s7); border-top:1px solid var(--line)}
.band--open{border-top:0}
.band__inner{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--s5)}
.band__body > * + *{margin-top:var(--s3)}
@media (max-width:900px){
  .band{padding-block:var(--s5)}
  .band__inner{grid-template-columns:1fr; gap:var(--s3)}
}
.lead{font-size:1.08rem; color:var(--text); max-width:56ch}
.muted{color:var(--dim); max-width:60ch}
.note{color:var(--dimmer); font-size:13px; max-width:64ch}

/* ---------------------------------------------------------------- header -- */
.masthead{position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line);
  background:rgba(8,11,20,.78); backdrop-filter:blur(12px)}
.masthead__inner{display:flex; align-items:center; gap:var(--s3);
  min-height:60px; padding-block:10px; flex-wrap:wrap}
.masthead__brand{font-weight:700; color:var(--text); letter-spacing:-.03em; font-size:15px}
.masthead__brand:hover{text-decoration:none}
.masthead__nav{display:flex; align-items:center; gap:var(--s3);
  margin-left:auto; flex-wrap:wrap; font-size:13.5px}
.masthead__nav a{color:var(--dim)}
.masthead__nav a:hover,.masthead__nav a[aria-current="page"]{color:var(--text); text-decoration:none}
.masthead__nav .navbtn{background:var(--accent); color:var(--accent-ink); font-weight:700;
  padding:7px 15px; border-radius:var(--radius)}
.masthead__nav .navbtn:hover{background:var(--accent-lift); color:var(--accent-ink)}
@media (max-width:760px){
  .masthead__inner{gap:var(--s2)}
  .masthead__nav{width:100%; margin-left:0; gap:var(--s2); font-size:13px}
}

/* ------------------------------------------------------------ hero, head -- */
.hero{padding-block:var(--s7) var(--s6)}
.hero__title{max-width:17ch}
.hero__lead{margin-top:var(--s4); max-width:54ch; color:var(--dim); font-size:1.06rem}
.hero .cta-row{margin-top:var(--s4)}
@media (max-width:900px){ .hero{padding-block:var(--s5) var(--s4)} .hero__title{max-width:none} }
.pagehead{padding-block:var(--s7) var(--s6)}
.pagehead h1{max-width:17ch}
.pagehead p{margin-top:var(--s3); max-width:54ch; color:var(--dim); font-size:1.04rem}
@media (max-width:900px){ .pagehead{padding-block:var(--s5) var(--s4)} }

/* --------------------------------------------------------------- buttons -- */
.cta-row{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.btn,.btn-ghost{font:inherit; font-size:15px; border-radius:var(--radius); cursor:pointer;
  display:inline-block; text-align:center; white-space:nowrap}
.btn{font-weight:700; background:var(--accent); color:var(--accent-ink); border:0; padding:13px 26px}
.btn:hover{background:var(--accent-lift); text-decoration:none; color:var(--accent-ink)}
.btn[disabled]{opacity:.55; cursor:default}
.btn-ghost{font-weight:500; background:transparent; color:var(--dim);
  border:1px solid var(--line-2); padding:12px 24px}
.btn-ghost:hover{color:var(--text); border-color:var(--dimmer); text-decoration:none}
.btn-quiet{color:var(--dim); font-size:14px; border-bottom:1px solid var(--line-2)}
.btn-quiet:hover{color:var(--text); border-bottom-color:var(--dimmer); text-decoration:none}
.magnet{position:relative; display:inline-flex; padding:1.4px; border-radius:var(--radius);
  overflow:hidden; transition:transform .25s cubic-bezier(.2,.9,.3,1)}
.magnet::before{content:""; position:absolute; inset:-160%; opacity:0; transition:opacity .35s;
  background:conic-gradient(from 0deg,transparent 0 58%,var(--accent) 74%,#FFD2B8 84%,transparent 94%);
  animation:spin 3.6s linear infinite}
.magnet:hover::before,.magnet:focus-within::before{opacity:1}
.magnet > *{position:relative; z-index:1}
@keyframes spin{to{transform:rotate(1turn)}}
@media (max-width:520px){ .cta-row .magnet,.cta-row .btn,.cta-row .btn-ghost{width:100%} }

/* ----------------------------------------------------------------- cards -- */
.cards{display:grid; gap:var(--s3)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .cards--2{grid-template-columns:1fr} }
.card{border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4)}
.card--lift{border-color:var(--line-2); background:var(--panel)}
.card__label{font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin-bottom:var(--s1)}
.card h3{margin-bottom:var(--s2)}
.card p{color:var(--dim); font-size:.98rem}
.plain-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5)}
@media (max-width:900px){ .plain-2{grid-template-columns:1fr; gap:var(--s3)} }
.plain-2 h3{margin-bottom:var(--s2)}
.plain-2 p{color:var(--dim); font-size:.98rem}

/* ------------------------------------------------------------ item lists -- */
.items > li{position:relative; overflow:hidden; display:grid;
  grid-template-columns:52px minmax(0,1fr); gap:var(--s1);
  padding:var(--s4) var(--s2) var(--s4) 0; border-bottom:1px solid var(--line);
  border-radius:var(--radius)}
.items > li:first-child{padding-top:0}
.items > li:last-child{border-bottom:0; padding-bottom:0}
.items > li::before{content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .4s;
  background-image:radial-gradient(rgba(255,138,91,.5) 1px, transparent 1px);
  background-size:9px 9px;
  -webkit-mask-image:radial-gradient(190px circle at var(--mx,50%) var(--my,50%),#000 5%,transparent 68%);
  mask-image:radial-gradient(190px circle at var(--mx,50%) var(--my,50%),#000 5%,transparent 68%)}
.items > li:hover::before{opacity:1}
.items__n{position:relative; font-size:11.5px; color:var(--accent); padding-top:6px}
.items h3{position:relative; margin-bottom:var(--s1)}
.items p{position:relative; color:var(--dim); font-size:.98rem}
.ticks > li{position:relative; padding-left:22px; color:var(--dim)}
.ticks > li + li{margin-top:var(--s2)}
.ticks > li::before{content:"\00B7"; position:absolute; left:0; color:var(--accent)}

/* ---------------------------------------------------------------- people -- */
.people{display:flex; gap:var(--s4); flex-wrap:wrap}
.person{position:relative; display:inline-flex; align-items:baseline; gap:10px;
  border-bottom:1px dashed var(--line-2); padding-bottom:3px}
.person__name{font-weight:700; color:var(--text)}
.person__role{color:var(--dimmer); font-size:13.5px}
.tip{position:absolute; bottom:calc(100% + 14px); left:50%; width:240px; padding:var(--s2);
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:8px; z-index:10;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(-50%,10px) scale(.94) rotate(var(--tilt,0deg));
  transform-origin:bottom center;
  transition:opacity .22s, transform .28s cubic-bezier(.2,1.2,.4,1), visibility .22s;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85)}
.person:hover .tip,.person:focus-within .tip{opacity:1; visibility:visible;
  transform:translate(-50%,0) scale(1) rotate(var(--tilt,0deg))}
.tip__photo{aspect-ratio:4/5; background:var(--void); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--dimmer); font-size:10.5px; margin-bottom:10px}
.tip p{font-size:13px; line-height:1.55; color:var(--dim)}

/* ----------------------------------------------------------------- price -- */
.price{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s5); align-items:start}
@media (max-width:760px){ .price{grid-template-columns:1fr; gap:var(--s3)} }
.price__figure{font-size:clamp(3.2rem,8.5vw,5.4rem); line-height:.86; font-weight:700;
  letter-spacing:-.07em; color:var(--accent)}
.price__unit{display:block; font-size:.95rem; font-weight:500; letter-spacing:0;
  color:var(--dim); margin-top:var(--s2)}
.price__body > * + *{margin-top:1.05em}

/* -------------------------------------------------------------- timeline -- */
.timeline{position:relative; margin-top:var(--s5)}
.timeline__rail{position:absolute; left:11px; top:0; bottom:0; width:2px; background:var(--line);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%)}
.timeline__beam{position:absolute; left:0; top:0; width:2px; height:0; border-radius:2px;
  background:linear-gradient(to top,var(--accent) 0,#FFD2B8 30%,transparent 100%)}
.tl-item{position:relative; display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:var(--s5);
  padding:0 0 var(--s7) 56px}
.tl-item:last-child{padding-bottom:var(--s4)}
.tl-item__dot{position:absolute; left:0; top:5px; width:24px; height:24px; border-radius:50%;
  background:var(--void); border:1px solid var(--line-2); display:grid; place-items:center;
  transition:border-color .35s}
.tl-item__dot::after{content:""; width:9px; height:9px; border-radius:50%;
  background:var(--line-2); transition:background .35s, box-shadow .35s}
.tl-item.is-on .tl-item__dot{border-color:var(--accent)}
.tl-item.is-on .tl-item__dot::after{background:var(--accent);
  box-shadow:0 0 10px 1px rgba(255,138,91,.55)}
.tl-item__when{position:sticky; top:104px; align-self:start}
.tl-item__date{display:block; font-size:clamp(1.4rem,3.2vw,2.4rem); font-weight:700;
  letter-spacing:-.06em; line-height:1.06; color:var(--dimmer); transition:color .35s}
.tl-item.is-on .tl-item__date{color:var(--text)}
.tl-item__time{display:block; margin-top:var(--s1); color:var(--dimmer); font-size:13px}
.tl-item__tag{display:inline-block; margin-top:var(--s2); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; border:1px solid var(--accent); color:var(--accent);
  padding:3px 9px; border-radius:3px}
.tl-item__what h3{margin-bottom:var(--s2)}
.tl-item__what p{color:var(--dim); max-width:56ch}
@media (max-width:900px){
  .tl-item{grid-template-columns:1fr; gap:var(--s2); padding:0 0 var(--s5) 44px}
  .tl-item__when{position:static}
  .tl-item__date{font-size:1.3rem}
  .timeline__rail{left:7px}
  .tl-item__dot{width:16px; height:16px; top:4px}
  .tl-item__dot::after{width:6px; height:6px}
}

/* ------------------------------------------------------------------ form -- */
.form{max-width:480px}
.field + .field,.field + .check,.check + .field,.check + .fieldset{margin-top:var(--s2)}
.field label{display:block; color:var(--dimmer); font-size:12.5px; margin-bottom:7px}
.field input,.field textarea{font:inherit; font-size:16px; width:100%; padding:12px 14px;
  color:var(--text); background:rgba(8,11,20,.7);
  border:1px solid var(--line-2); border-radius:var(--radius)}
.field input::placeholder,.field textarea::placeholder{color:var(--dimmer)}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--accent)}
.check{display:flex; align-items:center; gap:9px; color:var(--dim); font-size:14px}
.check input{accent-color:var(--accent); width:16px; height:16px}
.form .cta-row{margin-top:var(--s3)}
.form__status{margin-top:var(--s2); color:var(--dim); font-size:14px; min-height:1.4em}
.form__status.is-error{color:#FFB59B}
.honeypot{position:absolute; left:-9999px}

/* ----------------------------------------------------------------- prose -- */
.prose{max-width:66ch}
.prose > * + *{margin-top:1.05em}
.prose h3{margin-top:var(--s4); margin-bottom:var(--s2)}
.prose p{color:var(--dim)}

/* ---------------------------------------------------------------- footer -- */
.footer{border-top:1px solid var(--line); padding-block:var(--s5) var(--s6);
  color:var(--dimmer); font-size:13.5px}
.footer__nav{display:flex; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3)}
.footer a{color:var(--dim)}
.footer p{max-width:64ch; line-height:1.6}
.footer p + p{margin-top:var(--s2)}
.footer__contact{margin-top:var(--s3)}

/* ------------------------------------------------------------ animations -- */
[data-reveal]{animation:headline .9s cubic-bezier(.16,.9,.24,1) both}
@keyframes headline{from{opacity:0; transform:translateY(14px); filter:blur(6px)}
  to{opacity:1; transform:none; filter:blur(0)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
  [data-reveal]{animation:none; opacity:1; transform:none; filter:none}
}