/* ============================================================
   darienbathalter.com; v3 "INK"
   Ink on black, and the work. The hand lettering is the only voice;
   everything set in type stays quiet and out of its way.
   One text family, sentence case, no labels that aren't content.
   ============================================================ */

:root{
  --bg:#0B0C0C;
  --ink:#EFEEEA;
  --soft:#B4B5AF;
  --muted:#7B7D77;
  --line:rgba(255,255,255,.11);
  --line-2:rgba(255,255,255,.28);
  --green:#3BE07E;        /* the one accent: the primary button, hover, focus */
  --gold:#F4C430;         /* Card Knight only. Nowhere else. */

  --sans:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;

  --container:1180px;
  --pad:28px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--ink);background:var(--bg);
  font-size:17px;line-height:1.55;overflow-x:hidden;position:relative;min-height:100vh;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* ---- layout ---- */
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad);position:relative}
section{position:relative;padding:112px 0 0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

h1,h2,h3,h4{font-weight:650;line-height:1.15;letter-spacing:-.015em;color:var(--ink)}
p{color:var(--soft)}

::selection{background:var(--green);color:#04140A}

.shead{margin-bottom:40px}

/* ---- nav: the name sits dead centre, two links either side ---- */
.nav{position:sticky;top:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease)}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--line)}
/* minmax(0,1fr) either side, so unequal link groups can't drag the name off centre */
.nav-inner{max-width:var(--container);margin:0 auto;padding:16px var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:20px}
.brand{display:flex;align-items:center;justify-self:center;grid-column:2;grid-row:1}
.brand-logo{height:28px;width:auto;display:block}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links.left{justify-self:start;grid-column:1}
.nav-links.right{justify-self:end;grid-column:3}
.nav-links a{font-size:.95rem;font-weight:500;color:var(--soft);transition:color .18s}
.nav-links a:hover{color:var(--green)}

/* ---- hero ---- */
.hero{padding:76px 0 0}
.hero-grid{display:grid;grid-template-columns:1fr 300px;gap:72px;align-items:center}
/* the mark is stacked twice, each copy clipped to one line of lettering,
   so the two lines can be painted on one after the other */
