/* Components — ported from home-approved.html */

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(250,246,239,.77);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border-bottom:1px solid var(--hairline);
}
.site-head .row{
  display:flex; align-items:center; height:3.6rem;
}
/* logo */
.logo{ display:flex; align-items:center; gap:.85rem; }
.logo-mark{
  width:2.15rem; height:2.15rem; border-radius:6px;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; font-weight:560;
  font-variation-settings:"opsz" 144;
  font-size:1.05rem; letter-spacing:-.04em;
  padding-right:.1rem;
  transition:background .25s, transform .4s cubic-bezier(.23,1,.32,1);
}
.logo-mark i{ font-style:italic; color:var(--orange); }
.logo:hover .logo-mark{ background:var(--orange); transform:rotate(-6deg); }
.logo:hover .logo-mark i{ color:var(--paper); }
.logo-type{ display:flex; flex-direction:column; line-height:1.25; }
.logo-type .nm{ font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.12em; }
.logo-type .rl{ font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; }
/* SVG wordmark logo */
.logo--svg{ gap:0; }
.logo-svg-img{
  height:1.55rem; width:auto; display:block;
  transition:opacity .25s;
}
.logo--svg:hover .logo-svg-img{ opacity:.65; }
.head-nav{
  display:flex; align-items:center; gap:2.2rem;
  margin-left:auto;
}
.head-nav a{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2); transition:color .2s;
}
.head-nav a:hover,
.head-nav a.is-current{ color:var(--orange); }
.head-meta{ display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--ink-2); }
.head-meta .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@media (max-width:880px){ .head-nav{ display:none; } }
@media (max-width:560px){ .head-meta span{ display:none; } }

/* ---------- hero ---------- */
.hero{ border-bottom:1px solid var(--hairline); position:relative; overflow:hidden; }
.hero-grid{
  position:relative;
  min-height:min(88svh, 920px);
  display:flex; align-items:center;
}
.hero-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block; z-index:1;
  pointer-events:none;
}
.hero-copy{
  position:relative; z-index:2;
  padding-top:clamp(4rem, 9vh, 7rem);
  padding-bottom:clamp(4rem, 9vh, 7rem);
  max-width:62%;
}
.hero-fig{
  position:absolute; top:0; right:calc(-1 * var(--gut)); bottom:0;
  width:52%; z-index:1; pointer-events:none;
}
.hero-fig .fig-cap{
  position:absolute; bottom:1.4rem; right:var(--gut);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); text-align:right;
}
@media (max-width:880px){
  .hero-copy{ max-width:100%; }
  .hero-canvas{ opacity:.22; }
  .hero-fig{ width:100%; right:0; }
  .hero-fig .fig-cap{ display:none; }
}

.hero-eyebrow{ margin-bottom:2.6rem; display:flex; align-items:baseline; gap:1.1rem; flex-wrap:wrap; }
.hero-eyebrow .rule{ display:inline-block; width:3.2rem; height:1px; background:var(--orange); transform:translateY(-4px); }

/* rotating role — extra large, typewriter */
.role-title{
  font-family:var(--serif); font-weight:660; font-variation-settings:"opsz" 144;
  font-size:clamp(3.1rem, 7.2vw, 7rem);
  line-height:1.04; letter-spacing:-.018em; text-transform:uppercase;
  min-height:2.18em; /* reserve two lines so the page doesn't jump */
  max-width:12ch;
}
.role-title .caret{
  display:inline-block; width:.08em; height:.82em;
  background:var(--orange); margin-left:.1em;
  transform:translateY(.08em);
  animation:blink 1.05s steps(2, start) infinite;
}
@keyframes blink{ to{ visibility:hidden; } }

.hero-sub{
  margin-top:2.6rem; max-width:50ch; color:var(--ink-2);
  font-size:clamp(1.02rem, 1.4vw, 1.16rem); font-weight:400;
}
.hero-sub em{ font-style:normal; color:var(--ink); font-weight:500; }

