:root {
  --ink: #0d0c09;
  --ink-deep: #090806;
  --ink-raised: #171410;
  --charcoal: #241f1a;
  --paper: #ede1d3;
  --paper-2: #d2c4b4;
  --orange: #ec5b1e;
  --orange-dark: #823411;
  --muted: rgba(237,225,211,.66);
  --line: rgba(237,225,211,.32);
  --line-soft: rgba(237,225,211,.14);
  --page: clamp(1.25rem, 5vw, 6rem);
  --section: clamp(5.5rem, 11vw, 11rem);
  --radius: 2px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-ui: cubic-bezier(.22,.75,.25,1);
  --display: "UnifrakturCook", "Old English Text MT", Georgia, serif;
  --sans: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.55; overflow-x: hidden; }
body::before { content:""; position: fixed; inset: 0; background-image: linear-gradient(rgba(13,12,9,.78),rgba(13,12,9,.78)), url('/assets/ink-texture.webp'); background-size: cover; opacity: .28; pointer-events: none; z-index: -2; }
body::after { content:""; position: fixed; inset: 0; pointer-events:none; z-index:99; opacity:.035; background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.16) 4px); mix-blend-mode:soft-light; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button,input,textarea,select { font: inherit; }
button { color: inherit; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; padding: .7rem 1rem; background: var(--paper); color: var(--ink); z-index: 1000; transition: top .2s; }
.skip-link:focus { top: 1rem; }

.shell { width: min(100%, 1680px); margin: 0 auto; padding-inline: var(--page); }
.section { padding-block: var(--section); position: relative; }
.section + .section { border-top: 1px solid var(--line-soft); }
.kicker { font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.22em; color:var(--muted); }
.kicker.orange { color: var(--orange); }
.rule { height:1px; background:linear-gradient(90deg,var(--paper),transparent); opacity:.5; }
.meta { font-family: var(--mono); text-transform: uppercase; letter-spacing: .18em; font-size: .68rem; color: var(--muted); }
.display { font-family: var(--display); font-weight: 700; line-height:.82; letter-spacing:-.035em; }
.display-sans { font-family:var(--sans); font-weight:900; line-height:.82; letter-spacing:-.055em; }
.orange { color: var(--orange); }
.paper { color: var(--paper); }
.muted { color: var(--muted); }

