/* Dialogs Labs skin. Source of truth for tokens and components: /DESIGN.md.
   Ported from design/v2-drench.html (variant "Drench"). */
/* ---------------------------------------------------------------- tokens */
:root{
  /* the drench */
  --ink:        oklch(0.262 0.098 264);
  --ink-deep:   oklch(0.228 0.092 266);
  --panel-cool: oklch(0.268 0.100 249);
  --panel-warm: oklch(0.266 0.101 283);
  --panel-far:  oklch(0.252 0.094 302);   /* private, a different hue */
  --plate-warm: oklch(0.335 0.105 283);   /* plates behind screenshots: one step lighter, hue-shifted */
  --plate-cool: oklch(0.335 0.105 249);

  --text:       oklch(0.936 0.022 268);
  --muted:      oklch(0.782 0.041 268);
  --faint:      oklch(0.718 0.045 268);

  /* the one secondary role */
  --paper:      oklch(0.955 0.036 88);

  --rule:       oklch(0.415 0.072 266);
  --rule-soft:  oklch(0.345 0.070 266);

  --pad: clamp(1.25rem, 4.5vw, 5.5rem);
  --measure: 66ch;

  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --quint: cubic-bezier(0.22, 1, 0.36, 1);

  --f-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:clamp(1rem, 0.94rem + 0.28vw, 1.14rem);
  line-height:1.68;                /* light-on-dark gets extra leading */
  font-weight:350;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

:where(a,button,summary):focus-visible{
  outline:2px solid var(--paper);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ max-width:1360px; margin-inline:auto; padding-inline:var(--pad); }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---------------------------------------------------------------- header */
.top{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  border-bottom:1px solid var(--rule-soft);
}
.top::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px;
  background:linear-gradient(var(--ink), transparent); pointer-events:none;
}
.top .wrap{ position:relative; }
.top-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:0.85rem 0.7rem;
}
.lockup{ display:flex; align-items:center; gap:0.7rem; text-decoration:none; }
.lockup img{ width:clamp(96px,15vw,124px); opacity:0.96; }
.lockup .slash{
  width:1px; height:1.1rem; background:var(--rule); display:block;
}
.lockup .labs{
  font-family:var(--f-display);
  font-weight:700; font-size:clamp(1rem,3.2vw,1.28rem);
  letter-spacing:-0.015em; line-height:1;
  font-variation-settings:"opsz" 20;
}
.home{
  font-size:clamp(0.76rem,2.4vw,0.86rem);
  letter-spacing:0.045em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:2px; white-space:nowrap;
  transition:color .4s var(--expo), border-color .4s var(--expo);
}
.home:hover{ color:var(--paper); border-color:var(--paper); }

/* stage strip */
.strip{ padding-bottom:0.7rem; }
.strip ol{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:clamp(0.5rem,2.2vw,1.6rem);
}
.strip li{ flex:1 1 0; min-width:0; }
.strip a{
  display:flex; align-items:center; gap:0.5rem;
  text-decoration:none; color:var(--faint);
  font-size:clamp(0.7rem,1.6vw,0.78rem);
  letter-spacing:0.09em; text-transform:uppercase; font-weight:500;
  padding-block:0.3rem;
  transition:color .5s var(--expo);
}
.strip .glyph{
  flex:none; width:8px; height:8px; border:1.5px solid currentColor;
  border-radius:1px; transition:background-color .5s var(--expo), transform .5s var(--expo);
}
.strip a:hover{ color:var(--text); }
.strip .is-current a{ color:var(--paper); }
.strip .is-current .glyph{ background:var(--paper); transform:rotate(45deg); }
.strip-now{ display:none; }   /* kept for JS; words are visible at every width now */