.hero-actions{ margin-top:2.8rem; display:flex; gap:1.1rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase;
  padding:1rem 1.7rem; border:1px solid var(--ink); border-radius:2px;
  transition:background .25s, color .25s, border-color .25s, border-radius .25s, padding .25s, gap .25s;
  background:var(--paper);
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.solid{ background:var(--ink); color:var(--paper); }
.btn.solid:hover{ background:var(--orange); border-color:var(--orange); }

/* Hero CTAs — hover from Figma node 2889:24 (Buttons/hover) */
.hero-actions .btn:hover{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--ink);
  border-radius:6.375rem; /* 102px */
  padding:1rem 1.7625rem 1.069375rem; /* 16px 28.2px 17.11px */
}
.hero-actions .btn.solid:hover{
  background:var(--orange);
  color:var(--paper);
  border-color:var(--ink);
  border-radius:8.25rem; /* 132px */
  padding:1.0625rem 1.7625rem; /* 17px 28.2px */
  gap:0.699375rem; /* 11.19px */
}

.btn .a{ transition:transform .25s; }
.btn:hover .a{ transform:translateX(3px); }

/* proof bar */
.proof{ border-top:1px solid var(--hairline); position:relative; z-index:2; background:var(--paper); }
.proof .row{ display:grid; grid-template-columns:repeat(4, 1fr); }
.proof .cell{ padding:1.6rem 1.6rem 1.6rem 0; display:flex; flex-direction:column; gap:.35rem; }
.proof .cell + .cell{ border-left:1px solid var(--hairline-2); padding-left:1.6rem; }
.proof .big{
  font-family:var(--serif); font-weight:600; font-variation-settings:"opsz" 60;
  font-size:clamp(1.8rem, 3.2vw, 2.7rem); line-height:1;
}
.proof .big sup{ color:var(--orange); font-size:.55em; font-weight:500; }
.proof .label{ font-family:var(--mono); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
@media (max-width:880px){
  .proof .row{ grid-template-columns:1fr 1fr; }
  .proof .cell:nth-child(3){ border-left:none; padding-left:0; border-top:1px solid var(--hairline-2); }
  .proof .cell:nth-child(4){ border-top:1px solid var(--hairline-2); }
}

/* ---------- section scaffolding ---------- */
.sec{ border-bottom:1px solid var(--hairline); }
.sec > .row{ padding-top:clamp(4.5rem, 10vh, 7.5rem); padding-bottom:clamp(4.5rem, 10vh, 7.5rem); }
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  margin-bottom:clamp(2.8rem, 5.5vw, 4.6rem);
  position:relative;
}
.sec-head .kick{
  display:block; font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange);
  margin-bottom:1.1rem;
}
.sec-head h2{
  font-family:var(--serif); font-weight:640; font-variation-settings:"opsz" 110;
  font-size:clamp(2.5rem, 5.6vw, 4.8rem); line-height:.98; letter-spacing:-.022em;
}
.sec-head h2 .it{ font-style:italic; font-weight:420; }
.sec-head .idx{ font-family:var(--mono); font-size:.68rem; letter-spacing:.15em; color:var(--ink-3); white-space:nowrap; padding-bottom:.4rem; }
.sec-head .idx b{ color:var(--orange); font-weight:500; }
.sec-head .page-title{
  font-family:var(--serif); font-weight:640; font-variation-settings:"opsz" 110;
  font-size:clamp(2.5rem, 5.6vw, 4.8rem); line-height:.98; letter-spacing:-.022em;
}
.sec-head .page-title .it{ font-style:italic; font-weight:420; }

/* ---------- inner pages ---------- */
.page-hero{ padding-top:clamp(3rem, 8vh, 5rem); }
.page-intro{
  color:var(--ink-2); max-width:62ch; font-size:1.02rem; line-height:1.65;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}

