/* ============================================================
   davidoiaknin.com — stylesheet
   One file. Every page loads it. Change a token here and the
   whole site moves.
   ============================================================ */

:root{
  /* --- palette: achromatic by design. Photography is the only
         colour on this site. Do not add an accent hue. --- */
  --ink:       #13171b;   /* deep cool graphite — dark surfaces  */
  --ink-2:     #1b2127;   /* raised dark surface                 */
  --ink-3:     #2f373f;   /* hairlines on dark                   */
  --steel:     #6d7a84;   /* labels, captions, quiet text        */
  --stone:     #b6bab6;   /* muted text on dark                  */
  --limestone: #e6e6e1;   /* alternating light band              */
  --paper:     #f7f7f4;   /* page base                           */
  --rule:      rgba(19,23,27,.16);
  --rule-soft: rgba(19,23,27,.08);

  /* --- type --- */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- measure --- */
  --bar: 76px;
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1360px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  padding-top:var(--bar);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.1rem,.6vw + .97rem,1.26rem);
  line-height:1.62;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

::selection{ background:var(--ink); color:var(--paper); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--ink);
  padding:12px 18px; font-family:var(--mono); font-size:.84rem;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

/* ============================================================
   Layout
   ============================================================ */

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.band{ padding-block:clamp(72px,10vw,140px); }
.band--tight{ padding-block:clamp(52px,7vw,96px); }
.band--dark{ background:var(--ink); color:var(--paper); }
.band--stone{ background:var(--limestone); }

.band--dark .eyebrow{ color:var(--steel); }
.band--dark .lede{ color:var(--stone); }
.band--dark .rule{ background:var(--ink-3); }

.rule{ height:1px; background:var(--rule); border:0; margin:0; }

.cols{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(24px,3.4vw,56px);
}

/* ============================================================
   Type
   ============================================================ */

.eyebrow{
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 22px;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::after{
  content:""; height:1px; flex:1; background:currentColor; opacity:.35;
}

.display{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:.86;
  margin:0;
  text-wrap:balance;
}

.h1{ font-size:clamp(3.1rem,9vw,7.1rem); }
.h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.1rem,4vw,3.55rem);
  letter-spacing:-.035em; line-height:1.02;
  margin:0 0 28px; text-wrap:balance;
}
.h3{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.24rem,1.4vw,1.46rem);
  letter-spacing:-.02em; line-height:1.2;
  margin:0 0 12px;
}

.lede{
  font-size:clamp(1.3rem,1.62vw,1.62rem);
  line-height:1.5; color:#3c454d;
  max-width:34ch;
}

.prose > p{ margin:0 0 1.15em; max-width:66ch; }
.prose > p:last-child{ margin-bottom:0; }
.prose ul{ margin:0 0 1.3em; padding-left:1.1em; max-width:62ch; }
.prose li{ margin-bottom:.45em; }

.quote{
  font-family:var(--serif);
  font-weight:300; font-style:italic;
  font-size:clamp(1.67rem,3.55vw,2.9rem);
  line-height:1.22; letter-spacing:-.015em;
  margin:0; text-wrap:balance;
}
.quote-by{
  font-family:var(--mono); font-style:normal; font-weight:400;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--steel); margin-top:28px; display:block;
}

/* the name always renders 5% larger than the text around it */
.name{ font-size:1.05em; letter-spacing:-.006em; }

/* ============================================================
   Top bar
   ============================================================ */

.bar{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--bar);
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center;
}
.bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.mark{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.3rem,1.5vw,1.65rem); letter-spacing:-.028em;
  color:var(--paper); text-decoration:none; white-space:nowrap;
}
.mark span{ color:var(--steel); font-weight:400; }

.nav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); }
.nav a{
  font-family:var(--mono); font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--stone); text-decoration:none;
  padding-block:6px; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav a:hover{ color:var(--paper); border-color:var(--steel); }
.nav a[aria-current="page"]{ color:var(--paper); border-color:var(--paper); }

.nav-toggle{
  display:none; background:none; border:0; cursor:pointer;
  color:var(--paper); font-family:var(--mono); font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; padding:8px 0;
}