/* header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 80; padding: 1rem var(--page); transition: background .28s var(--ease-ui), border-color .28s; }
.site-header.is-scrolled { background: rgba(13,12,9,.88); backdrop-filter: blur(14px); border-bottom:1px solid var(--line-soft); }
.navbar { max-width:1680px; margin:auto; display:grid; grid-template-columns:auto 1fr auto; gap:2rem; align-items:center; }
.brand { display:flex; align-items:center; gap:.8rem; min-width:max-content; }
.brand img { width: 38px; height:38px; }
.brand-word { font-weight: 850; letter-spacing:-.04em; font-size:1.25rem; }
.brand-dot { color:var(--orange); }
.navlinks { display:flex; justify-content:center; gap:clamp(1rem,2vw,2rem); font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; }
.navlinks a { color:var(--muted); transition:color .18s; }
.navlinks a:hover,.navlinks a[aria-current="page"] { color:var(--paper); }
.header-actions { display:flex; align-items:center; gap:.8rem; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#7f7a70; display:inline-block; margin-right:.45rem; }
.live-dot.on { background:var(--orange); box-shadow:0 0 0 3px rgba(236,91,30,.16); }
.live-label { font-family:var(--mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.menu-btn { display:none; background:transparent; border:1px solid var(--line); padding:.65rem .8rem; }
.mobile-menu { position:fixed; inset:0; z-index:79; padding:8rem var(--page) 3rem; background:var(--ink); display:none; }
.mobile-menu.open { display:flex; flex-direction:column; }
.mobile-menu a { font-size:clamp(2.8rem,12vw,6rem); font-weight:900; line-height:.95; letter-spacing:-.055em; padding:.25rem 0; }
.mobile-menu .mobile-meta { margin-top:auto; }

/* loader */
.loader { position:fixed; inset:0; background:var(--ink); z-index:120; display:grid; place-items:center; transition:opacity .6s var(--ease), visibility .6s; }
.loader.done { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner { width:min(560px,80vw); }
.loader-mark { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; }
.loader-mark img { width:56px; }
.loader-line { height:2px; background:rgba(237,225,211,.12); overflow:hidden; }
.loader-line span { display:block; height:100%; background:var(--orange); width:0; animation:loadline 1s var(--ease) forwards; }
@keyframes loadline { to { width:100%; } }

/* hero */
.hero { min-height:100svh; display:grid; align-items:end; padding-top:8rem; position:relative; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:clamp(2rem,6vw,8rem); align-items:end; padding-bottom:clamp(4rem,8vw,7rem); }
.hero-copy { position:relative; z-index:2; }
.hero-title { margin:.8rem 0 1.5rem; max-width:1000px; }
.hero-title .line { display:block; overflow:hidden; padding-bottom:.08em; }
.hero-title .line > span { display:block; font-size:clamp(4.3rem,9.2vw,10rem); transform:translateY(110%); }
.hero-title .line:nth-child(2) > span { font-family:var(--sans); font-weight:900; color:var(--orange); letter-spacing:-.07em; }
.hero-lede { max-width:42rem; font-size:clamp(1rem,1.6vw,1.35rem); color:var(--muted); margin-bottom:2rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.9rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.8rem 1.05rem; border:1px solid var(--line); font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; transition:background .18s,color .18s,border-color .18s,transform .18s; cursor:pointer; background:transparent; }
.btn:hover { background:var(--orange); border-color:var(--orange); color:var(--ink); transform:translateY(-1px); }
.btn.primary { background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn.primary:hover { background:var(--orange); border-color:var(--orange); }
.hero-art { position:relative; min-height:68vh; }
.photo-window { position:absolute; inset:8% 0 auto; border:1px solid var(--line); overflow:hidden; background:#15130f; }
.photo-window img { width:100%; aspect-ratio: 16/7; object-fit:cover; filter:grayscale(1) contrast(1.05); transform:scale(1.025); }
.photo-window::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 90px rgba(13,12,9,.45); }
.annotation { position:absolute; right:4%; top:13%; z-index:2; color:var(--orange); font-weight:800; font-style:italic; text-transform:uppercase; font-size:clamp(1.35rem,2.3vw,2.35rem); line-height:.95; transform:rotate(-8deg); text-align:center; }
.annotation::after { content:""; display:block; width:85%; height:3px; background:var(--orange); margin:.55rem auto 0; transform:skewX(-18deg); }
.shadow-card { position:absolute; right:8%; bottom:0; width:34%; min-width:160px; border:1px solid var(--line); background:var(--ink); }
.shadow-card img { width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(1) contrast(1.1); }
.vertical-meta { position:absolute; right:-1rem; bottom:4%; writing-mode:vertical-rl; font-family:var(--mono); letter-spacing:.35em; font-size:.66rem; color:var(--orange); }
.hero-index { position:absolute; top:30%; left:0; display:grid; gap:.55rem; }
.hero-index span { font-family:var(--mono); font-size:.62rem; letter-spacing:.22em; color:var(--muted); }

/* torn paper divider */
.paper-rip { position:relative; background:var(--paper); color:var(--ink); padding-block:clamp(5rem,10vw,9rem); clip-path:polygon(0 4%, 9% 1%, 19% 4%, 31% 2%, 43% 5%, 55% 2%, 67% 5%, 79% 2%, 91% 4%, 100% 1%, 100% 100%, 0 100%); }
.paper-rip::before { content:""; position:absolute; inset:0; background-image:url('/assets/paper-fragment.webp'); background-size:cover; background-position:left bottom; opacity:.14; mix-blend-mode:multiply; }
.paper-rip > * { position:relative; }

.section-head { display:grid; grid-template-columns:1fr 2fr; gap:2rem; align-items:end; margin-bottom:clamp(3rem,6vw,6rem); }
.section-title { font-size:clamp(3rem,7vw,7.2rem); margin:0; }
.section-desc { max-width:52rem; margin:0 0 .8rem auto; color:var(--muted); font-size:clamp(1rem,1.35vw,1.2rem); }

/* current session */
.session-strip { display:grid; grid-template-columns:1.2fr .8fr; min-height:560px; border:1px solid var(--line-soft); background:rgba(19,17,13,.48); }
.session-media { overflow:hidden; position:relative; }
.session-media img { width:100%; height:100%; object-fit:cover; filter:saturate(.7) contrast(1.03); }
.session-info { padding:clamp(2rem,5vw,5rem); display:flex; flex-direction:column; justify-content:space-between; }
.session-info h3 { font-size:clamp(2.5rem,5vw,5rem); line-height:.92; margin:.8rem 0 1rem; letter-spacing:-.05em; }

/* cards */
.editorial-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,2rem); }
.card { position:relative; min-width:0; }
.card:nth-child(1) { grid-column:1 / span 7; }
.card:nth-child(2) { grid-column:8 / span 5; margin-top:12%; }
.card:nth-child(3) { grid-column:2 / span 5; margin-top:3%; }
.card:nth-child(4) { grid-column:7 / span 6; margin-top:8%; }
.card-image { aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line-soft); background:var(--ink-raised); position:relative; }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.card:hover .card-image img { transform:scale(1.02); }
.card-copy { display:grid; grid-template-columns:1fr auto; gap:1rem; margin-top:1rem; align-items:start; }
.card h3 { margin:0; font-size:clamp(1.35rem,2.2vw,2.2rem); letter-spacing:-.035em; }
.card .tag { color:var(--orange); font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; }
.card .excerpt { color:var(--muted); max-width:38rem; margin:.55rem 0 0; }

