/* ==========================================================================
   The personal page (2026-09-29). Boban Pepic's own page: his name, his vision, his companies,
   his thoughts, his writing. Spec: docs/superpowers/specs/2026-09-29-personal-page-design.md.

   Reference lock. Patrick Miller leads: the name as a monumental masthead, full-bleed flat
   colour fields as the whole section system, one sans, every piece of type in full ink, flat,
   square. BlueYard lends the hero only: one floating sentence, one warm wash, one image off the
   bottom edge. July Fund lends one field colour per company. The field colours are Dubai's.

   Rules this file keeps, and test/site-css.test.js enforces: the wash is the only gradient;
   nothing casts a shadow; nothing is rounded but the round subscribe button; nothing is set in
   uppercase; every colour declaration is the ink or the canvas.
   ========================================================================== */

/* ---- Faces: two OFL families, self-hosted, latin subset (docs/FONTS.md) ---- */
@font-face{font-family:'Archivo';src:url('/assets/fonts/archivo-latin.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-roman-latin.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
/* Metric-matched fallbacks (PR #25, measured in headless Chrome at 100px): until a woff2
   arrives, text sets in a local face scaled and re-lined to the web face, so the swap does not
   reflow the page. The Archivo numbers were measured at the Register's 72% width; at this
   world's 88% width they are unverified. */
@font-face{font-family:'Source Serif 4 Fallback';src:local('Georgia');size-adjust:92.03%;ascent-override:113%;descent-override:36.94%;line-gap-override:0%}
@font-face{font-family:'Archivo Fallback';src:local('Arial Narrow');size-adjust:91.81%;ascent-override:95.85%;descent-override:22.87%;line-gap-override:0%}

/* ---- Tokens (the roles are binding; see the spec's colour table) ---------- */
:root{
  --ink:#14140f;      /* every piece of text, every rule, every stroke: the one black */
  --canvas:#ffffff;   /* the page ground, the writing list, the essay body */
  --apricot:#f4a574;  /* the wash, and the SellingX field */
  --sand:#ecdccb;     /* the Proptefi field, and the ground under its card */
  --sky:#c8dbe8;      /* the Ofto field, and the subscribe field */
  --sage:#aac7b3;     /* the OwningX field, and the essay pull band */
  --cream:#f6f1dc;    /* the thoughts field */
  --gulf:#0d4a78;     /* the round subscribe button, and nothing else */
  --wash:linear-gradient(180deg,var(--apricot) 0%,#f8cfb1 34%,var(--canvas) 72%);
  --sans:'Archivo','Archivo Fallback','Helvetica Neue',Arial,sans-serif;
  --serif:'Source Serif 4','Source Serif 4 Fallback',Georgia,'Times New Roman',serif;
  --edge:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---- Base and browser surfaces --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.45;letter-spacing:.005em;caret-color:var(--ink);overflow-wrap:break-word}
img{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
em,i{font-style:normal}
::selection{background:var(--apricot);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* The cross-page fade, like smooth scrolling, only where reduced motion has not been asked for. */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}html{scroll-behavior:smooth}}
.edge{padding-inline:var(--edge)}
.small{font-size:16px;letter-spacing:.012em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;z-index:80;transform:translateY(-160%);display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--ink);color:var(--canvas);text-decoration:none;transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}

/* ---- Chrome: nearly none ----------------------------------------------------- */
.top{position:absolute;inset:0 0 auto 0;z-index:2;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-top:26px}
.top a{text-decoration:none}
.top a:hover,.top a[aria-current="page"]{text-decoration:underline}
.top__nav{display:flex;gap:28px}
.top__menu[hidden]{display:none}
.top__menu{display:none;min-height:44px;padding:0;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer}
@media (max-width:760px){.top{align-items:center;padding-top:10px}.top__nav{display:none}.top__menu{display:inline-flex;align-items:center}}
/* The menu dialog (under 761px). Resting states are instant via .mob-open; nav.html's script
   layers the motion on, and skips it under reduced motion. */
.mob-overlay{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end;background:rgba(20,20,15,.24);opacity:0;visibility:hidden;pointer-events:none}
.mob-overlay.mob-open{opacity:1;visibility:visible;pointer-events:auto}
.mob-panel{width:min(92vw,440px);height:100%;display:flex;flex-direction:column;padding:0 var(--edge) calc(28px + env(safe-area-inset-bottom));background:var(--canvas)}
.mob-head{display:flex;justify-content:space-between;align-items:center;min-height:64px}
.mob-close{min-height:44px;padding:0;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer}
.mob-links{flex:1;display:flex;flex-direction:column;justify-content:center}
.mob-links a{padding:8px 0;font-size:clamp(40px,11vw,56px);font-weight:500;font-stretch:90%;line-height:1;letter-spacing:-.045em;text-decoration:none}
.mob-links a:hover{text-decoration:underline}
.mob-foot{padding-top:24px}
.foot{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:16px 32px;padding-block:28px 40px}
.foot p{margin:0}
.foot__links{display:flex;flex-wrap:wrap;gap:8px 22px}
/* On a phone the links wrap; 21px between rows gives each row 44px to a finger. */
@media (max-width:760px){.foot__links{row-gap:21px}}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
/* 44px to a finger (WCAG 2.5.5): the text links grow a tap area above and below, and the equal
   negative margin gives the space back, so nothing on screen moves. */
.top a,.foot a,.co__foot a,.poster a{padding-block:14px;margin-block:-14px}

/* ---- Home: the hero. The name as masthead, the sentence floating, the portrait off the edge. */
.hero{position:relative;min-height:100svh;overflow:hidden;background:var(--wash)}
/* Sized for "Boban Pepic": 19.2vw holds the name on one line from 761px up. A longer name or an
   added initial breaks the one-line fit (spec, "Honest risks"). */
.hero__name{margin:0 0 0 -.04em;padding-top:clamp(96px,12vw,170px);font-weight:500;font-stretch:88%;font-size:clamp(64px,19.2vw,340px);line-height:.8;letter-spacing:-.05em;white-space:nowrap}
.hero__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-top:clamp(48px,7vw,104px);align-items:end}
.hero__line{grid-column:1 / span 6;margin:0;font-size:clamp(28px,3.4vw,52px);font-weight:400;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.hero__down{grid-column:12;justify-self:end;display:block;width:clamp(36px,4vw,56px)}
.hero__down svg{display:block;width:100%;height:auto}
.hero__plate{position:relative;margin:clamp(40px,6vw,88px) 0 0 auto;width:min(58%,860px);aspect-ratio:1400/932;transform:translateY(18%)}
.hero__plate img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){
  .hero{min-height:0}
  .hero__name{white-space:normal;font-size:clamp(64px,24vw,140px)}
  .hero__name span{display:block}
  .hero__row{grid-template-columns:minmax(0,1fr)}
  .hero__line{grid-column:1}
  .hero__down{display:none}
  .hero__plate{width:100%;transform:none}
}

/* ---- Home: the companies. Split screens, a field for each, the product full-bleed opposite. */
.co{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(92svh,860px)}
.co__field{display:flex;flex-direction:column;justify-content:space-between;gap:56px;padding:clamp(28px,4vw,56px) var(--edge)}
.co__field--apricot{background:var(--apricot)}
.co__field--sand{background:var(--sand)}
.co__field--sky{background:var(--sky)}
.co__field--sage{background:var(--sage)}
.co__field--cream{background:var(--cream)}
.co__name{margin:0;font-weight:500;font-stretch:90%;font-size:clamp(64px,9.4vw,152px);line-height:.82;letter-spacing:-.045em;overflow-wrap:anywhere}
.co__what{margin:0;max-width:22ch;font-size:clamp(22px,2.1vw,32px);line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.co__foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:28px 0 0}
.co__plate{position:relative;margin:0;overflow:hidden;background:var(--canvas)}
.co__plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.co--flip .co__field{order:2}
/* Proptefi's own card render sits on its sand ground; multiply drops the render's white. */
.co__plate--proptefi{background:var(--sand)}
.co__plate--proptefi img{inset:9%;width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply}
/* Keeps Owning Dubai's headline whole at every crop. */
.co__plate--owningdubai img{object-position:22% 72%}
@media (max-width:760px){.co{grid-template-columns:minmax(0,1fr);min-height:0}.co--flip .co__field{order:0}.co__plate{aspect-ratio:4/3}}

/* ---- Thoughts: each one a poster line on cream ------------------------------- */
.section-title{margin:0 0 clamp(40px,6vw,88px);font-size:16px;font-weight:500;letter-spacing:.012em}
.thoughts{background:var(--cream);padding-block:clamp(72px,10vw,160px)}
.thoughts--page{min-height:100svh;padding-top:clamp(110px,13vw,190px)}
.thoughts--page .page-lede{margin-bottom:clamp(56px,8vw,120px)}
.thoughts ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(48px,6vw,88px)}
.poster p{margin:0 0 14px;max-width:16ch;font-size:clamp(40px,6.4vw,104px);font-weight:400;line-height:.94;letter-spacing:-.045em;text-wrap:balance;overflow-wrap:break-word}
.poster a{text-decoration-thickness:2px}