/* ============================================================
   Hero — the signature. Display type and the portrait share one
   frame; dimension ticks read the composition like an elevation.
   ============================================================ */

.hero{ background:var(--ink); color:var(--paper); padding-block:clamp(56px,8vw,104px) clamp(64px,9vw,120px); }

.hero-grid{ align-items:end; }
.hero-copy{ grid-column:1 / span 7; }
.hero-figure{ grid-column:8 / span 5; }

.hero .h1{ color:var(--paper); }
.hero-title-2{ display:block; color:var(--steel); }

.hero-role{
  font-family:var(--mono); font-size:.78rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--steel); margin:0 0 34px;
}
.hero-lede{
  color:var(--stone); max-width:44ch;
  font-size:clamp(1.19rem,1.46vw,1.46rem); line-height:1.55;
  margin:34px 0 0;
}
.hero-cta{ margin-top:40px; display:flex; flex-wrap:wrap; gap:14px; }

/* measured frame */
.frame{ position:relative; padding:14px; }
.frame::before,
.frame::after{
  content:""; position:absolute; pointer-events:none;
}
.frame::before{ inset:0; border:1px solid rgba(255,255,255,.16); }
.frame::after{
  inset:14px;
  border:1px solid transparent;
  box-shadow:
    -14px 0 0 -13px var(--steel),  /* left tick   */
     14px 0 0 -13px var(--steel);  /* right tick  */
}
.frame-tag{
  position:absolute; left:14px; bottom:-26px;
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}

/* ============================================================
   Photo placeholders — replace the whole .photo block with an
   <img> when the real photography arrives.
   ============================================================ */

.photo{
  position:relative;
  aspect-ratio:var(--ar,4/3);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 32px),
    var(--ink-2);
  display:grid; place-items:center;
  overflow:hidden;
}
.photo span{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); text-align:center; padding:16px; line-height:1.9;
}
.photo--light{
  background:
    repeating-linear-gradient(0deg,rgba(19,23,27,.05) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,rgba(19,23,27,.05) 0 1px,transparent 1px 32px),
    #dcdcd6;
}

/* ============================================================
   Buttons & links
   ============================================================ */

.btn{
  display:inline-block;
  font-family:var(--mono); font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  padding:15px 26px; border:1px solid currentColor;
  background:none; color:inherit;
  transition:background .22s ease, color .22s ease;
}
.btn:hover{ background:currentColor; }
.btn:hover span{ mix-blend-mode:difference; }
.btn--solid{
  background:var(--paper); color:var(--ink); border-color:var(--paper);
}
.btn--solid:hover{ background:transparent; color:var(--paper); }

.tlink{
  font-family:var(--mono); font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:inherit; text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:4px;
  transition:border-color .2s ease;
}
.tlink:hover{ border-color:currentColor; }
.band--dark .tlink{ border-bottom-color:var(--ink-3); }