.hero-mark{position:relative;width:min(620px,100%);margin-bottom:34px}
.hero-mark img{width:100%;height:auto}
.hero-mark .l1{clip-path:inset(0 0 56.7% 0)}
.hero-mark .l2{position:absolute;inset:0;clip-path:inset(43.3% 0 0 0)}
.hero .lead{font-size:1.3rem;line-height:1.4;color:var(--soft);max-width:30ch;margin-bottom:32px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.portrait img.photo{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.portrait .name-mark{width:190px;height:auto;margin-top:16px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:.8rem 1.35rem;font-family:var(--sans);font-size:.95rem;
  font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn svg{width:14px;height:14px}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--green);color:#04140A}
.btn-primary:hover{background:#fff}
.btn-ghost{color:var(--ink);border-color:var(--line-2);background:transparent}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}

/* ---- featured bands. These are dark rooms on the paper; their colours are
   their own and never follow the page theme. ---- */
.feature{position:relative;overflow:hidden;isolation:isolate;background:#06080b;color:#fff;outline:1px solid var(--line);outline-offset:-1px}
.feature .fbg{position:absolute;inset:0;z-index:-3;object-fit:cover;width:100%;height:100%;opacity:.6}
.ftrailer{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;pointer-events:none}
.feature:hover .ftrailer{opacity:.74}
.feature::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(6,8,11,.95) 0%,rgba(6,8,11,.8) 44%,rgba(6,8,11,.3) 100%),linear-gradient(0deg,rgba(6,8,11,.6),transparent 42%)}
.feature-grid{display:grid;grid-template-columns:1fr .95fr;align-items:center;min-height:350px;position:relative;z-index:1}
.feature-body{padding:38px 48px 36px}
.feature .logo{width:min(290px,76%);margin-bottom:16px;filter:drop-shadow(0 4px 20px rgba(0,0,0,.6))}
.feature h3{color:#fff}
.feature p{color:#d5d9dc;margin-bottom:24px;max-width:38ch;font-size:1.05rem}
.feature-actions{display:flex;gap:12px;flex-wrap:wrap}
.feature .btn-primary{background:var(--gold);color:#231a05}
.feature .btn-primary:hover{background:#ffd85c;color:#231a05}
.feature .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.feature .btn-ghost:hover{border-color:#fff}
.feature-art{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:300px}
.spincard{display:block;width:clamp(200px,26vw,290px);height:clamp(200px,26vw,290px);filter:drop-shadow(0 14px 34px rgba(0,0,0,.55));transform:translateX(-40px)}
.motes{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.mote{position:absolute;bottom:-8px;border-radius:50%;background:radial-gradient(circle,rgba(255,231,150,.95),rgba(255,231,150,0));animation:floatUp linear infinite}
@keyframes floatUp{0%{transform:translateY(0);opacity:0}12%{opacity:.85}88%{opacity:.4}100%{transform:translateY(-430px);opacity:0}}
.feature.ck{margin-top:24px}

/* mascot (unchanged behaviour) */
.ck-mascot-wrap{position:absolute;bottom:-16px;right:76px;line-height:0;cursor:pointer;z-index:4;transform-origin:bottom center}
.ck-mascot{display:block;height:138px;width:auto;transform-origin:bottom center;
  animation:slime-bob 2.6s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))}
@keyframes slime-bob{0%,100%{transform:translateY(0) scaleY(1) scaleX(1)}50%{transform:translateY(-4px) scaleY(1.05) scaleX(.97)}}
.ck-mascot-wrap:hover .ck-mascot{animation:slime-hop .5s ease}
@keyframes slime-hop{0%{transform:translateY(0) scaleY(1)}30%{transform:translateY(3px) scaleY(.82) scaleX(1.12)}60%{transform:translateY(-9px) scaleY(1.12) scaleX(.9)}100%{transform:translateY(0) scaleY(1)}}
.mascot-bubble{position:fixed;z-index:80;max-width:230px;font-family:var(--sans);font-size:.9rem;color:#fff;
  padding:.62em 1em;background:#0c1014;border:1px solid rgba(255,255,255,.2);
  opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;pointer-events:none}
.mascot-bubble.show{opacity:1;transform:translateY(0)}
.mascot-bubble::after{content:"";position:absolute;bottom:-6px;left:24px;width:10px;height:10px;background:inherit;
  border-right:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);transform:rotate(45deg)}

/* the Suna twins; each card wears its own site's skin: an always-on loop
   under the product's vertical gradient, violet for the toy, azure for the engine. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.feature.suna{--sa:#b07df0;--sbg:12,9,19;background:rgb(var(--sbg))}
.feature.suna-eng{--sa:#4ab3f2;--sbg:10,14,22}
.feature.suna .strailer{position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;opacity:.66;filter:saturate(1.15)}
.feature.suna::before{background:linear-gradient(180deg,rgba(var(--sbg),.22) 0%,rgba(var(--sbg),.5) 52%,rgb(var(--sbg)) 97%)}
.suna-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-end;min-height:300px;padding:44px 32px 30px}
.suna-mark{width:56px;height:auto;margin-bottom:12px;
  filter:drop-shadow(0 0 22px rgba(0,0,0,.6)) drop-shadow(0 0 26px color-mix(in srgb,var(--sa) 45%,transparent))}
.suna-body h3{font-size:clamp(1.5rem,2.4vw,1.9rem);font-weight:700;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.feature.suna p{color:#dedbe6;max-width:none;font-size:1rem;margin:12px 0 20px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.feature.suna .btn-primary{background:var(--sa);color:#140a20}
.feature.suna .btn-primary:hover{background:color-mix(in srgb,var(--sa) 80%,white);color:#140a20}

/* HandWare 68k: black, paper text, a pixel starfield, the six-colour stripe. */
.hw68k-bar{display:block;position:relative;margin-bottom:24px;background:#000;color:#E9E3D2;overflow:hidden;outline:1px solid var(--line);outline-offset:-1px}
/* two star layers drifting upward at different speeds; nearer layer is bigger and faster */
.hw68k-bar::before,.hw68k-bar::after{content:"";position:absolute;left:0;right:0;top:0;height:200%;
  background:url('assets/hw68k-stars.png') repeat;background-size:220px 220px;
  image-rendering:pixelated;pointer-events:none;z-index:0}
.hw68k-bar::before{opacity:.45;animation:hw-drift 64s linear infinite}
.hw68k-bar::after{opacity:.9;background-size:352px 352px;animation:hw-drift-near 34s linear infinite}
@keyframes hw-drift{from{transform:translateY(0)}to{transform:translateY(-220px)}}
@keyframes hw-drift-near{from{transform:translateY(0)}to{transform:translateY(-352px)}}
.hw-rainbow{display:block;position:relative;z-index:1;height:6px;background:linear-gradient(90deg,
  #61BB46 0 16.66%,#FDB827 0 33.33%,#F5821F 0 50%,#E03A3E 0 66.66%,#963D97 0 83.33%,#009DDC 0 100%)}
.hw-inner{position:relative;z-index:1;display:flex;align-items:center;gap:28px;padding:20px 32px}
.hw-palmer{width:60px;height:60px;image-rendering:pixelated;flex:none}
.hw-text{flex:1;min-width:0}
.hw-text h3{font-weight:700;font-size:clamp(1.5rem,2.4vw,1.9rem);margin:0 0 6px;color:#E9E3D2}
.hw-text p{color:#b5af9f;font-size:1.05rem;max-width:46ch;margin:0 0 14px}
.hw-btn{display:inline-block;font-size:.95rem;font-weight:700;color:#E9E3D2;background:#000;
  border:2px solid #E9E3D2;border-radius:9px;box-shadow:0 0 0 1px #000 inset,2px 2px 0 #E9E3D2;padding:7px 18px;
  transition:background .18s,color .18s}
.hw-actions{display:flex;gap:12px;flex-wrap:wrap}
/* the whole bar opens the project; the video button sits above that hit area */
.hw-main::after{content:"";position:absolute;inset:0;z-index:1}
.hw-video{position:relative;z-index:2;box-shadow:none}
.hw68k-bar:hover .hw-main,.hw-video:hover{background:#E9E3D2;color:#000}
.hw68k-bar:has(.hw-video:hover) .hw-main{background:#000;color:#E9E3D2}
.hw-shot{flex:none;width:262px;border:2px solid #E9E3D2;display:block;line-height:0}
.hw-shot img{width:100%;height:auto;display:block}

/* ---- work lanes: an index, not a wall of tiles. A cropped swatch, the name,
   one line. ---- */
.lane{margin-top:64px}
.shead + .lane{margin-top:0}
.lane-head{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.lane-head .rule{flex:1;height:1px;background:var(--line)}

.row{display:grid;grid-template-columns:176px minmax(0,1fr) minmax(0,1.55fr) 18px;column-gap:34px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line);color:inherit}
/* the swatch is the first screenshot pushed in close, so you see the program, not its window */
.thumb{aspect-ratio:16/10;position:relative;overflow:hidden;background:#0d0e10}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;
  transform:scale(1.6);transform-origin:38% 42%;transition:transform .8s var(--ease)}
.thumb img:first-child{display:block}
.row:hover .thumb img{transform:scale(1.72)}
.row h4{font-size:1.3rem;letter-spacing:-.02em;transition:color .2s,transform .35s var(--ease)}
.row .name{min-width:0}
.row .kind{display:block;margin-top:3px;font-size:.95rem;color:var(--muted);transition:transform .35s var(--ease)}
.row:hover .kind{transform:translateX(6px)}
.row .oneline{font-size:1rem;line-height:1.45;color:var(--soft)}
.row .go{width:18px;height:18px;color:var(--muted);transition:color .2s,transform .35s var(--ease)}
.row:hover h4{color:var(--green);transform:translateX(6px)}
.row:hover .go{color:var(--green);transform:translate(3px,-3px)}

/* ---- art: devotional triptych + scrolling rows ---- */
.devo{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:24px;align-items:center}
.panel{position:relative}
.panel .frame{position:relative;overflow:hidden;background:#0d0e10;aspect-ratio:var(--ar,3/4);cursor:col-resize}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel .stages img{opacity:0;transition:opacity .12s linear}
.panel .stages img.on{opacity:1}
/* stage ticks; the affordance that says "there is more in here" */
.ticks{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;display:flex;gap:4px;opacity:.5;transition:opacity .25s}
.panel:hover .ticks{opacity:1}
.ticks span{flex:1;height:2px;background:rgba(255,255,255,.35);transition:background .15s}
.ticks span.on{background:var(--green)}
.panel figcaption{padding:13px 0 0;display:flex;flex-direction:column;gap:1px}
.panel figcaption strong{font-size:1.05rem;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.panel figcaption .meta{font-size:.92rem;color:var(--muted)}
.devo-note{margin-top:26px;font-size:.95rem;color:var(--muted)}

/* full-bleed scrolling rows */
.rows{margin-top:84px;display:flex;flex-direction:column;gap:52px}
#design .rows{margin-top:0}
.row-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.row-head .rule{flex:1;height:1px;background:var(--line)}
.strip{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;cursor:grab}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing}
.track{display:flex;gap:14px;width:max-content;padding:6px 0;
  padding-left:max(var(--pad),calc((100vw - var(--container))/2 + var(--pad)));padding-right:var(--pad)}
.track img{height:250px;width:auto;object-fit:cover;transition:transform .35s var(--ease)}
.track img:hover{transform:translateY(-4px)}

/* ---- contact ---- */
#contact{padding-bottom:120px}
.contact .h2-mark img{width:min(640px,100%);height:auto}
.mailto{display:inline-block;margin-top:34px;font-size:clamp(1.35rem,3.2vw,2.1rem);font-weight:500;letter-spacing:-.02em;
  color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1.5px;
  text-underline-offset:8px;transition:color .2s,text-decoration-color .2s}
.mailto:hover{color:var(--green);text-decoration-color:var(--green)}

footer{border-top:1px solid var(--line);padding:26px 0}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.92rem;color:var(--muted)}
.fnav{display:flex;gap:22px;flex-wrap:wrap}
.fnav a{color:var(--soft);transition:color .18s}
.fnav a:hover{color:var(--ink)}
footer p{color:var(--muted)}

/* ---- motion. Sections rise in once; lettering is painted on, left to right.
   All of it is gated on .js, so the page is complete without script. ---- */
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none;
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js .wipe{-webkit-mask-image:linear-gradient(100deg,#000 44%,transparent 56%);mask-image:linear-gradient(100deg,#000 44%,transparent 56%);
  -webkit-mask-size:270% 100%;mask-size:270% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.js .wipe.in{-webkit-mask-position:0 0;mask-position:0 0;
  transition:-webkit-mask-position 1.15s cubic-bezier(.55,0,.2,1) var(--d,0s),mask-position 1.15s cubic-bezier(.55,0,.2,1) var(--d,0s)}
.js .hero-mark .wipe.in{transition-duration:.95s}

/* ---- responsive ---- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .portrait{max-width:280px}
  .feature-grid{grid-template-columns:1fr}
  .feature-art{min-height:230px;order:-1}
  .spincard{transform:none}
  .ftrailer{display:none}
  .row{grid-template-columns:150px minmax(0,1fr) minmax(0,1.3fr) 18px;column-gap:22px}
  .ck-mascot-wrap{right:24px;bottom:-10px}
  .ck-mascot{height:116px}
}
@media (max-width:880px){
  .duo{grid-template-columns:1fr}
  .suna-body{min-height:260px}
  .hw-inner{flex-wrap:wrap}
  .hw-shot{width:100%;order:3}
  .hw-palmer{width:46px;height:46px}
  .devo{grid-template-columns:1fr;gap:30px}
  .panel .frame{aspect-ratio:4/5}
  .rows{margin-top:60px}
  .track img{height:180px}
}
@media (max-width:640px){
  :root{--pad:20px}
  section{padding-top:80px}
  .hero{padding-top:44px}
  .hero .lead{font-size:1.15rem}
  .feature-body{padding:32px 24px}
  .suna-body{padding:36px 22px 24px}
  .hw-inner{padding:24px}
  /* phone nav: the name on its own line, the four links under it */
  .nav-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;padding:12px var(--pad)}
  .brand{order:-1;flex:0 0 100%;justify-content:center}
  .brand-logo{height:24px}
  .nav-links{gap:22px}
  .nav-links a{font-size:.9rem}
  .row{grid-template-columns:120px minmax(0,1fr);column-gap:16px;row-gap:2px;padding:14px 0}
  .row .thumb{grid-row:1 / span 2}
  .row h4{font-size:1.1rem}
  .row .name{align-self:end}
  .row .kind{font-size:.88rem;margin-top:1px}
  .row .oneline{font-size:.93rem;align-self:start}
  .row .go{display:none}
  /* the wide marks carry inline heights; on a phone they fill the row instead.
     !important beats the inline height. */
  .shead .h2-mark img{width:auto !important;height:auto !important;max-width:100%;max-height:44px;object-fit:contain;object-position:left center}
  .h3-mark img{max-width:100%;object-fit:contain;object-position:left center}
  #contact{padding-bottom:84px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .mote,.ck-mascot,.hw68k-bar::before,.hw68k-bar::after{animation:none}
  .feature.suna .strailer{display:none}
  .js .rv,.js .wipe{opacity:1;transform:none;-webkit-mask-image:none;mask-image:none;transition:none}
}