/* ============================================================
   GRAPHICXO — INNER PAGES (about · services · journal · contact)
   Loaded everywhere except the homepage, which has story.css.
   Tokens come from main.css — nothing is redefined here, and the
   shared furniture (.phead, .section, .pillar, .card, .process,
   .testi, .contact-cta) is reused rather than rebuilt.

   Each page gets ONE structural idea of its own:
     about    · a gold thread the particle field runs as current
     services · a field that takes the colour of the pillar you are reading
     work     · one woven wall, every plate a whole entry
     journal  · an editorial list whose covers surface on hover
     contact  · a brief you fill in, not a form you submit
   ============================================================ */

/* ------------------------------------------------------------
   SHARED
   ------------------------------------------------------------ */

/* The page header's glow follows the page, so About / Services /
   Journal / Contact don't all open on the same purple wash. */
.phead{--phead-hue:rgba(109,40,255,.18)}
.phead__glow{background:radial-gradient(circle,var(--phead-hue),transparent 60%)}
.phead--about   {--phead-hue:rgba(109,40,255,.20)}
.phead--services{--phead-hue:rgba(30,138,128,.18)}
.phead--journal {--phead-hue:rgba(194,56,79,.16)}
.phead--contact {--phead-hue:rgba(212,175,55,.16)}
.phead--work    {--phead-hue:rgba(47,107,232,.16)}

/* A second, smaller counter-glow on the opposite corner, so the header
   reads as lit from two directions instead of one flat corner wash. */
.phead::after{
  content:"";
  position:absolute;
  right:-14%;
  bottom:-30%;
  width:46vw;height:46vw;
  max-width:620px;max-height:620px;
  background:radial-gradient(circle,rgba(212,175,55,.10),transparent 62%);
  pointer-events:none;
}

/* Section label used down the inner pages — a number, a rule, a word. */
.slabel{
  display:flex;align-items:baseline;gap:1rem;
  font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey-dim);
  margin-bottom:2.6rem;
}
.slabel em{font-style:normal;color:var(--gold);font-family:var(--serif);letter-spacing:0;font-size:.95rem}
.slabel i{flex:1;height:1px;background:var(--line);max-width:220px}

.stitle{font-family:var(--serif);font-size:clamp(2rem,5vw,4rem);line-height:1.04;letter-spacing:-.02em;max-width:18ch}
.stitle em{color:var(--gold);font-style:italic}

/* ------------------------------------------------------------
   ABOUT
   about.php carries its own layer (assets/css/about.css) — the hero, the
   founder block, the thread the workflow hangs off, the creative-technology
   band and the signature all live there. Nothing on the shared pages uses
   them.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   SERVICES
   services.php now carries its own layer (assets/css/services.css) — the
   .pillar rows and .index__row list that used to live here went with the
   redesign. Nothing on the shared pages uses them.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   JOURNAL — the editorial list
   A lead article, then a numbered run of the rest. Each row lifts its
   own cover into view on hover, so the page stays type-led and the
   images arrive only when asked for.
   ------------------------------------------------------------ */
.lead-post{
  display:grid;
  /* The writing leads and the cover supports, but the cover still has to be
     a picture rather than a stamp. A straight 4fr/1fr gave it 20% — about
     230px on a laptop, smaller than the thumbnail the index shows on hover.

     So the image gets a real size rather than a share of one: 34% of the
     block, never under 320px and never past 460px, with the text taking
     everything left. The floor is what matters — a pure ratio shrinks the
     cover exactly when the block narrows and there is least room to spare,
     and a clamp holds it at a size worth looking at instead. */
  grid-template-columns:minmax(0,1fr) clamp(320px,34%,460px);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  padding:clamp(1.8rem,4vw,3rem);
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(150deg,rgba(17,17,17,.75),rgba(7,7,7,.3));
  transition:border-color .5s,transform .7s var(--ease);
}
@media (hover:hover){.lead-post:hover{border-color:rgba(212,175,55,.35);transform:translateY(-6px)}}
.lead-post__meta{display:flex;align-items:center;gap:.9rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim)}
.lead-post__meta em{font-style:normal;color:var(--gold)}
/* Capped at 2.3rem, down from 3.2rem. The old size was set when the text sat
   in a 57%-wide column and had to hold its own against a large cover; given
   most of the block it stopped reading as a headline and started reading as
   a banner. The lower bound barely moves, so a phone is unchanged. */