/* ============================================================
   Pillars / cards
   ============================================================ */

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,48px); }
.pillar{ border-top:1px solid var(--rule); padding-top:24px; }
.pillar p{ margin:0; color:#3c454d; max-width:38ch; }
.band--dark .pillar{ border-top-color:var(--ink-3); }
.band--dark .pillar p{ color:var(--stone); }

.sectors{
  display:flex; flex-wrap:wrap; gap:10px 0;
  font-family:var(--mono); font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.sectors{ padding:0; margin:0; gap:12px 0; }
.sectors li{
  list-style:none; padding-inline:16px;
  border-left:1px solid currentColor;
  opacity:.9;
}
.sectors li:first-child{ padding-left:0; border-left:0; }

.venture{
  border-top:1px solid var(--rule);
  padding-top:26px;
  display:grid; grid-template-columns:1fr; gap:18px;
}
.venture .h3{ margin-bottom:6px; }
.venture p{ margin:0; color:#3c454d; }
.venture-meta{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}

.slot{
  border:1px dashed var(--rule);
  padding:22px 24px;
  font-family:var(--mono); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--steel); line-height:2;
}

/* ============================================================
   Legal pages — privacy, terms, disclaimer
   ============================================================ */

.legal-block{ max-width:76ch; margin-bottom:clamp(44px,5vw,72px); }
.legal-block:last-child{ margin-bottom:0; }
.legal-block .eyebrow{ margin-bottom:16px; }
.legal-date{ color:var(--stone); }

.prose a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid var(--rule);
  transition:border-color .2s ease;
}
.prose a:hover{ border-bottom-color:currentColor; }
.prose strong{ font-weight:600; }

/* ============================================================
   Definition list — highlights, vision
   ============================================================ */

.marks{ margin:0; padding:0; list-style:none; }
.marks li{
  border-top:1px solid var(--rule);
  padding:22px 0;
  display:grid; grid-template-columns:158px 1fr; gap:clamp(18px,2.6vw,40px);
  align-items:start;
}
.marks .k{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
  padding-top:.35em; white-space:nowrap;
}
.marks .v{ margin:0; max-width:60ch; }
.band--dark .marks li{ border-top-color:var(--ink-3); }
.marks--flat li{ grid-template-columns:1fr; }

/* ============================================================
   Form
   ============================================================ */

.form{ display:grid; gap:26px; max-width:640px; }
.field{ display:grid; gap:9px; }
.field label{
  font-family:var(--mono); font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--steel);
}
.field input,
.field select,
.field textarea{
  font-family:var(--serif); font-size:1.08rem; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--rule);
  padding:11px 0;
  border-radius:0;
  transition:border-color .2s ease;
}
.field textarea{ resize:vertical; min-height:130px; line-height:1.6; }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--ink); }
.hp{ position:absolute; left:-9999px; }

/* ============================================================
   Footer
   ============================================================ */

.foot{ background:var(--ink); color:var(--stone); padding-block:clamp(56px,7vw,88px) 34px; }
.foot a{ color:var(--stone); text-decoration:none; border-bottom:1px solid var(--ink-3); }
.foot a:hover{ color:var(--paper); border-bottom-color:var(--steel); }
.foot-grid{ align-items:start; }
.foot-brand{ grid-column:1 / span 5; }
.foot-nav{ grid-column:7 / span 3; }
.foot-reach{ grid-column:10 / span 3; }
.foot h4{
  font-family:var(--mono); font-size:.72rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
  margin:0 0 18px;
}
.foot ul{ margin:0; padding:0; list-style:none; }
.foot li{ margin-bottom:11px; font-size:1.02rem; }
.foot-word{
  font-family:var(--display); font-weight:700; color:var(--paper);
  font-size:clamp(1.62rem,2.6vw,2.16rem); letter-spacing:-.035em; line-height:1.05;
  margin:0 0 16px;
}
.foot-legal{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.foot-legal a{ border-bottom:1px solid var(--ink-3); }

.foot-base{
  margin-top:clamp(48px,6vw,84px); padding-top:22px;
  border-top:1px solid var(--ink-3);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel);
}

/* ============================================================
   Motion
   ============================================================ */

.rise{ opacity:0; transform:translateY(18px); }
.rise.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rise,.rise.in{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:1000px){
  /* inline grid-column values are set per page; only !important beats them */
  .cols > *{ grid-column:1 / -1 !important; }
  .hero-figure{ margin-top:52px; max-width:520px; }
  .pillars{ grid-template-columns:1fr; }
  .pillar{ padding-top:20px; }
  .foot-nav,.foot-reach{ margin-top:38px; }
}

@media (max-width:720px){
  .nav{
    position:fixed; inset:var(--bar) 0 auto 0;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    gap:0; padding:8px var(--gutter) 26px;
    border-bottom:1px solid var(--ink-3);
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ width:100%; padding:15px 0; border-bottom:1px solid var(--ink-3); }
  .nav-toggle{ display:block; }
  .marks li{ grid-template-columns:1fr; gap:10px; }
  .marks .k{ padding-top:0; }
  .venture{ padding-top:22px; }
  .lede{ max-width:none; }
  .mark{ font-size:1.28rem; }
}