/* process */
.process { display:grid; grid-template-columns:minmax(240px,.55fr) minmax(0,1.45fr); gap:clamp(3rem,8vw,10rem); }
.process-sticky { position:sticky; top:8rem; height:max-content; }
.process-sticky h2 { font-size:clamp(3rem,6vw,6rem); margin:.4rem 0; }
.process-list { counter-reset:process; }
.process-step { min-height:48vh; padding:clamp(2rem,4vw,4rem) 0; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:2rem; align-content:start; }
.process-step::before { counter-increment:process; content:"0" counter(process); font-family:var(--mono); color:var(--orange); letter-spacing:.18em; }
.process-step h3 { font-size:clamp(2.2rem,5vw,5rem); margin:0; letter-spacing:-.055em; }
.process-step p { max-width:38rem; color:var(--muted); }

/* journal */
.journal-list { border-top:1px solid var(--line); }
.journal-row { display:grid; grid-template-columns:110px 1fr minmax(180px,300px); gap:2rem; align-items:center; padding:2rem 0; border-bottom:1px solid var(--line); transition:color .18s; }
.journal-row:hover { color:var(--orange); }
.journal-row h3 { margin:0; font-size:clamp(1.5rem,3vw,3rem); letter-spacing:-.04em; }
.journal-row p { margin:.5rem 0 0; color:var(--muted); }
.journal-thumb { aspect-ratio:16/9; object-fit:cover; width:100%; filter:grayscale(1); }

/* service rows */
.service-list { border-top:1px solid var(--line); }
.service-row { display:grid; grid-template-columns:80px 1fr 1fr auto; gap:2rem; align-items:center; padding:2rem 0; border-bottom:1px solid var(--line); }
.service-row h3 { margin:0; font-size:clamp(1.55rem,3vw,3rem); }
.service-row p { color:var(--muted); margin:0; }
.service-row .arrow { color:var(--orange); font-size:2rem; }

