/* DEVOCIUM — pulled from her own drawing. Hers, 24 September 2026: the drawing
   is the header, and the world comes out of it, with touches of red. */

:root{
  --dv-ground:#FFF7F3;
  --dv-ink:#2B0F1E;
  --dv-soft:#6B4A58;
  --dv-red:#B5172F;
  --dv-deep:#1A0A12;
  --dv-head:'Cormorant Garamond',Georgia,serif;
  --dv-name:'Bodoni Moda','Cormorant Garamond',serif;
  --dv-body:'Figtree',system-ui,sans-serif;
}

body{background:var(--dv-ground);color:var(--dv-ink)}
#main{overflow-x:hidden}

.dv-eyebrow{font-family:var(--dv-body);font-size:.76rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--dv-red);margin:0 0 1.5em}

/* ── THE DRAWING ARRIVES ───────────────────────────────────────────────── */
.dv-open{position:relative;min-height:88vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;padding:clamp(80px,11vw,150px) 24px clamp(48px,7vw,90px);
  text-align:center;overflow:hidden}
.dv-open__drawing{width:min(1180px,96vw);color:var(--dv-ink);line-height:0;
  clip-path:inset(0 100% 0 0);animation:dv-draw 2.6s cubic-bezier(.36,.06,.2,1) .35s forwards}
.dv-open__drawing svg{width:100%;height:auto;display:block}
@keyframes dv-draw{to{clip-path:inset(0 0 0 0)}}

.dv-open__words{margin-top:clamp(-18px,-1.4vw,0px);opacity:0;
  animation:dv-up 1.5s ease 2.35s forwards}
@keyframes dv-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.dv-name{font-family:var(--dv-name);font-weight:500;margin:0;
  font-size:clamp(2.6rem,9vw,6.2rem);line-height:.96;letter-spacing:.1em;
  text-indent:.1em;color:var(--dv-ink)}
.dv-line{font-family:var(--dv-head);font-style:italic;color:var(--dv-soft);
  font-size:clamp(1.12rem,2.4vw,1.6rem);margin:.85em 0 0}

.dv-thread{display:block;width:1px;height:clamp(52px,7vw,88px);
  background:linear-gradient(var(--dv-red),transparent);margin-top:clamp(34px,5vw,58px);
  opacity:0;animation:dv-thread 1.4s ease 3.1s forwards}
@keyframes dv-thread{to{opacity:.85}}

/* ── her line under it ─────────────────────────────────────────────────── */
.dv-said{max-width:30ch;margin:0 auto;padding:0 24px clamp(70px,10vw,130px);text-align:center}
.dv-said__p{font-family:var(--dv-head);font-size:clamp(1.3rem,3.4vw,2.05rem);
  line-height:1.34;color:var(--dv-ink);margin:0;text-wrap:balance}

/* ── the crimson ───────────────────────────────────────────────────────── */
.dv-red{background:var(--dv-red);color:#FFF;text-align:center;
  padding:clamp(80px,12vw,150px) 24px}
.dv-red__verse{font-family:var(--dv-head);font-size:clamp(1.24rem,3vw,1.9rem);
  line-height:1.5;max-width:26ch;margin:0 auto}
.dv-red__verse br{content:"";display:block;height:.25em}
.dv-red__law{font-family:var(--dv-name);font-size:clamp(1.5rem,4.6vw,3rem);
  line-height:1.12;margin:clamp(44px,6vw,80px) auto 0;max-width:16ch;letter-spacing:.005em}

/* ── presence, reverence, skill ───────────────────────────────────────── */
.dv-two{display:grid;gap:clamp(36px,6vw,80px);align-items:center;
  max-width:1160px;margin:0 auto;padding:clamp(80px,11vw,150px) 24px}
@media (min-width:880px){.dv-two{grid-template-columns:1fr 1fr}}
.dv-h2{font-family:var(--dv-head);font-weight:600;color:var(--dv-ink);
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.1;margin:0 0 .7em;text-wrap:balance}
.dv-prose{font-family:var(--dv-body);font-size:clamp(1rem,1.35vw,1.1rem);
  line-height:1.78;color:var(--dv-soft);margin:0;max-width:52ch}
.dv-two__pic img{width:100%;height:auto;display:block;mix-blend-mode:multiply}