.lead-post__title{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.1;letter-spacing:-.02em;margin:1.2rem 0 1rem}
.lead-post__excerpt{color:var(--grey);font-weight:300;line-height:1.7;max-width:48ch}
.lead-post__visual{
  position:relative;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  background:radial-gradient(circle at 40% 30%,rgba(109,40,255,.4),#0a0a0a 70%);
  border:1px solid var(--line);
  /* Named so the hover glow in blog.css rises rather than snapping on. */
  transition:border-color .45s var(--ease),box-shadow .55s var(--ease);
}
.lead-post__visual img{width:100%;height:100%;object-fit:cover;display:block}
/* No cover yet: the mark stands in rather than an empty rectangle. */
.lead-post__visual span{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--serif);font-style:italic;font-size:clamp(2.5rem,7vw,5rem);
  color:rgba(212,175,55,.55);
}
@media (max-width:900px){ .lead-post{grid-template-columns:1fr} }

/* ---- The index cards ----
   The same object as the lead card, one size down. The chrome is shared in
   one rule rather than written twice, because two copies of a border, a
   radius and a gradient are two things that drift apart the first time one
   of them is adjusted. Only the scale is set separately below. */
.post-row{
  position:relative;
  display:grid;
  align-items:center;
  gap:clamp(1.2rem,3vw,2.4rem);
  padding:clamp(1.4rem,3vw,2.2rem);
}
.lead-post,
.post-row{
  border:1px solid var(--line);
  border-radius:20px;
  background:linear-gradient(150deg,rgba(17,17,17,.75),rgba(7,7,7,.3));
  transition:border-color .5s,transform .7s var(--ease);
}
@media (hover:hover){
  .post-row:hover{border-color:rgba(212,175,55,.35);transform:translateY(-4px)}
}

.post-row__meta{
  display:flex;align-items:center;gap:.7rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-dim);
}
.post-row__meta em{font-style:normal;color:var(--gold)}
.post-row__meta i{font-style:normal;opacity:.5}

/* The read cue, matching the lead card's. Only drawn when the entry is a
   real link — a planned title has nowhere to go. */
.post-row__cue{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.2rem;
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.post-row__cue::after{content:"";width:1.8rem;height:1px;background:var(--gold);transition:width .5s var(--ease)}
@media (hover:hover){.post-row:hover .post-row__cue::after{width:3rem}}
/* display:block on both. They are <span>s — the row is a link, and a link may
   not contain block-level tags — so without this the excerpt runs on from the
   title as one paragraph and its margin-top is silently dropped, which is what
   an inline box does with vertical margins. */
/* One step down from the lead card's 2.3rem, so the two read as a hierarchy
   rather than as a repetition. */
.post-row__title{display:block;margin-top:.9rem;font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.75rem);line-height:1.15;letter-spacing:-.01em;transition:color .4s}
.post-row__excerpt{display:block;margin-top:.7rem;color:var(--grey-dim);font-size:.9rem;font-weight:300;line-height:1.65;max-width:56ch}

/* The cover. It was an absolutely-positioned overlay that faded in on hover;
   it is a cell of the card now, on the right, exactly as the lead card sets
   its visual. */
.post-row__cover{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(circle at 40% 30%,rgba(194,56,79,.3),#0a0a0a 70%);
  transition:border-color .45s var(--ease),box-shadow .55s var(--ease);
}
.post-row__cover img,
.post-row__cover .plate{
  display:block;width:100%;height:100%;
  object-fit:cover;color:#fff;
  transition:transform 1.1s var(--ease);
}
@media (hover:hover){
  .post-row:hover .post-row__cover img,
  .post-row:hover .post-row__cover .plate{transform:scale(1.05)}
}

/* Category chips */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:3rem}
.chip-link{
  font-size:.78rem;letter-spacing:.04em;color:var(--grey);
  border:1px solid var(--line);border-radius:100px;
  padding:.5rem 1.1rem;
  transition:border-color .4s,color .4s,background .4s;
}
.chip-link.is-active{border-color:rgba(212,175,55,.45);color:var(--gold);background:rgba(212,175,55,.06)}
@media (hover:hover){
  .chip-link:hover{border-color:rgba(212,175,55,.45);color:var(--gold);background:rgba(212,175,55,.06)}
}