/* cmds */
.cmds { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(3rem,7vw,8rem); align-items:center; }
.cmds h2 { font-size:clamp(4rem,9vw,9rem); margin:0; color:var(--ink); letter-spacing:-.065em; line-height:.8; }
.cmds h2 .cmd-symbol { color:var(--orange); }
.cmds-form { display:grid; gap:1rem; max-width:560px; }
.field { width:100%; background:transparent; border:0; border-bottom:1px solid rgba(13,12,9,.45); color:var(--ink); padding:1rem 0; border-radius:0; }
.field::placeholder { color:rgba(13,12,9,.48); }
.cmds .btn { border-color:rgba(13,12,9,.4); color:var(--ink); justify-self:start; }
.form-note { font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; opacity:.65; }
.form-success { display:none; font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--ink); }
.form-success.show { display:block; }

/* footer */
.footer { padding:6rem var(--page) 3rem; border-top:1px solid var(--line); }
.footer-grid { max-width:1680px; margin:auto; display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:4rem; }
.footer-big { font-size:clamp(3rem,7vw,7rem); letter-spacing:-.065em; line-height:.8; margin:0; }
.footer-links { display:grid; align-content:start; gap:.65rem; font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.15em; color:var(--muted); }
.footer-bottom { max-width:1680px; margin:5rem auto 0; display:flex; justify-content:space-between; gap:1rem; color:var(--muted); font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; }

/* listing / article */
.page-hero { padding:clamp(10rem,16vw,14rem) 0 5rem; border-bottom:1px solid var(--line); }
.page-hero h1 { font-size:clamp(4rem,10vw,10rem); margin:0; }
.page-hero p { max-width:48rem; font-size:1.15rem; color:var(--muted); }
.filterbar { display:flex; gap:.6rem; flex-wrap:wrap; margin:2rem 0 4rem; }
.filter { background:transparent; color:var(--muted); border:1px solid var(--line); padding:.55rem .75rem; font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; cursor:pointer; }
.filter.active,.filter:hover { background:var(--orange); color:var(--ink); border-color:var(--orange); }
.index-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,6rem); }
.index-card .card-image { aspect-ratio:16/9; }
.article { padding:clamp(10rem,16vw,14rem) 0 7rem; }
.article-head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:4rem; align-items:end; }
.article h1 { font-size:clamp(4rem,9vw,9rem); line-height:.85; letter-spacing:-.065em; margin:1rem 0; }
.article-cover { margin:5rem 0; max-height:72vh; width:100%; object-fit:cover; }
.prose { width:min(760px,100%); margin:0 auto; font-size:clamp(1.08rem,1.4vw,1.25rem); }
.prose p { margin:0 0 1.6em; color:rgba(237,225,211,.84); }

/* create */
.create-stage { min-height:100svh; position:relative; overflow:hidden; display:grid; place-items:center; }
#create-canvas { position:absolute; inset:0; width:100%; height:100%; }
.create-ui { position:relative; z-index:2; text-align:center; pointer-events:none; padding:2rem; }
.create-ui h1 { font-size:clamp(4rem,12vw,12rem); margin:0; }
.create-ui p { max-width:38rem; margin:1.5rem auto; color:var(--muted); }

/* reveal + cursor + transition */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease), transform .65s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.mask-reveal { clip-path:inset(0 100% 0 0); transition:clip-path .8s var(--ease); }
.mask-reveal.in { clip-path:inset(0 0 0 0); }
.cursor { position:fixed; width:22px; height:22px; border:1px solid var(--paper); border-radius:50%; z-index:200; pointer-events:none; transform:translate(-50%,-50%); mix-blend-mode:difference; opacity:0; transition:width .18s,height .18s,opacity .18s; }
.cursor.active { opacity:1; }
.cursor.link { width:42px; height:42px; }
.page-wipe { position:fixed; inset:0; z-index:110; background:var(--ink); transform:translateX(-101%); pointer-events:none; }
.page-wipe.go { animation:wipe .62s var(--ease) forwards; }
.page-wipe::after { content:""; position:absolute; top:0; right:0; width:5px; height:100%; background:var(--orange); }
@keyframes wipe { 0%{transform:translateX(-101%)} 48%,58%{transform:translateX(0)} 100%{transform:translateX(101%)} }