/* ── the three ─────────────────────────────────────────────────────────── */
.dv-three{display:grid;gap:clamp(44px,6vw,72px);max-width:1160px;
  margin:0 auto;padding:0 24px clamp(80px,11vw,150px)}
@media (min-width:820px){.dv-three{grid-template-columns:repeat(3,1fr)}}
.dv-one__rule{display:block;width:34px;height:1px;background:var(--dv-red);margin-bottom:1.4em}
.dv-one h3{font-family:var(--dv-name);font-weight:500;font-size:clamp(1.34rem,2.4vw,1.75rem);
  margin:0 0 .5em;letter-spacing:.04em;color:var(--dv-ink)}
.dv-one p{font-family:var(--dv-body);font-size:.98rem;line-height:1.72;
  color:var(--dv-soft);margin:0}

/* ── the close, in the dark ───────────────────────────────────────────── */
.dv-close{background:var(--dv-deep);color:#F5E8EC;text-align:center;
  padding:clamp(90px,13vw,170px) 24px}
.dv-close__head{font-family:var(--dv-head);font-weight:500;
  font-size:clamp(1.9rem,5.2vw,3.4rem);line-height:1.1;margin:0 auto;max-width:18ch;
  text-wrap:balance}
.dv-close__body{font-family:var(--dv-body);color:#C9A8B4;margin:1.4em auto 0;
  font-size:1.02rem;letter-spacing:.02em}
.dv-close__last{font-family:var(--dv-head);font-style:italic;color:var(--dv-red);
  font-size:clamp(1.2rem,2.8vw,1.7rem);margin:clamp(40px,5vw,70px) 0 0}

@media (prefers-reduced-motion:reduce){
  .dv-open__drawing,.dv-open__words,.dv-thread{animation:none;clip-path:none;opacity:1;transform:none}
}

/* the whole arrival holds on one screen — the drawing is sized by the room
   it is in, never only by the width of it */
.dv-open{min-height:100svh;justify-content:center;
  padding:clamp(56px,8vw,110px) 24px clamp(36px,5vw,70px)}
.dv-open__drawing{display:flex;justify-content:center;width:min(1180px,96vw)}
.dv-open__drawing svg{width:auto;max-width:100%;max-height:min(46vh,430px);height:auto}
@media (max-width:820px){
  .dv-open__drawing svg{max-height:34vh}
  .dv-name{letter-spacing:.07em;text-indent:.07em}
}

/* ══ CRISP BLACK AND WHITE, WITH TOUCHES OF RED ══════════════════════════
   Hers, 24 September 2026: "that crisp black and white, the website with
   touches of red." So the world is her drawing's own two colours — black ink
   on white — and the red is spent, never spread: the eyebrow, one hairline,
   one block, and her last line. */