/* ------------------------------------------------------------
   SINGLE POST — the margin rail
   The page's idea is an editorial spread: everything that isn't the
   writing gets pushed into a sticky margin — category, date, reading
   time, share — so the body keeps a proper measure and nothing floats
   over it while you read. A hairline at the top of the viewport is the
   only thing that moves.
   ------------------------------------------------------------ */

/* Reading progress. Above the nav (z 9000) because it is the one thing
   that should never be covered, and 2px so it reads as a hairline
   rather than a loading bar. */
.readbar{
  position:fixed;
  top:0;left:0;
  width:100%;height:2px;
  z-index:9500;
  pointer-events:none;
}
.readbar i{
  display:block;height:100%;width:100%;
  transform-origin:left center;
  scale:var(--read,0) 1;
  background:linear-gradient(90deg,var(--purple),var(--gold));
  box-shadow:0 0 12px rgba(212,175,55,.5);
}

.article-layout{
  display:grid;
  grid-template-columns:13rem 1fr;
  gap:clamp(2rem,7vw,6rem);
  align-items:start;
}
@media (max-width:900px){
  .article-layout{grid-template-columns:1fr;gap:2.5rem}
}

.article__rail{
  position:sticky;
  top:9rem;
  display:flex;flex-direction:column;gap:1.8rem;
}
@media (max-width:900px){
  .article__rail{
    position:static;
    flex-direction:row;flex-wrap:wrap;gap:2rem;
    padding-bottom:1.8rem;border-bottom:1px solid var(--line);
  }
}
.rail__block h2{
  font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey-dim);margin-bottom:.5rem;
}
.rail__value{font-size:.92rem;color:var(--grey)}
.rail__value.is-gold{color:var(--gold)}
/* Icon-only, so it wraps rather than stacking: five or six marks in a column
   would run the rail past the article on a short post. */