/* ---- Writing: the essays as a plain list on white, a hairline between -------- */
.writing{padding-block:clamp(72px,10vw,160px)}
.writing--index{padding-top:0}
.writing ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.writing li{border-bottom:1px solid var(--ink);padding-bottom:clamp(20px,2.4vw,32px)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;padding-top:clamp(20px,2.4vw,32px);text-decoration:none}
.row__title{font-size:clamp(34px,4.6vw,72px);font-weight:400;line-height:.95;letter-spacing:-.04em;overflow-wrap:break-word}
.row__date{white-space:nowrap}
.row:hover .row__title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.dek{margin:14px 0 0;max-width:40ch;font-size:19px;line-height:1.35}

/* ---- Subscribe: one solid control, the only filled thing on the site ---------- */
.sub{background:var(--sky);padding-block:clamp(72px,10vw,160px)}
.sub__title{margin:0 0 40px;max-width:16ch;font-size:clamp(40px,6vw,96px);font-weight:400;line-height:.94;letter-spacing:-.045em;text-wrap:balance}
.sub__form{position:relative;display:flex;align-items:center;gap:14px;max-width:720px;padding-bottom:10px;border-bottom:1px solid var(--ink)}
.sub__form:has(.sub__input:focus-visible){outline:2px solid var(--ink);outline-offset:4px}
.sub__input{flex:1;min-width:0;padding:10px 0;border:0;border-radius:0;background:transparent;font:inherit;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;color:var(--ink);caret-color:var(--ink)}
/* 70%, not the spec's 55%: ink at .55 on sky is about 3.7:1; at .7 about 5.8:1. */
.sub__input::placeholder{color:var(--ink);opacity:.7}
/* The field drops its own ring only where the form above can draw one round the whole row. */
@supports selector(:has(*)){.sub__input:focus{outline:none}}
.sub__btn{flex:none;display:grid;place-items:center;width:64px;height:64px;border:0;border-radius:9999px;background:var(--gulf);color:var(--canvas);cursor:pointer;transition:transform .3s var(--ease)}
.sub__btn:hover{transform:translateX(4px)}
.sub__btn:disabled{cursor:progress}
.sub__btn svg{width:22px;height:22px}
.sub__status{margin:16px 0 0;min-height:1.45em}

