/* Healing Grief 24 — dark-editorial design system. Self-hosted fonts; tokens on :root. */
:root {
  color-scheme: dark;
  --bg:#0a0908; --paper:#0f0d0b; --fg:#f4ecdf;
  --dim:rgba(244,236,223,0.66); --faint:rgba(244,236,223,0.22); --pink:#d4677f;
  --serif:'Lora',Georgia,serif; --script:'Italianno',cursive; --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1100px;
}
/* @font-face — one block per face, font-display: swap */
@font-face{font-family:'Italianno';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/italianno-400.woff2) format('woff2');}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lora-400.woff2) format('woff2');}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/lora-400i.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jetbrains-mono-500.woff2) format('woff2');}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;scroll-padding-top:clamp(72px,12vw,96px);}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--serif);line-height:1.6;overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--pink);color:var(--bg);}
img{display:block;max-width:100%;}
/* <picture> wraps each responsive <img>; display:contents keeps the <img> the effective child of
   .hero/.portrait/.video-facade so their height:100% / absolute-inset rules resolve unchanged. */
picture{display:contents;}

.skip-link{position:absolute;left:-999px;top:0;}
.skip-link:focus{left:0;padding:.5rem 1rem;background:var(--bg);color:var(--fg);z-index:100;}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px;}

/* shared display/eyebrow helpers — journal metrics */
.display{font-family:var(--script);font-weight:400;letter-spacing:0;line-height:.92;}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--pink);margin:0 0 18px;display:flex;align-items:center;gap:10px;font-weight:400;}
.hg-dot{width:6px;height:6px;border-radius:50%;background:var(--pink);display:inline-block;}
.hg-link{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;transition:opacity .2s;}
.hg-link:hover{opacity:.75;}
.chip{display:inline-flex;align-items:center;padding:.45em .9em;border-radius:999px;border:1px solid var(--pink);color:var(--pink);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;}

/* header (black sticky strip, solid pink) */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:.5px solid color-mix(in srgb, var(--pink) 20%, transparent);}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;max-width:1600px;margin:0 auto;padding:clamp(16px,2.5vw,24px) clamp(20px,5vw,72px);}
.brand{display:flex;flex-direction:column;gap:4px;line-height:1.1;text-decoration:none;color:var(--pink);font-family:var(--mono);text-transform:uppercase;}
.brand-name{font-size:15px;letter-spacing:.16em;font-weight:500;display:flex;align-items:center;gap:8px;}
.brand-sub{font-size:9px;letter-spacing:.3em;color:var(--dim);}
.site-nav{display:flex;flex-wrap:wrap;gap:18px 28px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;}
.site-nav a{color:var(--pink);text-decoration:none;}

/* hero banner */
.hero{position:relative;height:62vh;min-height:440px;overflow:hidden;background:var(--bg);}
.hero-photo{width:100%;height:100%;object-fit:cover;}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:overlay;background-image:url(../img/grain.svg);}

/* about */
.about{padding:clamp(56px,8vw,110px) clamp(20px,5vw,72px) clamp(72px,11vw,150px);}
.headline{margin:0;font-size:calc(clamp(48px,9vw,128px) * 1.15);text-wrap:balance;}
.tagline{margin:18px 0 0;font-style:italic;font-size:clamp(18px,2.2vw,28px);line-height:1.3;color:var(--pink);text-wrap:balance;}
.about,.video,.offerings,.contact{position:relative;}
.measure{max-width:var(--maxw);margin-inline:auto;}
.about-grid{display:grid;grid-template-columns:340px 1fr;gap:72px;align-items:start;margin-top:clamp(40px,6vw,72px);}
.portrait{position:relative;aspect-ratio:4/5;max-width:340px;width:100%;margin:0;}
.portrait-frame{position:absolute;inset:0;border:1px solid color-mix(in srgb, var(--pink) 67%, transparent);transform:translate(12px,12px);}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;}
.portrait-badge{position:absolute;left:-8px;top:-8px;padding:5px 10px;background:var(--bg);color:var(--pink);border:1px solid color-mix(in srgb, var(--pink) 33%, transparent);font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;}
.bio p{font-size:clamp(17px,1.7vw,21px);line-height:1.6;text-wrap:pretty;margin:0 0 24px;}