/* ---------- work ---------- */
.work-row{
  display:grid;
  grid-template-columns:minmax(3.5rem,5rem) 1.15fr .85fr;
  gap:clamp(1.4rem, 3.5vw, 3.5rem);
  padding:clamp(2.6rem, 5vw, 4.2rem) 0;
  border-top:1px solid var(--hairline);
  align-items:start;
}
.work-row:first-of-type{ border-top:none; padding-top:0; }
.w-num{
  font-family:var(--serif); font-style:italic; font-weight:380;
  font-variation-settings:"opsz" 144;
  font-size:clamp(1.5rem, 2.6vw, 2.2rem); color:var(--ink-3);
  transition:color .3s; line-height:1.2;
}
.work-row:hover .w-num{ color:var(--orange); }
.w-body h3{
  font-family:var(--serif); font-weight:620; font-variation-settings:"opsz" 100;
  font-size:clamp(1.9rem, 3.6vw, 3.1rem); line-height:1.02; letter-spacing:-.018em;
  margin-bottom:.75rem;
}
.w-body h3 a{
  background-image:linear-gradient(var(--orange), var(--orange));
  background-size:0% 2px; background-repeat:no-repeat; background-position:0 96%;
  transition:background-size .45s cubic-bezier(.23,1,.32,1);
}
.work-row:hover .w-body h3 a{ background-size:100% 2px; }
.w-meta{ font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:1.25rem; display:flex; gap:1.4rem; flex-wrap:wrap; }
.w-meta .o{ color:var(--orange); }
.w-desc{ color:var(--ink-2); max-width:52ch; margin-bottom:1.4rem; font-size:.99rem; }
.w-note{
  font-family:var(--serif); font-style:italic; font-weight:420; font-size:1.06rem; color:var(--ink);
  border-left:2px solid var(--orange); padding-left:1rem; max-width:46ch;
  margin-bottom:1.6rem; line-height:1.5;
}
.w-link{
  font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  display:inline-flex; gap:.6rem; align-items:center;
  border-bottom:1px solid var(--hairline); padding-bottom:.3rem;
  transition:border-color .25s, color .25s;
}
.w-link:hover{ color:var(--orange); border-color:var(--orange); }

.w-fig{ position:relative; }
.w-fig .frame{
  border:1px solid var(--hairline); border-radius:3px; overflow:hidden;
  position:relative; background:var(--paper-2);
  transition:transform .6s cubic-bezier(.23,1,.32,1), box-shadow .6s;
}
.work-row:hover .frame{ transform:translateY(-5px) rotate(-.4deg); box-shadow:0 24px 48px -28px rgba(24,21,18,.35); }
.w-fig .frame img{
  width:100%; height:100%; object-fit:contain; display:block; background:var(--paper-2);
}
.w-fig .frame.r11 img{
  object-fit:contain; background:var(--paper-2);
}
.w-fig .frame.r11{ aspect-ratio:1/1; }
.w-fig .frame.r43{ aspect-ratio:4/3; } .w-fig .frame.r54{ aspect-ratio:5/4; } .w-fig .frame.r32{ aspect-ratio:3/2; }
.w-fig .frame.frame--bare{
  background:transparent;
  border:none;
  overflow:visible;
}
.w-fig .frame.frame--bare img{
  background:transparent;
  filter:drop-shadow(0 20px 36px rgba(24,21,18,.18));
}
.work-row:hover .frame.frame--bare{
  box-shadow:none;
}
.w-fig .tile{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.w-fig .tile .glyph{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-variation-settings:"opsz" 144;
  font-size:clamp(6rem, 12vw, 10rem); line-height:1; color:rgba(24,21,18,.16);
  user-select:none;
}
.w-fig .cap{
  margin-top:.7rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); display:flex; justify-content:space-between;
}
.t-kttipay{ background:#DEE7DC; } .t-humm{ background:#F0DDD3; }
.t-teemie{ background:#DCE3EA; } .t-tripper{ background:#EFE5CE; }
@media (max-width:880px){
  .work-row{ grid-template-columns:1fr; gap:1.4rem; }
  .w-num{ font-size:1.2rem; }
}

/* ---------- now ---------- */
.now{ background:var(--paper-2); }
.now-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--hairline); border-radius:3px; overflow:hidden;
  background:var(--hairline-2); gap:1px;
}
.now-cell{
  background:var(--paper); padding:2.1rem 1.9rem;
  display:flex; flex-direction:column; gap:.9rem; min-height:240px;
  transition:background .3s; position:relative;
}
.now-cell:hover{ background:var(--paper-2); }
.now-cell.head-cell{ background:var(--ink); color:var(--paper); justify-content:space-between; }
.now-cell.head-cell .mono{ color:rgba(250,246,239,.6); }
.now-cell.head-cell p{
  font-family:var(--serif); font-style:italic; font-weight:420;
  font-size:1.4rem; line-height:1.3;
}
.now-status{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.62rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.now-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); }
.now-cell h3{
  font-family:var(--serif); font-weight:620; font-variation-settings:"opsz" 80;
  font-size:1.7rem; line-height:1.06; letter-spacing:-.014em;
}
.now-cell .what{ color:var(--ink-2); font-size:.94rem; flex:1; }
.now-cell .role{ font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); border-top:1px solid var(--hairline-2); padding-top:.9rem; }