:root{
  --dv-ground:#FFFFFF;
  --dv-ink:#000000;
  --dv-soft:#4A4A4A;
  --dv-red:#C8102E;
  --dv-deep:#000000;
}
body{background:#FFFFFF}
.dv-two__pic img{mix-blend-mode:normal;filter:contrast(1.18) saturate(0)}
.dv-close{background:#000;color:#FFF}
.dv-close__body{color:#BDBDBD}
.dv-close__last{color:var(--dv-red)}
.dv-said__p{color:#000}
.dv-name{color:#000}
.dv-line{color:#4A4A4A}
.dv-open__drawing{color:#000}
.dv-h2,.dv-one h3{color:#000}
.dv-prose,.dv-one p{color:#4A4A4A}

/* the bar and every ground are white too — nothing warm left anywhere */
.gk-bar,.gk-bar__inner,header.gk-bar,.gk-foot,footer{background:#FFFFFF!important}
.gk-bar{border-bottom:1px solid rgba(0,0,0,.09)}
.gk-bar__name,.gk-bar a{color:#000!important}
.gk-foot,.gk-foot *{color:#4A4A4A!important}
.gk-foot .gk-foot__name,.gk-foot strong{color:#000!important}
.dv-said,.dv-two,.dv-three,.dv-open{background:#FFFFFF}

/* HER NAME STANDS ABOVE THE DRAWING — hers, 24 September 2026: "the words, I
   think, should be above it." So she reads the name first, and the drawing
   arrives beneath it, unhurried. */
.dv-open{flex-direction:column}
.dv-open__words{order:1;margin:0 0 clamp(30px,4.5vw,58px);
  opacity:0;animation:dv-up 1.3s ease .25s forwards}
.dv-open__drawing{order:2;
  clip-path:inset(0 100% 0 0);animation:dv-draw 2.6s cubic-bezier(.36,.06,.2,1) 1.05s forwards}
.dv-thread{order:3;animation:dv-thread 1.4s ease 3.5s forwards}

/* ══ PURE WHITE, EVERYWHERE, INCLUDING WHAT SHE SEES WHEN SHE PULLS DOWN ══
   Hers, 24 September 2026: "This is not black and white. That's not white. I
   want it white as pure white can be, and then behind it you've still got this
   blush when I pull it down to refresh it."
   The blush was the page behind the page — html, and the browser's own
   overscroll. Both are white now. */
html{background:#FFFFFF!important;overscroll-behavior-y:none}
body{background:#FFFFFF!important}
:root{--ground:#FFFFFF;--ink:#000000;--dv-ground:#FFFFFF;--dv-ink:#000000}
#main,main,section,.gk-bar,.gk-foot{background-color:transparent}
.dv-open,.dv-said,.dv-two,.dv-three{background:#FFFFFF}

/* ══ THE CHANEL REGISTER — hers: "make DEVOCIUM look like AskGG, like it
   should be Chanel-like." So: pure white, true black, one red. Air. Very fine
   tracked capitals. Hairlines rather than rules. Nothing soft anywhere. ══ */
.dv-eyebrow{font-size:.68rem;letter-spacing:.46em;color:#000;margin-bottom:2.1em;
  font-weight:500}
.dv-name{letter-spacing:.17em;text-indent:.17em;font-weight:400;color:#000}
@media (max-width:820px){.dv-name{letter-spacing:.12em;text-indent:.12em}}
.dv-line{font-style:normal;font-family:var(--dv-body);font-size:.78rem;
  letter-spacing:.34em;text-transform:uppercase;color:#000;margin-top:2em}
.dv-thread{background:#C8102E;height:clamp(40px,5vw,64px);opacity:1}

.dv-said__p{font-family:var(--dv-name);font-weight:400;
  font-size:clamp(1.36rem,3.6vw,2.3rem);line-height:1.34;letter-spacing:.012em}

.dv-red{background:#000;color:#FFF}
.dv-red__verse{color:#FFF;font-family:var(--dv-head);font-weight:400}
.dv-red__law{color:#C8102E;font-family:var(--dv-name);letter-spacing:.02em}

.dv-h2{font-family:var(--dv-name);font-weight:400;letter-spacing:.03em;color:#000}
.dv-one h3{font-family:var(--dv-body);font-weight:600;font-size:.82rem;
  letter-spacing:.32em;text-transform:uppercase;color:#000}
.dv-one__rule{width:26px;background:#C8102E}
.dv-prose,.dv-one p{color:#3A3A3A}

.dv-close{background:#FFFFFF;color:#000}
.dv-close__head{font-family:var(--dv-name);font-weight:400;letter-spacing:.02em;color:#000}
.dv-close__body{color:#3A3A3A;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase}
.dv-close__last{color:#C8102E}
.gk-bar{border-bottom:1px solid #000}
.gk-foot,.gk-foot *{color:#3A3A3A!important}

/* ══ SILK — HER TYPE (10 Oct 2026). Hers: "the fonts for DEVOCIUM — we need to change", then, shown four on the
   page, "Either silk or velvet." Silk: a tall, fine Italiana for the name and the headings, a soft Cormorant
   italic for everything she reads slowly, Jost light for the small voice. ══ */
:root{--dv-name:'Italiana',serif;--dv-head:'Cormorant Garamond',Georgia,serif;--dv-body:'Jost',system-ui,sans-serif}
.dv-name{font-family:'Italiana',serif;letter-spacing:.22em;text-indent:.22em}
@media (max-width:820px){.dv-name{letter-spacing:.14em;text-indent:.14em}}
.dv-h2,.dv-close__head,.dv-said__p{font-family:'Italiana',serif;font-style:normal}
.dv-red__verse,.dv-red__law,.dv-minute__say,.dv-minute__lead,.dv-minute__end{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic}
.dv-eyebrow,.dv-line,.dv-one h3,.dv-close__body,.dv-prose,.dv-one p,.dv-minute__go,.dv-minute__stop,.gk-bar__name{font-family:'Jost',system-ui,sans-serif}
.dv-prose,.dv-one p{font-weight:300}