@media (max-width:44rem){
  .top-row{ padding-block:0.6rem 0.2rem; }
  .lockup img, .lockup .logo{ width:92px; }
  .lockup .labs{ font-size:1.12rem; }
  .home{ display:none; }               /* dialogs.com link lives in the footer on phones */
  /* phones: the strip becomes a row of labelled tabs that scrolls sideways.
     Words are readable (13px), the bar sits under the word like a tab
     underline, and the row fades at the right edge to say "more" */
  .strip{ position:relative; padding-bottom:0; margin-inline:calc(-1 * var(--pad)); }
  .strip ol{
    gap:0; padding-inline:var(--pad); scroll-padding-inline:var(--pad);
    overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .strip ol::-webkit-scrollbar{ display:none; }
  .strip li{ flex:0 0 auto; scroll-snap-align:start; }
  .strip a{
    display:flex; flex-direction:column; align-items:stretch; gap:0.45rem;
    padding:0.55rem 0.95rem 0 0.95rem;
    font-size:0.8125rem; letter-spacing:0.08em; line-height:1;
    color:var(--muted); white-space:nowrap;
  }
  .strip li:first-child a{ padding-left:0; }
  .strip .w{ order:1; }
  .strip .glyph{
    order:2; width:100%; height:3px; border:0; border-radius:0;
    transform:none; background:var(--rule-soft);
  }
  .strip .is-current a{ color:var(--paper); }
  .strip .is-current .glyph{ transform:none; background:var(--paper); }
  .strip::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:2.5rem;
    background:linear-gradient(90deg, transparent, var(--ink)); pointer-events:none;
  }
}

/* ---------------------------------------------------------------- hero */
.hero{ padding-block:clamp(3.5rem,13vh,9rem) clamp(3rem,10vh,7rem); }
.hero h1{
  font-family:var(--f-display);
  margin:0;
  font-weight:700;
  font-size:clamp(2.75rem, 8.4vw, 8.5rem);
  line-height:0.94;
  letter-spacing:-0.038em;
  font-variation-settings:"opsz" 96, "wdth" 96;
  max-width:16ch;
  text-wrap:balance;
}
.hero h1 .b{ color:var(--paper); display:block; }
.hero .word{ display:inline-block; }
.hero p{
  margin:clamp(2rem,5vh,3.25rem) 0 0;
  max-width:var(--measure);
  color:var(--muted);
  font-size:clamp(1.05rem,0.98rem+0.5vw,1.32rem);
  line-height:1.65;
}
.hero .rule{
  margin-top:clamp(2.5rem,7vh,4.5rem);
  height:1px; background:var(--rule-soft); border:0;
}

/* ---------------------------------------------------------------- chapter */
.chapter{ padding-block:clamp(3.5rem,11vh,8rem) 0; scroll-margin-top:7rem; }
.chapter-head{
  display:grid; gap:clamp(0.75rem,2vw,3rem);
  grid-template-columns:1fr;
  align-items:end;
  padding-bottom:clamp(2rem,6vh,4rem);
}
@media (min-width:60rem){
  .chapter-head{ grid-template-columns:minmax(0,1fr) 30ch; }
}
.stage-word{
  font-family:var(--f-display);
  margin:0;
  font-weight:600;
  font-size:clamp(3.4rem, 13.5vw, 12rem);
  line-height:0.82;
  letter-spacing:-0.045em;
  font-variation-settings:"opsz" 96, "wdth" 88;
  color:var(--text);
  transition:color .5s var(--expo);
}
.chapter.now .stage-word{ color:var(--paper); }
.stage-blurb{
  margin:0; color:var(--muted);
  font-size:clamp(0.95rem,0.9rem+0.25vw,1.06rem);
  line-height:1.55; max-width:34ch;
  padding-bottom:0.4rem;
}
.stage-blurb .n{
  display:block; margin-top:0.6rem;
  font-size:0.78rem; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--faint);
}