/* stealth veil — frosted glass over confidential projects */
.now-cell.is-stealth{ overflow:hidden; }
.now-cell.is-stealth > :not(.veil){ filter:blur(7px); opacity:.75; user-select:none; pointer-events:none; }
.veil{
  position:absolute; inset:0; z-index:2;
  background:rgba(250,246,239,.42);
  backdrop-filter:blur(7px) saturate(.9);
  -webkit-backdrop-filter:blur(7px) saturate(.9);
  display:flex; align-items:center; justify-content:center;
}
.veil-tag{
  font-family:var(--mono); font-size:.64rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  border-radius:99px;
  padding:.6rem 1.2rem; background:rgba(250,246,239,.78);
  display:inline-flex; align-items:center; gap:.55rem;
}
.veil-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--orange); }
@media (max-width:1000px){ .now-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .now-grid{ grid-template-columns:1fr; } }

/* ---------- about ---------- */
.about-grid{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2.5rem, 6vw, 6rem); align-items:start;
}
/* ---- about photo card stack (swipeable) ---- */
.stack-wrap{ position:sticky; top:6rem; }
.stack{
  position:relative; aspect-ratio:4/5;
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.stack-card{
  position:absolute; inset:0;
  border:1px solid var(--hairline); border-radius:14px; overflow:hidden;
  background:var(--paper-2);
  box-shadow:0 18px 40px -24px rgba(24,21,18,.35);
  will-change:transform;
  transition:transform .55s cubic-bezier(.23,1,.32,1), opacity .45s;
  cursor:grab;
}
.stack-card.dragging{ transition:none; cursor:grabbing; }
.stack-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  pointer-events:none; -webkit-user-drag:none;
}
/* resting offsets for the cards behind */
.stack-card[data-pos="1"]{ transform:translateX(5.5%) rotate(2.4deg) scale(.95); }
.stack-card[data-pos="2"]{ transform:translateX(-4.5%) rotate(-2deg) scale(.9); opacity:.85; }
.stack-foot{
  margin-top:1.1rem; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
}
.stack-dots{ display:flex; gap:.45rem; }
.stack-dots i{ width:6px; height:6px; border-radius:50%; background:var(--hairline); transition:background .3s; }
.stack-dots i.on{ background:var(--orange); }
.about-lede{
  font-family:var(--serif); font-weight:460; font-variation-settings:"opsz" 100;
  font-size:clamp(1.6rem, 2.8vw, 2.4rem); line-height:1.26; letter-spacing:-.014em;
  margin-bottom:2rem;
}
.about-lede .it{ font-style:italic; font-weight:420; color:var(--orange); }
.about-body{ color:var(--ink-2); max-width:58ch; font-size:.99rem; }
.about-body p + p{ margin-top:1.15rem; }
.about-body strong{ color:var(--ink); font-weight:500; }
.footnotes{ margin-top:2.6rem; border-top:1px solid var(--hairline); }
.footnotes li{
  list-style:none; display:grid; grid-template-columns:2.4rem 1fr; gap:1rem;
  padding:1.05rem 0; border-bottom:1px solid var(--hairline-2);
  color:var(--ink-2); font-size:.94rem;
}
.footnotes li sup{ font-family:var(--mono); color:var(--orange); font-size:.7rem; padding-top:.25rem; }
.about-tail{ margin-top:2.2rem; display:flex; gap:1.1rem; flex-wrap:wrap; align-items:center; }
.about-tail .interests{ font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
@media (max-width:880px){
  .about-grid{ grid-template-columns:1fr; }
  .stack-wrap{ position:static; max-width:380px; }
}

/* ---------- process ---------- */
.proc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.5vw,3.2rem); }
.proc{ border-top:2px solid var(--ink); padding-top:1.4rem; }
.proc .pn{ font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.15em; color:var(--orange); margin-bottom:1rem; display:block; }
.proc h3{
  font-family:var(--serif); font-weight:620; font-variation-settings:"opsz" 80;
  font-size:1.65rem; margin-bottom:.7rem; letter-spacing:-.016em; line-height:1.08;
}
.proc p{ color:var(--ink-2); font-size:.96rem; }
@media (max-width:780px){ .proc-grid{ grid-template-columns:1fr; } }