/* video */
.video{padding:0 clamp(20px,5vw,72px) clamp(72px,11vw,130px);}
.video-frame{position:relative;max-width:880px;}
.video-offset{position:absolute;inset:0;border:1px solid color-mix(in srgb, var(--pink) 67%, transparent);transform:translate(12px,12px);pointer-events:none;}
.video-facade,.video-iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--faint);background:#000;}
.video-facade img{width:100%;height:100%;object-fit:cover;opacity:.7;}
.video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:var(--pink);box-shadow:0 8px 30px rgba(0,0,0,.4);}
.video-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-top:13px solid transparent;border-bottom:13px solid transparent;border-left:22px solid var(--bg);}
.video-watch{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--pink) 40%, transparent);}

/* offerings */
.offerings{background:var(--paper);border-top:.5px solid var(--faint);padding:clamp(72px,11vw,130px) clamp(20px,5vw,72px);}
.offer-list{list-style:none;margin:clamp(16px,3vw,32px) auto 0;padding:0;border-top:.5px solid var(--faint);}
.offer{display:flex;align-items:baseline;gap:40px;padding:clamp(24px,4vw,40px) 0;border-bottom:.5px solid var(--faint);transition:padding-left .25s;}
.offer:hover{padding-left:12px;}
.offer-tag{font-family:var(--mono);font-size:clamp(11px,1.2vw,13px);letter-spacing:.1em;color:var(--pink);min-width:44px;}
.offer-title{font-size:calc(clamp(30px,5vw,60px) * 1.15);line-height:1.02;}
.soon-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(48px,6vw,72px);}
.soon-card{display:flex;align-items:center;gap:20px;padding:clamp(24px,3vw,32px);border:.5px dashed var(--faint);border-radius:4px;}
.soon-title{font-size:calc(22px * 1.15);line-height:1.1;margin:0;}
.soon-body{font-size:14px;color:var(--dim);margin:4px 0 0;}

/* contact */
.contact{border-top:.5px solid var(--faint);padding:clamp(80px,12vw,160px) clamp(20px,5vw,72px) clamp(60px,8vw,100px);}
.contact-title{font-size:clamp(40px,5.5vw,72px);line-height:.95;letter-spacing:-0.015em;color:var(--pink);font-style:italic;margin:0;}
.contact-rows{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0;display:grid;gap:18px;max-width:560px;}
.contact-rows li{display:grid;grid-template-columns:60px 1fr;align-items:baseline;gap:18px;padding-bottom:14px;border-bottom:.5px solid var(--faint);}
.contact-label{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);}
.contact-rows a{font-size:clamp(17px,1.6vw,21px);}

/* footer */
.site-footer{border-top:.5px solid var(--faint);padding:clamp(40px,6vw,64px) clamp(20px,5vw,72px) clamp(28px,4vw,40px);}
.footer-contact{max-width:var(--maxw);margin:0 auto;display:flex;gap:24px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}
.footer-contact .dot{color:var(--pink);}

/* entrance motion (disabled for reduced-motion). Transform-only — never animate opacity on
   text, so the rendered text always sits at full contrast (a mid-fade frame would otherwise
   read as a darkened pink/cream and trip the axe colour-contrast gate). */
@keyframes hg-rise{from{transform:translateY(14px);}to{transform:none;}}
.headline,.tagline{animation:hg-rise 1.1s cubic-bezier(.2,.7,.3,1) both;}
.tagline{animation-delay:.18s;}

/* responsive */
@media (max-width:760px){
  /* drop the whole nav onto its own row under the brand instead of letting it
     ragged-wrap beside a shrinking brand; keep the links on one line */
  .site-nav{flex-basis:100%;flex-wrap:nowrap;justify-content:flex-start;}
  .hero{height:48svh;min-height:320px;}
  .about-grid{grid-template-columns:1fr;gap:40px;}
  .portrait{max-width:300px;margin:0 auto;}
  .soon-grid{grid-template-columns:1fr;}
  .offer{gap:20px;}
  .offer:hover{padding-left:0;}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}