/* ---------------------------------------------------------------- feature */
.feature{
  display:grid; gap:clamp(1.75rem,4vw,3.5rem);
  align-items:center;
  padding-block:clamp(2.5rem,8vh,6rem);
  grid-template-columns:1fr;
}
@media (min-width:64rem){
  .feature{
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    min-height:80vh;
    padding-block:clamp(3rem,8vh,6.5rem);
  }
  .feature.flip{ grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); }
  .feature.flip > .shot{ order:2; }
  .feature.flip > .fmeta{ order:1; }
  /* the 3D push lives on a plate behind the shot; the screenshot stays square */
  .feature.push-a .shot::before{ transform:rotate(-1.6deg) translate(-1.2%, -3%); }
  .feature.push-b .shot::before{ transform:rotate(1.8deg) translate(1.4%, 3%); }
  .feature.push-c .shot::before{ transform:rotate(-2.2deg) translate(1%, 2%); }
  .feature.push-b .fmeta{ padding-top:3rem; }
  .feature.push-a .shot{ margin-top:-0.75rem; }
  .feature.push-b .shot{ margin-top:0.5rem; }
}
.shot{ min-width:0; position:relative; isolation:isolate; }
.shot::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--plate-warm); border:1px solid var(--rule);
  transform:none;
}
.feature.flip .shot::before{ background:var(--plate-cool); }
.shot a,.shot .plate{
  display:block; overflow:hidden;
  border:1px solid var(--rule-soft);
  background:var(--panel-cool);
  box-shadow:0 2.5rem 5rem -1.5rem oklch(0.14 0.07 266 / 0.72);
  transition:border-color .6s var(--expo), box-shadow .6s var(--expo);
}
.shot a:hover{ border-color:var(--paper); }
.shot img{ width:100%; aspect-ratio:1280/800; object-fit:cover; }

.fmeta{ min-width:0; }
.fmeta h3{
  font-family:var(--f-display);
  margin:0 0 0.6rem;
  font-weight:700;
  font-size:clamp(1.85rem,1.4rem+2.2vw,3.1rem);
  line-height:1.02; letter-spacing:-0.03em;
  font-variation-settings:"opsz" 48;
  color:var(--paper);
}
.fmeta h3 a{ text-decoration:none; }
.fmeta h3 a:hover{ text-decoration:underline; text-underline-offset:0.14em; text-decoration-thickness:1px; }
.fmeta .line{
  margin:0 0 1.5rem; max-width:38ch;
  color:var(--text); font-size:clamp(1.02rem,0.96rem+0.3vw,1.18rem);
  line-height:1.6;
}
.facts{
  margin:0 0 1.75rem; padding:1rem 0 0;
  border-top:1px solid var(--rule-soft);
  display:grid; grid-template-columns:auto 1fr; gap:0.35rem 1.5rem;
  font-size:0.86rem;
}
.facts dt{ color:var(--faint); letter-spacing:0.08em; text-transform:uppercase; font-size:0.78rem; padding-top:0.15rem; }
.facts dd{ margin:0; color:var(--muted); }
.visit{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--f-display); font-weight:600;
  font-size:0.98rem; letter-spacing:-0.005em;
  text-decoration:none; color:var(--ink-deep);
  background:var(--paper); border:1px solid var(--paper);
  padding:0.62rem 1.15rem;
  transition:background-color .5s var(--expo), color .5s var(--expo), border-color .5s var(--expo),
             transform .4s var(--expo), box-shadow .4s var(--expo);
}
/* lifted on touch only: flat at rest, a 1px rise and a short shadow on hover/focus */
.visit:hover,.visit:focus-visible{
  background:var(--text); border-color:var(--text);
  transform:translateY(-1px); box-shadow:0 0.6rem 1.4rem -0.6rem oklch(0.14 0.07 266 / 0.6);
}
.visit .arw{ transition:transform .5s var(--expo); }
.visit:hover .arw{ transform:translate(2px,-2px); }

/* the non-photographic plate for Content Search */
.plate{ padding:0; background:oklch(0.205 0.088 256); }
.plate svg{ width:100%; height:auto; display:block; }