.ai-band{
  margin-top:clamp(3rem,6vw,4.5rem);
  border:1px solid var(--hairline); border-left:3px solid var(--orange); border-radius:3px;
  padding:clamp(1.8rem,4vw,2.6rem);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:center;
  background:var(--paper-2);
}
.ai-band .x{
  font-family:var(--serif); font-style:italic; font-weight:560; font-variation-settings:"opsz" 144;
  font-size:clamp(2.8rem,5.4vw,4.4rem); line-height:1; color:var(--ink); white-space:nowrap;
}
.ai-band .x b{ color:var(--orange); font-weight:560; }
.ai-band p{ color:var(--ink-2); max-width:58ch; font-size:.99rem; }
.ai-band p strong{ color:var(--ink); font-weight:500; }
@media (max-width:680px){ .ai-band{ grid-template-columns:1fr; } }

/* ---------- writing strip ---------- */
.writing .row{ display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; padding-top:2.6rem; padding-bottom:2.6rem; }
.writing h2{
  font-family:var(--serif); font-weight:620; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.016em;
}
.writing h2 .it{ font-style:italic; font-weight:420; color:var(--orange); }
.writing p{ color:var(--ink-2); max-width:52ch; font-size:.95rem; }

/* ---------- work blog ---------- */
.blog-row{
  display:grid;
  grid-template-columns:minmax(3.5rem,5rem) 1fr;
  gap:clamp(1.4rem, 3.5vw, 3.5rem);
  padding:clamp(2.6rem, 5vw, 4.2rem) 0;
  border-top:1px solid var(--hairline);
  align-items:start;
}
.blog-row:first-of-type{ border-top:none; padding-top:0; }
.b-num{
  font-family:var(--serif); font-style:italic; font-weight:380;
  font-variation-settings:"opsz" 144;
  font-size:clamp(1.5rem, 2.6vw, 2.2rem); color:var(--ink-3);
  line-height:1; padding-top:.15rem;
}
.b-meta{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.85rem;
}
.b-title{
  font-family:var(--serif); font-weight:620; font-variation-settings:"opsz" 90;
  font-size:clamp(1.55rem, 2.8vw, 2.35rem); line-height:1.08; letter-spacing:-.018em;
}
.b-title a{
  background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 1px no-repeat;
  transition:background-size .35s cubic-bezier(.23,1,.32,1), color .25s;
}
.blog-row:hover .b-title a,
.b-title a:hover{ color:var(--orange); background-size:100% 1px; }
.b-excerpt{
  margin-top:1rem; color:var(--ink-2); max-width:62ch; font-size:.98rem; line-height:1.65;
}
.b-link{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:1.35rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); transition:color .25s, gap .25s;
}
.blog-row:hover .b-link,
.b-link:hover{ color:var(--orange); gap:.65rem; }