/* ---- Essay --------------------------------------------------------------------- */
.essay{padding-bottom:clamp(32px,4vw,60px)}
.ehero{position:relative;background:var(--wash);padding-bottom:clamp(56px,7vw,112px)}
.ehero__title{margin:0;max-width:11ch;padding-top:clamp(110px,13vw,190px);font-weight:500;font-stretch:88%;font-size:clamp(56px,10.4vw,172px);line-height:.84;letter-spacing:-.045em;text-wrap:balance;overflow-wrap:break-word}
.ehero__standfirst{margin:clamp(32px,4vw,56px) 0 0;max-width:24ch;font-size:clamp(24px,2.6vw,40px);line-height:1.25;letter-spacing:-.03em;text-wrap:balance}
.ehero__byline{margin:28px 0 0}
.share{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:8px}
.share button{min-height:44px;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;cursor:pointer}
/* The essay body is the one place Source Serif 4 sets type: essays must not get harder to read. */
.prose{max-width:36rem;margin:0 auto;padding-block:clamp(40px,5vw,80px);font-family:var(--serif);font-size:clamp(19px,1.4vw,21px);line-height:1.7;letter-spacing:0;font-optical-sizing:auto}
.prose p{margin:0 0 1.15em;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose h2{margin:2.2em 0 .8em;font-family:var(--sans);font-size:clamp(28px,2.8vw,40px);font-weight:500;line-height:1;letter-spacing:-.035em;text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.8em 0 .6em;font-family:var(--sans);font-size:clamp(22px,2vw,28px);font-weight:500;line-height:1.1;letter-spacing:-.02em}
.prose strong{font-weight:600}
.prose blockquote{margin:1.6em 0;font-family:var(--sans);font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.025em}
.prose hr{height:0;margin:2.4em 0;border:0}
.pull{margin:0;background:var(--sage);padding-block:clamp(64px,9vw,140px)}
.pull p{margin:0;max-width:12ch;font-size:clamp(48px,8.6vw,140px);font-weight:400;line-height:.9;letter-spacing:-.05em;text-wrap:balance;overflow-wrap:break-word}
.corrections{max-width:36rem;margin:0 auto;padding-block:clamp(32px,4vw,56px)}
.corrections__title{margin:0 0 20px;font-size:clamp(28px,2.8vw,40px);font-weight:500;line-height:1;letter-spacing:-.035em}
.corrections ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.corrections p{margin:6px 0 0}

/* ---- Page heads: writing, thoughts, about, the legal pages, the 404 -------------- */
.page-head{padding-top:clamp(110px,13vw,190px);padding-bottom:clamp(40px,5vw,72px)}
.page-title{margin:0;font-weight:500;font-stretch:88%;font-size:clamp(56px,10.4vw,172px);line-height:.84;letter-spacing:-.045em;text-wrap:balance;overflow-wrap:break-word}
.page-lede{margin:clamp(24px,3vw,40px) 0 0;max-width:24ch;font-size:clamp(24px,2.6vw,40px);line-height:1.25;letter-spacing:-.03em;text-wrap:balance}
.about__lede{margin-top:clamp(32px,4vw,56px)}
.about__lede p{margin:0 0 .7em;max-width:28ch;font-size:clamp(22px,2.1vw,32px);line-height:1.25;letter-spacing:-.02em;text-wrap:pretty}
.about__portrait{margin:0}
.about__portrait img{width:100%;height:auto;aspect-ratio:1400/932;object-fit:cover}
.about__body{max-width:36rem;margin:0 auto;padding-block:clamp(56px,7vw,112px)}
.about__body p{margin:0 0 1.1em;font-size:clamp(20px,1.6vw,24px);line-height:1.35;letter-spacing:-.01em;text-wrap:pretty}
.about__body h2{margin:2.2em 0 .8em;font-size:clamp(28px,2.8vw,40px);font-weight:500;line-height:1;letter-spacing:-.035em}
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 24px;margin:2.2em 0 0}
.facts dt{font-weight:500}
.facts dd{margin:0}
.legal{max-width:48rem;padding-bottom:clamp(72px,9vw,140px)}
.legal h1{margin:0 0 .5em;padding-top:clamp(110px,13vw,190px);font-weight:500;font-stretch:88%;font-size:clamp(48px,8vw,120px);line-height:.88;letter-spacing:-.045em}
.legal h2{margin:2em 0 .6em;font-size:clamp(24px,2.4vw,32px);font-weight:500;line-height:1.05;letter-spacing:-.03em}
.legal h3{margin:1.6em 0 .35em;font-size:17px;font-weight:600;line-height:1.3}
.legal p,.legal li{max-width:62ch;line-height:1.55}
.legal p{margin:0 0 1em}
.legal ul{margin:0 0 1em;padding-left:1.2em}
.nf{min-height:100svh}
.nf main{padding-top:clamp(110px,13vw,190px)}

/* ---- Motion: one authored moment. The portrait rises into place on load. ------------ */
@media (prefers-reduced-motion:no-preference){
  .hero__plate{animation:rise 1.6s var(--ease) .15s both}
}
@keyframes rise{from{transform:translateY(40%)}to{transform:translateY(18%)}}
@media (max-width:760px){.hero__plate{animation:none}}
@media (prefers-reduced-motion:reduce){.sub__btn,.skip-link{transition:none}}