.rail__share{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

/* Brand colours, on at rest.
   Each button carries its own --brand and --brand-rgb: CSS cannot pull an
   alpha out of a hex custom property, so the ring and the wash need the RGB
   form separately. Same pairing the services and portfolio accents use.

   Every one of these was measured against the page background before being
   used — the floor for a non-text graphic is 3:1 (WCAG 1.4.11). LinkedIn and
   Facebook are the two that needed lifting off their official values: 0A66C2
   reads 3.54:1 and 1877F2 reads 4.76:1, which survive behind a hover wash but
   go muddy sitting unlit on near-black. The rest are the authentic colours. */
.share--x         { --brand:#FFFFFF; --brand-rgb:255,255,255 }
.share--linkedin  { --brand:#3A9BE8; --brand-rgb:58,155,232 }   /* 6.75:1 — lifted from #0A66C2 */
.share--facebook  { --brand:#4C9AFF; --brand-rgb:76,154,255 }   /* 7.07:1 — lifted from #1877F2 */
.share--whatsapp  { --brand:#25D366; --brand-rgb:37,211,102 }   /* 10.16:1 — official */
.share--pinterest { --brand:#E60023; --brand-rgb:230,0,35 }     /* 4.21:1 — official */
.share--link      { --brand:var(--gold); --brand-rgb:212,175,55 }

.share{
  position:relative;
  display:grid;place-items:center;
  /* 40px in the rail; the mobile row below takes them to 44. */
  width:40px;height:40px;
  border-radius:50%;
  padding:0;cursor:pointer;
  /* Lit from the start. The ring and the wash are the same hue at low alpha,
     so each mark sits in its own colour rather than on a neutral chip. */
  color:var(--brand);
  border:1px solid rgba(var(--brand-rgb),.32);
  background:rgba(var(--brand-rgb),.07);
  transition:border-color .35s var(--ease),background .35s var(--ease),
             transform .35s var(--ease),box-shadow .35s var(--ease);
}

@media (hover:hover){/* Hover is no longer where the colour arrives, so it has to do something
   else: the same hue, further up. */
.share:hover{
  border-color:rgba(var(--brand-rgb),.75);
  background:rgba(var(--brand-rgb),.18);
  transform:translateY(-2px);
  box-shadow:0 8px 22px -12px rgba(var(--brand-rgb),.9);
}}
.share:focus-visible{
  border-color:rgba(var(--brand-rgb),.75);
  background:rgba(var(--brand-rgb),.18);
  outline:2px solid var(--gold-soft);outline-offset:3px;
}

/* X's mark is white, so its ring and wash would read as a plain grey chip
   next to five coloured ones. Warmed to the studio's gold instead — the one
   place a brand has no colour to lend. */
.share--x{border-color:rgba(212,175,55,.28);background:rgba(212,175,55,.06)}
@media (hover:hover){.share--x:hover{
  border-color:rgba(212,175,55,.6);
  background:rgba(212,175,55,.14);
  box-shadow:0 8px 22px -12px rgba(212,175,55,.9);
}}
.share__icon{width:17px;height:17px;display:block}
/* The line-art one is stroked, the brand marks are filled. */
.share--link .share__icon{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none}

/* Copy confirmation. A class rather than replacing the label, because there
   is no label to replace — see initCopyLinks() in app.js. */
.share--link.is-copied{color:var(--gold);border-color:var(--gold)}
.share--link.is-copied::after{
  content:"Copied";
  position:absolute;left:50%;bottom:calc(100% + .5rem);
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);
  background:var(--bg-2);border:1px solid rgba(212,175,55,.4);
  border-radius:6px;padding:.3rem .55rem;
  pointer-events:none;
}

@media (max-width:900px){
  .rail__share{gap:.6rem}
  /* Back to a full touch target once the rail is a row on a phone. */
  .share{width:44px;height:44px}
  .share__icon{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){
  .share{transition:none}
  @media (hover:hover){.share:hover{transform:none}}
}

.article{max-width:85ch}
.article__cover{
  width:100%;aspect-ratio:16/8;object-fit:cover;
  border-radius:16px;border:1px solid var(--line);
  display:block;margin-bottom:clamp(2rem,5vh,3.5rem);
}
.article__body{color:var(--grey);font-weight:300;font-size:1.06rem;line-height:1.85}
.article__body > * + *{margin-top:1.4rem}

/* The opening letter. Serif and gold, so the article starts the way the
   rest of the site does — with the display face doing the announcing. */
.article__body > p:first-of-type::first-letter{
  float:left;
  font-family:var(--serif);
  font-size:4.1em;
  line-height:.82;
  padding-right:.1em;
  margin-top:.05em;
  color:var(--gold);
}
.article__body h2,.article__body h3{color:var(--white);font-family:var(--serif);line-height:1.2;margin-top:2.8rem;letter-spacing:-.01em}
.article__body h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.article__body h3{font-size:clamp(1.2rem,2.2vw,1.6rem)}
.article__body a{color:var(--gold);border-bottom:1px solid rgba(212,175,55,.4);transition:border-color .3s}
@media (hover:hover){.article__body a:hover{border-bottom-color:var(--gold)}}
.article__body ul,.article__body ol{padding-left:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.article__body blockquote{
  position:relative;
  border-left:1px solid var(--gold);
  padding:.4rem 0 .4rem 1.8rem;
  margin-block:2.4rem;
  font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.6rem);
  line-height:1.45;letter-spacing:-.01em;color:var(--white);
}
.article__body img{max-width:100%;height:auto;border-radius:12px;display:block}
.article__body hr{border:0;border-top:1px solid var(--line);margin-block:2.6rem}
.article__body code{font-size:.92em;color:var(--gold-soft);background:rgba(212,175,55,.08);padding:.15em .4em;border-radius:4px}

.article__foot{
  margin-top:clamp(3rem,7vh,5rem);padding-top:2rem;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;align-items:center;
}

/* ---- More from the journal ---- */
.more-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,3vw,2.2rem);
}
@media (max-width:820px){ .more-grid{grid-template-columns:1fr} }
.more-card{
  display:flex;flex-direction:column;gap:.7rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  transition:border-color .5s;
}
@media (hover:hover){.more-card:hover{border-color:rgba(212,175,55,.45)}}
.more-card__cat{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.more-card__title{
  font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.2;letter-spacing:-.01em;color:var(--grey);
  transition:color .4s;
}
@media (hover:hover){.more-card:hover .more-card__title{color:var(--white)}}
.more-card__date{font-size:.78rem;color:var(--grey-dim);margin-top:auto;padding-top:.6rem}

/* Empty state — honest, not a broken-looking page. */
.empty{
  border:1px dashed var(--line);
  border-radius:16px;
  padding:clamp(2rem,5vw,3.5rem);
  text-align:center;
  color:var(--grey);
}
.empty__title{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);color:var(--white);margin-bottom:.8rem}

/* ------------------------------------------------------------
   PORTFOLIO — the ambient glow
   The page itself is assets/css/portfolio.css; only the glow lives
   here, because it is the one piece the redesign kept. It takes the
   colour of whichever project you are reading, which is the same idea
   the homepage story runs on — colour as the thing that tells you
   where you are.
   ------------------------------------------------------------ */

/* Fixed, so it stays put while entries scroll past it. z-index:-1 puts it
   behind .main's content but still inside .main's stacking context, so the
   page background shows through rather than covering it.
   A flat colour, not a gradient: only background-color can transition, and
   the blur is what turns it into a glow. */
.pglow{
  position:fixed;
  left:58%;top:42%;
  width:72vw;height:72vw;
  max-width:900px;max-height:900px;
  translate:-50% -50%;
  border-radius:50%;
  background-color:var(--proj-accent,#6D28FF);
  filter:blur(130px);
  opacity:.15;
  pointer-events:none;
  z-index:-1;
  transition:background-color 1.1s var(--ease),opacity .9s var(--ease);
}
@media (prefers-reduced-motion:reduce){ .pglow{transition:none} }

/* ------------------------------------------------------------
   CONTACT — the brief
   Not a form so much as a short brief: what you need, how big it is,
   and the rest in your own words.
   ------------------------------------------------------------ */
.brief{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(2rem,6vw,5.5rem);
  align-items:start;
}
@media (max-width:1024px){ .brief{grid-template-columns:1fr} }

.field{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.8rem}
.field__label{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-dim)}
.field__label span{color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--sans);font-size:1rem;color:var(--white);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  padding:.85rem 0;
  transition:border-color .4s,background .4s;
}
.field textarea{resize:vertical;min-height:8rem;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--gold);
}
.field input::placeholder,.field textarea::placeholder{color:var(--grey-dim)}
/* The select's own menu is drawn by the OS, so it needs a solid ground
   or the options render as light-on-light on some platforms. */
.field select{appearance:none;cursor:pointer;padding-right:2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 12px) 1.35rem,calc(100% - 7px) 1.35rem;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.field select option{background:var(--bg-2);color:var(--white)}
.field--error input,.field--error select,.field--error textarea{border-bottom-color:#d9455f}
.field__error{font-size:.8rem;color:#e8697d}

/* Project-type chips — checkboxes wearing the pillar-tag look. */
.picks{display:flex;flex-wrap:wrap;gap:.6rem}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick span{
  display:inline-block;
  font-size:.82rem;color:var(--grey);
  border:1px solid var(--line);border-radius:100px;
  padding:.6rem 1.15rem;
  cursor:pointer;
  transition:border-color .35s,color .35s,background .35s;
}
@media (hover:hover){.pick span:hover{border-color:rgba(212,175,55,.4);color:var(--gold-soft)}}
.pick input:checked + span{border-color:var(--gold);color:var(--gold);background:rgba(212,175,55,.09)}
.pick input:focus-visible + span{outline:1px solid var(--gold);outline-offset:3px}

.brief__aside{
  position:sticky;top:8rem;
  display:flex;flex-direction:column;gap:2.2rem;
  padding:clamp(1.6rem,3vw,2.4rem);
  border:1px solid var(--line);
  border-radius:18px;
  background:radial-gradient(ellipse at 80% 0%,rgba(212,175,55,.12),transparent 62%);
}
@media (max-width:1024px){ .brief__aside{position:static} }
.aside__block h2{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-dim);margin-bottom:.9rem}
.aside__mail{font-family:var(--serif);font-size:clamp(1.1rem,2vw,1.5rem);color:var(--white);transition:color .3s}
@media (hover:hover){.aside__mail:hover{color:var(--gold)}}
.aside__note{color:var(--grey);font-size:.92rem;font-weight:300;line-height:1.65}

/* What happens next — numbered, so the wait is explained rather than felt. */
.next-steps{list-style:none;display:flex;flex-direction:column;gap:1.1rem;counter-reset:step}
.next-steps li{
  display:grid;grid-template-columns:1.7rem 1fr;gap:.9rem;
  color:var(--grey);font-size:.92rem;font-weight:300;line-height:1.55;
}
.next-steps li::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  font-family:var(--serif);font-size:.85rem;color:var(--gold);
}

/* Form result banners */
.notice{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.2rem 1.4rem;
  border-radius:12px;
  border:1px solid var(--line);
  margin-bottom:2.5rem;
  font-size:.95rem;line-height:1.6;
}
.notice--ok{border-color:rgba(212,175,55,.45);background:rgba(212,175,55,.07);color:var(--white)}
.notice--bad{border-color:rgba(217,69,95,.5);background:rgba(217,69,95,.08);color:#f0b8c1}
.notice em{font-style:normal;color:var(--gold)}

/* Honeypot — never shown, never announced, but a bot will fill it. */
.gx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------
   404 — lost in the universe
   The zero is the orbit: three concentric rings with a body running
   the outer one, echoing the three shader rings the homepage story
   opens on. So the error page is the brand's own object, drawn small,
   rather than a big number and an apology.

   .lost__code / __title / __text are shared with the not-found state
   inside single-blog.php, which uses the plain numeral form.
   ------------------------------------------------------------ */
.lost{min-height:70vh;display:grid;place-items:center;text-align:center;position:relative}
.lost__code{font-family:var(--serif);font-size:clamp(5rem,20vw,14rem);line-height:.9;color:var(--gold);text-shadow:0 0 70px rgba(212,175,55,.3)}
.lost__title{font-family:var(--serif);font-size:clamp(1.5rem,4vw,2.6rem);margin-top:1rem}
.lost__text{color:var(--grey);font-weight:300;margin:1.2rem auto 2rem;max-width:44ch}

/* The full mark: 4 · orbit · 4 */
.lost__mark{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.5rem,2vw,1.5rem);
  line-height:.9;
}
.lost__digit{
  font-family:var(--serif);
  font-size:clamp(5rem,19vw,13rem);
  color:var(--gold);
  text-shadow:0 0 70px rgba(212,175,55,.28);
}

/* The orbit standing in for the zero. Sized off the digits so the three
   read as one word at every width. */
.orbit-o{
  position:relative;
  width:clamp(4.4rem,17vw,11.5rem);
  aspect-ratio:1;
  flex:none;
}
.orbit-o i{
  position:absolute;inset:0;margin:auto;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.45);
}
.orbit-o i:nth-child(1){width:100%;height:100%;animation:orbitSpin 26s linear infinite}
.orbit-o i:nth-child(2){width:70%;height:70%;border-color:rgba(139,92,255,.5);animation:orbitSpin 18s linear infinite reverse}
.orbit-o i:nth-child(3){width:42%;height:42%;border-color:rgba(212,175,55,.65);animation:orbitSpin 12s linear infinite}
/* The body on the outer ring — the dot that hasn't found its page. */
.orbit-o i:nth-child(1)::after{
  content:"";
  position:absolute;
  top:-4px;left:50%;
  width:7px;height:7px;
  margin-left:-3.5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px 2px rgba(212,175,55,.9);
}
/* The core, where the seed of an idea sits on the homepage. */
.orbit-o::after{
  content:"";
  position:absolute;inset:0;margin:auto;
  width:12%;aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,#fff 0%,#f3ecff 45%,rgba(139,92,255,0) 100%);
  animation:orbitPulse 3.4s ease-in-out infinite;
}
@keyframes orbitSpin{to{rotate:360deg}}
@keyframes orbitPulse{0%,100%{opacity:.55;scale:.9}50%{opacity:1;scale:1.15}}
@media (prefers-reduced-motion:reduce){
  .orbit-o i,.orbit-o::after{animation:none}
}

.lost__eyebrow{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey-dim);
  margin-bottom:2.4rem;
}
.lost__eyebrow::before,.lost__eyebrow::after{content:"";width:40px;height:1px;background:var(--line)}

.lost__actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}

/* Where to go instead — offered, not buried in the footer. */
.lost__links{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  margin-top:clamp(2.5rem,6vh,4rem);
  padding-top:2rem;
  border-top:1px solid var(--line);
  width:min(100%,44rem);
}