/* responsive */
@media (max-width: 980px) {
  .navlinks { display:none; }
  .header-actions .live-label { display:none; }
  .menu-btn { display:block; }
  .hero-grid { grid-template-columns:1fr; padding-bottom:4rem; }
  .hero-art { min-height:58vw; }
  .photo-window { inset:0 5% auto 0; }
  .shadow-card { width:28%; }
  .section-head { grid-template-columns:1fr; }
  .section-desc { margin-left:0; }
  .session-strip { grid-template-columns:1fr; }
  .session-media { min-height:420px; }
  .process { grid-template-columns:1fr; }
  .process-sticky { position:relative; top:0; }
  .process-step { min-height:auto; }
  .service-row { grid-template-columns:50px 1fr auto; }
  .service-row p { grid-column:2 / -1; }
  .cmds { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid > :first-child { grid-column:1/-1; }
  .article-head { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  :root { --page:1.2rem; --section:5rem; }
  .site-header { padding:.8rem var(--page); }
  .brand-word { font-size:1.05rem; }
  .hero { align-items:start; }
  .hero-grid { padding-top:3rem; }
  .hero-title .line > span { font-size:clamp(4rem,18vw,7rem); }
  .hero-art { min-height:105vw; }
  .photo-window img { aspect-ratio:4/3; }
  .annotation { top:8%; right:1%; }
  .shadow-card { width:42%; right:4%; }
  .vertical-meta { right:-.3rem; }
  .editorial-grid { display:block; }
  .card { margin:0 0 3rem !important; }
  .journal-row { grid-template-columns:1fr; gap:.7rem; }
  .journal-thumb { order:-1; }
  .service-row { grid-template-columns:38px 1fr auto; gap:1rem; }
  .index-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-grid > :first-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
}
@media (pointer: coarse) { .cursor { display:none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .loader { display:none; }
  .hero-title .line > span { transform:none !important; }
  .reveal { opacity:1; transform:none; }
  .mask-reveal { clip-path:none; }
  .cursor { display:none; }
}

/* Typography correction: explicit line boxes and readable spacing. */
.hero-copy { min-width:0; }
.hero-title { display:grid; gap:.08em; font-size:clamp(3rem,6.2vw,6.5rem); line-height:1.08; letter-spacing:-.025em; }
.hero-title .line { overflow:visible; padding:0; line-height:1.08; }
.hero-title .line > span { font-size:inherit; line-height:inherit; transform:none; }
.hero-title .line:not(:first-child) > span { font-family:var(--sans); font-weight:800; color:var(--orange); letter-spacing:-.025em; }
.hero-title .display { line-height:1.08; letter-spacing:0; }
.hero-index { display:none; }
.page-hero h1 { font-family:var(--sans); font-weight:800; line-height:1.1; letter-spacing:-.025em; margin:.2em 0; }
.editorial-grid > p, .index-grid > p { grid-column:1 / -1; max-width:48rem; margin:0; }
.paper-rip::before { background-image:none; }
.cmds h2 { line-height:1.1; letter-spacing:-.025em; }
.cmds-form { min-width:0; width:100%; }
.cmds-form label { display:grid; gap:.5rem; }
.footer-big { line-height:1.08; letter-spacing:-.035em; }
@media (max-width:980px) { .hero-title { font-size:clamp(3rem,10vw,6rem); } }
@media (max-width:700px) {
 .hero-title { font-size:clamp(2.6rem,12vw,5rem); }
 .hero-title .line > span { font-size:inherit; }
 .cmds h2 { font-size:clamp(2.75rem,12vw,5rem); }
 .header-actions > .btn { display:none; }
 .navbar { gap:1rem; }
}