/* ---- blog single hero (matches case study hero style) ---- */
.blog-single-hero{
  min-height:min(78vh,760px);
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(2.5rem,5vw,4rem) var(--gut) clamp(2.5rem,5vw,3.5rem);
  display:flex; flex-direction:column; justify-content:space-between;
}
.blog-hero-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
}
.blog-back{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3); transition:color .25s;
}
.blog-back::before{
  content:''; width:18px; height:1px; background:var(--orange);
}
.blog-back:hover{ color:var(--orange); }
.blog-hero-center{
  margin-top:auto; margin-bottom:auto; padding:4rem 0 3rem;
}
.blog-hero-eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); margin-bottom:2rem;
  display:flex; align-items:center; gap:.9rem;
}
.blog-hero-eyebrow::after{
  content:''; flex:0 0 4rem; height:1px; background:var(--orange);
}
.blog-hero-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.8rem,7.2vw,7.5rem);
  line-height:.96; letter-spacing:-.025em;
  color:var(--ink); max-width:18ch;
}
.blog-hero-meta{
  margin-top:clamp(2rem,5vw,3.5rem);
  display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  padding-top:1.8rem; border-top:1px solid var(--hairline);
}
.blog-hero-meta .item .label{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.45rem;
}
.blog-hero-meta .item .value{
  font-family:var(--serif); font-size:1.15rem; font-weight:400; color:var(--ink); line-height:1.25;
}
.blog-body-section .row{ padding-top:clamp(2rem,5vw,4rem); padding-bottom:clamp(3rem,7vw,6rem); }
.blog-content{
  max-width:46rem; color:var(--ink-2); font-size:1.02rem; line-height:1.72;
}
.blog-content > *:first-child{ margin-top:0; }
.blog-content p + p{ margin-top:1.15rem; }
.blog-content h2,
.blog-content h3,
.blog-content h4{
  font-family:var(--serif); font-weight:620; font-variation-settings:"opsz" 90;
  color:var(--ink); letter-spacing:-.016em; line-height:1.12;
  margin-top:2.4rem; margin-bottom:1rem;
}
.blog-content h2{ font-size:clamp(1.55rem, 2.6vw, 2rem); }
.blog-content h3{ font-size:clamp(1.25rem, 2vw, 1.55rem); }
.blog-content h4{ font-size:1.05rem; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.blog-content strong{ color:var(--ink); font-weight:600; }
.blog-content ul,
.blog-content ol{ margin:1rem 0 1rem 1.2rem; }
.blog-content li + li{ margin-top:.45rem; }
.blog-content hr,
.blog-content .wp-block-separator{
  border:0; border-top:1px solid var(--hairline); margin:2.4rem 0;
}
.blog-content img{
  width:100%; height:auto; border-radius:14px; margin:2rem 0;
  border:1px solid var(--hairline);
}
.blog-content figure{ margin:2rem 0; }
.blog-content figcaption{
  margin-top:.65rem; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
@media (max-width:680px){
  .blog-row{ grid-template-columns:1fr; gap:1rem; }
  .b-num{ font-size:1.35rem; }
}

/* ---------- contact ---------- */
.contact{ background:var(--ink); color:var(--paper); }
.contact .row{ padding-top:clamp(5rem,11vh,8rem); padding-bottom:clamp(4rem,8vh,6rem); }
.contact .mono{ color:rgba(250,246,239,.55); }
.contact h2{
  font-family:var(--serif); font-weight:380; font-variation-settings:"opsz" 144;
  font-size:clamp(2.8rem,7.4vw,6.4rem); line-height:1.04; letter-spacing:-.022em;
  margin:1.8rem 0 2.6rem; max-width:18ch;
}
.contact h2 .it{ font-style:italic; font-weight:560; color:var(--orange); }
.contact-mail{
  font-family:var(--mono); font-size:clamp(1rem,2.4vw,1.5rem); letter-spacing:.02em;
  border-bottom:1px solid rgba(250,246,239,.3); padding-bottom:.4rem;
  transition:color .25s, border-color .25s;
}
.contact-mail:hover{ color:var(--orange); border-color:var(--orange); }
.contact-meta{
  margin-top:clamp(3.5rem,8vh,5.5rem); padding-top:1.6rem;
  border-top:1px solid rgba(250,246,239,.16);
  display:flex; justify-content:space-between; gap:1.4rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(250,246,239,.5);
}
.contact-meta nav{ display:flex; gap:1.8rem; }
.contact-meta a{ transition:color .25s; }
.contact-meta a:hover{ color:var(--orange); }