/* ---------------------------------------------------------------- compact */
.compact{
  list-style:none; margin:0; padding:clamp(1.5rem,4vh,2.5rem) 0 0;
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.compact li + li{ border-top:1px solid var(--rule-soft); }
.compact .row{
  display:grid; gap:0.85rem 1.5rem;
  grid-template-columns:88px minmax(0,1fr);
  align-items:center;
  padding-block:1.35rem;
  text-decoration:none;
}
@media (min-width:52rem){
  .compact .row{ grid-template-columns:156px minmax(0,24ch) minmax(0,1fr) auto; padding-block:1.7rem; }
}
.thumb{
  border:1px solid var(--rule-soft); overflow:hidden;
  background:var(--panel-warm); aspect-ratio:1280/800;
  transition:border-color .5s var(--expo);
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.blank{ background:oklch(0.205 0.088 256); }
.thumb.blank svg{ width:100%; height:100%; display:block; }
.compact .nm{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.12rem,1.02rem+0.5vw,1.45rem);
  letter-spacing:-0.022em; line-height:1.16;
  font-variation-settings:"opsz" 24;
}
.compact .ol{ color:var(--muted); font-size:0.95rem; line-height:1.5; grid-column:2; }
@media (min-width:52rem){ .compact .ol{ grid-column:auto; } }
.compact .mt{
  color:var(--faint); font-size:0.78rem; letter-spacing:0.08em;
  text-transform:uppercase; grid-column:2; line-height:1.5;
}
@media (min-width:52rem){ .compact .mt{ grid-column:auto; text-align:right; max-width:26ch; justify-self:end; } }
a.row:hover .nm{ text-decoration:underline; text-underline-offset:0.16em; text-decoration-thickness:1px; }
a.row:hover .thumb{ border-color:var(--paper); }
.compact .nolink .nm{ color:var(--muted); }

/* ---------------------------------------------------------------- private */
.vault{ padding-block:clamp(2rem,6vh,4rem) 0; }
.silhouettes{
  list-style:none; margin:0 0 clamp(2rem,5vh,3rem); padding:0;
  display:grid; gap:1px; background:var(--rule-soft);
  border:1px solid var(--rule-soft);
  grid-template-columns:1fr;
}
@media (min-width:46rem){ .silhouettes{ grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); } }
.silhouettes li{
  background:var(--panel-far);
  padding:clamp(1.4rem,3vw,2.2rem);
  min-height:clamp(9rem,20vh,13rem);
  display:flex; flex-direction:column; justify-content:space-between; gap:1.5rem;
}
.silhouettes .lock{
  width:22px; height:26px; color:var(--faint); flex:none;
}
.silhouettes .bars{ display:grid; gap:0.55rem; margin-bottom:1.05rem; }
.silhouettes .bars i{ display:block; height:0.65rem; background:var(--rule-soft); border-radius:1px; }
.silhouettes .cap{ margin:0; color:var(--muted); font-size:0.92rem; line-height:1.5; }
.portal{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family:var(--f-display); font-weight:600; font-size:1.02rem;
  text-decoration:none; color:var(--text); background:transparent;
  border:1px solid var(--rule);
  padding:0.7rem 1.3rem;
  transition:color .4s var(--expo), border-color .4s var(--expo),
             transform .4s var(--expo), box-shadow .4s var(--expo);
}
.portal:hover,.portal:focus-visible{
  color:var(--paper); border-color:var(--paper);
  transform:translateY(-1px); box-shadow:0 0.6rem 1.4rem -0.6rem oklch(0.14 0.07 266 / 0.6);
}

/* ---------------------------------------------------------------- footer */
.foot{
  margin-top:clamp(4rem,12vh,8rem);
  background:var(--ink-deep);
  border-top:1px solid var(--rule-soft);
  padding-block:clamp(2.5rem,7vh,4.5rem);
}
.foot-cta{
  padding-bottom:clamp(2.5rem,7vh,4.5rem); margin-bottom:clamp(2.5rem,7vh,4.5rem);
  border-bottom:1px solid var(--rule-soft); max-width:60ch;
}
.foot-kicker{
  margin:0 0 0.8rem; color:var(--muted); font-size:0.8rem;
  letter-spacing:0.09em; text-transform:uppercase; font-weight:500;
}
.foot-cta h2{
  font-family:var(--f-display); font-weight:600; margin:0 0 1rem;
  font-size:clamp(1.7rem,4.2vw,2.6rem); line-height:1.05; letter-spacing:-0.02em;
  color:var(--paper); font-variation-settings:"opsz" 48;
}
.foot-cta .lead{ color:var(--text); font-size:clamp(1rem,1.6vw,1.12rem); line-height:1.5; max-width:56ch; margin-bottom:1.6rem; }
.foot-cta .cta{
  display:inline-block; padding:0.85rem 1.4rem;
  font-size:0.86rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
  color:var(--ink-deep); background:var(--paper); border:1px solid var(--paper);
  text-decoration:none;
  transition:background-color .4s var(--expo), transform .4s var(--expo), box-shadow .4s var(--expo);
}
.foot-cta .cta:hover, .foot-cta .cta:focus-visible{
  background:var(--text); transform:translateY(-1px);
  box-shadow:0 0.6rem 1.4rem -0.6rem oklch(0.14 0.07 266 / 0.6);
}
.foot .inner{
  display:flex; flex-wrap:wrap; gap:1.5rem 3rem;
  align-items:flex-start; justify-content:space-between;
}
.foot p{ margin:0; max-width:52ch; color:var(--muted); font-size:0.96rem; }
.foot nav{ display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; }
.foot nav a{
  color:var(--muted); text-decoration:none; font-size:0.88rem;
  letter-spacing:0.05em; text-transform:uppercase;
  border-bottom:1px solid var(--rule); padding-bottom:2px;
  transition:color .4s var(--expo), border-color .4s var(--expo);
}
.foot nav a:hover{ color:var(--paper); border-color:var(--paper); }
.foot .copy{
  margin-top:clamp(2rem,5vh,3rem); color:var(--faint); font-size:0.82rem;
  letter-spacing:0.06em;
}

/* ---------------------------------------------------------------- motion */
.word{ display:inline-block; }
.stagger .word{
  opacity:0; transform:translateY(0.42em);
  animation:rise 1.15s var(--expo) forwards;
  animation-delay:calc(var(--i) * 62ms + 120ms);
}
@keyframes rise{ to{ opacity:1; transform:none; } }

/* entrance states exist only when JS is running; without it the page is whole */
.js .rv{ opacity:0; transform:translateY(2.2rem); }
.js .rv.in{
  opacity:1; transform:none;
  transition:opacity 1s var(--expo), transform 1.1s var(--expo);
  transition-delay:var(--d,0ms);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .stagger .word{ opacity:1; transform:none; }
  .js .rv{ opacity:1; transform:none; }
}
html{ scroll-behavior:smooth; }

/* ---------------------------------------------------------------- live-site additions */
.lockup .logo{ width:clamp(96px,15vw,124px); height:auto; opacity:0.96; display:block; }
.hero .lead-copy p + p{ margin-top:1rem; }
/* icon on a plate when a project has no screenshot */
.plate-icon{ display:grid; place-items:center; aspect-ratio:1280/800; }
.plate-icon img{ width:38%; height:auto; aspect-ratio:1; object-fit:contain; border:1px solid var(--rule-soft); }
.thumb .plate-icon{ width:100%; height:100%; aspect-ratio:auto; }
.thumb .plate-icon img{ width:56%; }
.plate-blank{ display:block; aspect-ratio:1280/800; }
.plate-blank svg{ width:100%; height:100%; display:block; }
/* small icon beside a featured title */
.fmeta h3 .ficon{ width:1.15em; height:1.15em; vertical-align:-0.18em; margin-right:0.4em; border:1px solid var(--rule-soft); }
/* repo link under a compact row */
.compact .src{
  display:inline-block; margin:0.2rem 0 0.9rem; color:var(--muted); text-decoration:none;
  font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:500;
  border-bottom:1px solid var(--rule); padding-bottom:2px;
  transition:color .4s var(--expo), border-color .4s var(--expo);
}
.compact .src:hover{ color:var(--paper); border-color:var(--paper); }
.fmeta .facts a{ color:var(--text); text-decoration:underline; text-underline-offset:0.14em; text-decoration-thickness:1px; }
.fmeta .nothing{ margin:0; color:var(--muted); font-size:0.92rem; }
.chapter .empty{ color:var(--muted); margin:0; padding-block:1.5rem 0; }