/* =========================================================
   ISOLDE — link in bio
   One screen. No scroll. Every vertical size scales with the
   real viewport height, and detail sheds as screens get short.
   ========================================================= */

:root{
  --wine:          #541421;
  --wine-deep:     #2A0A10;
  --wine-lift:     #6E1B2C;
  --ivory:         #F6EEE8;
  --sand:          #E9D7CC;
  --rose:          #C9A89A;

  --ivory-90: rgba(246,238,232,.90);
  --ivory-70: rgba(246,238,232,.70);
  --ivory-62: rgba(246,238,232,.62);
  --ivory-52: rgba(246,238,232,.52);
  --ivory-38: rgba(246,238,232,.38);

  --hairline:      rgba(233,215,204,.16);
  --hairline-lift: rgba(233,215,204,.40);

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  300ms;

  /* 1% of the *visible* viewport height — dvh where supported */
  --vh: 1vh;

  --gutter: clamp(18px, 5.6vw, 30px);
  --measure: 560px;
}

@supports (height:1dvh){
  :root{ --vh:1dvh; }
}

/* vertical rhythm unit — everything spaces off this */
:root{ --sp: clamp(4px, calc(var(--vh) * .95), 12px); }

/* ── reset ─────────────────────────────────────────────── */

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

html{
  -webkit-text-size-adjust:100%;
  height:100%;
}

body{
  margin:0;
  height:100%;
  overflow:hidden;                 /* the page itself never scrolls */
  overscroll-behavior:none;
  font-family:var(--sans);
  font-weight:300;
  color:var(--ivory-70);
  background-color:var(--wine);
  background-image:
    radial-gradient(120% 78% at 50% -12%, #732033 0%, #5C1725 34%, #4A1120 62%, #330D16 88%, #2A0A10 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
h1,h2,p{ margin:0; }

::selection{ background:var(--rose); color:var(--wine-deep); }

:focus-visible{
  outline:1px solid var(--sand);
  outline-offset:4px;
  border-radius:4px;
}

/* premium scrollbar — only ever seen in the safety-valve case */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:rgba(201,168,154,.28);
  border-radius:99px;
}
.shell{ scrollbar-width:thin; scrollbar-color:rgba(201,168,154,.28) transparent; }

/* =========================================================
   ATMOSPHERE — light, satin, sheen, grain
   ========================================================= */

.atmosphere{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

/* faint light through a window, upper left */
.atmosphere__window{
  position:absolute;
  top:-14%; left:-24%;
  width:96%; height:78%;
  transform:rotate(-13deg) skewX(-14deg);
  filter:blur(26px);
  opacity:.55;
  background:
    linear-gradient(90deg,  transparent 45.5%, rgba(42,10,16,.55) 46%, rgba(42,10,16,.55) 49.5%, transparent 50%),
    linear-gradient(0deg,   transparent 55.5%, rgba(42,10,16,.55) 56%, rgba(42,10,16,.55) 58.5%, transparent 59%),
    linear-gradient(155deg, rgba(246,238,232,.17) 0%, rgba(246,238,232,.06) 46%, rgba(246,238,232,0) 76%);
}

/* satin folds pooling at the bottom */
.atmosphere__satin{
  position:absolute;
  left:-20%; right:-20%; bottom:-16%;
  height:58%;
  filter:blur(34px);
  opacity:.85;
  background:
    radial-gradient(58% 42% at 22% 84%, rgba(140,40,58,.55), transparent 68%),
    radial-gradient(48% 34% at 72% 96%, rgba(168,52,72,.40), transparent 70%),
    radial-gradient(70% 30% at 50% 118%, rgba(28,8,13,.85), transparent 72%),
    linear-gradient(0deg, rgba(28,8,13,.72), transparent 74%);
}

/* slow silk reflection travelling across the page */
.atmosphere__sheen{
  position:absolute;
  top:-30%; left:-60%;
  width:80%; height:170%;
  transform:rotate(14deg);
  background:linear-gradient(90deg,
    rgba(246,238,232,0) 0%,
    rgba(246,238,232,.035) 42%,
    rgba(255,246,240,.075) 50%,
    rgba(246,238,232,.035) 58%,
    rgba(246,238,232,0) 100%);
  filter:blur(16px);
  animation:silk 22s var(--ease) infinite;
}

@keyframes silk{
  0%   { transform:translate3d(0,0,0) rotate(14deg);    opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { transform:translate3d(230%,0,0) rotate(14deg); opacity:0; }
}

.atmosphere__vignette{
  position:absolute; inset:0;
  background:radial-gradient(122% 88% at 50% 34%, transparent 44%, rgba(24,6,11,.55) 100%);
}

/* very subtle grain */
.atmosphere__grain{
  position:absolute;
  inset:-50%;
  opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   LAYOUT — one screen tall
   ========================================================= */

.shell{
  position:relative;
  z-index:1;
  height:100vh;
  height:calc(var(--vh) * 100);
  display:flex;
  justify-content:center;
  align-items:flex-start;          /* don't stretch .page — its box must track its content */
  /* safety valve: if a device is too short even for the tightest
     tier, content stays reachable instead of being clipped */
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:
    calc(env(safe-area-inset-top) + var(--sp) * 1.8)
    calc(env(safe-area-inset-right) + var(--gutter))
    calc(env(safe-area-inset-bottom) + var(--sp) * 1.5)
    calc(env(safe-area-inset-left) + var(--gutter));
}

/* auto block margins centre the page when there is spare height, and
   collapse to 0 when there isn't — so an overflowing page scrolls from
   the top instead of having its head cut off */
.page{
  width:100%;
  max-width:var(--measure);
  margin-block:auto;
  display:flex;
  flex-direction:column;
}

/* hairline rules */
.rule{
  height:1px;
  margin-inline:auto;
  background:linear-gradient(90deg, transparent, var(--hairline-lift), transparent);
}
.rule--short{
  width:54px;
  margin-block:calc(var(--sp) * 1.35);
}
.rule--wide{ width:100%; opacity:.7; }

/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  text-align:center;
  padding-bottom:calc(var(--sp) * 2.4);
}

.hero__glow{
  position:absolute;
  top:calc(var(--sp) * -3); left:50%;
  width:min(420px, 108%);
  height:min(230px, calc(var(--vh) * 26));
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,232,219,.14), rgba(255,232,219,.05) 58%, transparent 78%);
  filter:blur(28px);
  animation:breathe 11s ease-in-out infinite;
}

@keyframes breathe{
  0%,100%{ opacity:.75; transform:translateX(-50%) scale(1); }
  50%    { opacity:1;   transform:translateX(-50%) scale(1.06); }
}

.logo{
  position:relative;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.7rem, 9.6vw, 3.05rem);
  font-size:clamp(1.7rem, min(9.6vw, calc(var(--vh) * 5.1)), 3.05rem);
  line-height:1.04;
  letter-spacing:.40em;
  text-indent:.40em;               /* optical centering against the tracking */
  color:var(--ivory);
  text-shadow:0 1px 30px rgba(255,236,224,.16);
}

.hero__tagline{
  font-size:clamp(.57rem, 2.85vw, .66rem);
  font-size:clamp(.57rem, min(2.85vw, calc(var(--vh) * 1.42)), .66rem);
  font-weight:300;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--ivory-52);
  text-indent:.30em;
}

.hero__quote{
  margin-top:calc(var(--sp) * 1.8);
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:clamp(.9rem, 4.05vw, 1.24rem);
  font-size:clamp(.9rem, min(4.05vw, calc(var(--vh) * 2.1)), 1.24rem);
  line-height:1.5;
  letter-spacing:.012em;
  color:var(--ivory-90);
}

/* =========================================================
   LINK CARDS
   ========================================================= */

.links{
  display:flex;
  flex-direction:column;
  gap:clamp(5px, calc(var(--vh) * .82), 10px);
  margin-top:calc(var(--sp) * 1.2);
}

.card{
  position:relative;
  display:grid;
  grid-template-columns:22px 1fr 18px;
  align-items:center;
  gap:clamp(12px, 4vw, 17px);
  min-height:46px;                 /* comfortable tap target */
  padding:clamp(8px, calc(var(--vh) * 1.32), 17px) clamp(15px, 4.4vw, 22px);
  border:1px solid var(--hairline);
  border-radius:15px;
  background:linear-gradient(180deg, rgba(246,238,232,.055), rgba(246,238,232,.018));
  box-shadow:0 14px 30px -24px rgba(16,4,8,.9);
  transition:transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}

@supports (backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px)){
  .card{ -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
}

.card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--rose);
  transition:color var(--dur) var(--ease);
}

.icon{ width:21px; height:21px; }

.card__text{
  display:flex;
  flex-direction:column;
  gap:clamp(2px, calc(var(--vh) * .3), 4px);
  min-width:0;
}

.card__title{
  font-size:clamp(.7rem, 3.4vw, .77rem);
  font-size:clamp(.7rem, min(3.4vw, calc(var(--vh) * 1.5)), .77rem);
  font-weight:400;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--ivory);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.card__sub{
  font-size:clamp(.67rem, 3.3vw, .75rem);
  font-size:clamp(.67rem, min(3.3vw, calc(var(--vh) * 1.45)), .75rem);
  font-weight:300;
  letter-spacing:.045em;
  color:var(--ivory-62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.card__arrow{
  width:18px; height:18px;
  color:var(--ivory-38);
  transition:transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* primary action — carries the hierarchy now that the page is a list */
.card--primary{
  overflow:hidden;
  border-color:rgba(233,215,204,.38);
  background:linear-gradient(168deg, rgba(246,238,232,.115), rgba(246,238,232,.04) 55%, rgba(42,10,16,.20));
  box-shadow:
    0 18px 38px -24px rgba(16,4,8,.95),
    inset 0 1px 0 rgba(246,238,232,.10);
}

.card--primary::before{
  content:"";
  position:absolute;
  top:-60%; left:-40%;
  width:40%; height:220%;
  transform:rotate(18deg);
  background:linear-gradient(90deg, transparent, rgba(255,246,240,.10), transparent);
  filter:blur(8px);
  pointer-events:none;
  animation:cardSweep 11s var(--ease) infinite;
}

@keyframes cardSweep{
  0%,60%  { transform:translate3d(0,0,0) rotate(18deg); }
  93%,100%{ transform:translate3d(520%,0,0) rotate(18deg); }
}

.card--primary .card__icon { color:var(--sand); }
.card--primary .card__arrow{ color:var(--ivory-70); }
.card--primary .card__title{ letter-spacing:.22em; }
.card--primary .card__sub  { color:var(--ivory-70); }

/* ── interaction ──────────────────────────────────────── */

@media (hover:hover) and (pointer:fine){
  .card:hover{
    transform:translateY(-2px);
    border-color:var(--hairline-lift);
    background-color:rgba(246,238,232,.03);
    box-shadow:0 22px 38px -26px rgba(16,4,8,1);
  }
  .card:hover .card__arrow{ transform:translateX(4px); color:var(--ivory-90); }
  .card:hover .card__icon{ color:var(--sand); }

  .card--primary:hover{
    border-color:rgba(233,215,204,.58);
    box-shadow:0 26px 46px -26px rgba(16,4,8,1), inset 0 1px 0 rgba(246,238,232,.16);
  }

  .ghost:hover{
    border-color:var(--sand);
    background:rgba(246,238,232,.06);
    color:var(--ivory);
  }
  .footer__links a:hover{ color:var(--ivory-90); }
}

.card:active{
  transform:scale(.985);
  border-color:var(--hairline-lift);
  background-color:rgba(246,238,232,.045);
}
.ghost:active{ transform:scale(.985); background:rgba(246,238,232,.07); }

/* =========================================================
   HELP
   ========================================================= */

.help{
  margin-top:calc(var(--sp) * 2.2);
  text-align:center;
}

.help__title{
  margin-top:calc(var(--sp) * 1.6);
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1rem, 4.4vw, 1.45rem);
  font-size:clamp(1rem, min(4.4vw, calc(var(--vh) * 2.2)), 1.45rem);
  line-height:1.25;
  letter-spacing:.02em;
  color:var(--ivory);
}

.help__text{
  margin-top:calc(var(--sp) * .9);
  font-size:clamp(.72rem, 3.4vw, .8rem);
  font-size:clamp(.72rem, min(3.4vw, calc(var(--vh) * 1.5)), .8rem);
  font-weight:300;
  letter-spacing:.05em;
  color:var(--ivory-62);
}

.ghost{
  display:inline-block;
  margin-top:calc(var(--sp) * 1.8);
  padding:clamp(9px, calc(var(--vh) * 1.35), 15px) clamp(24px, 7vw, 34px);
  border:1px solid var(--hairline-lift);
  border-radius:99px;
  font-size:clamp(.6rem, 2.9vw, .68rem);
  font-size:clamp(.6rem, min(2.9vw, calc(var(--vh) * 1.4)), .68rem);
  letter-spacing:.26em;
  text-transform:uppercase;
  text-indent:.26em;
  color:var(--ivory-90);
  transition:transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             color var(--dur) var(--ease);
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  margin-top:calc(var(--sp) * 2);
  padding-top:calc(var(--sp) * 1.5);
  border-top:1px solid rgba(233,215,204,.10);
  text-align:center;
}

.footer__mark{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(.78rem, 3.6vw, .94rem);
  font-size:clamp(.78rem, min(3.6vw, calc(var(--vh) * 1.7)), .94rem);
  letter-spacing:.42em;
  text-indent:.42em;
  color:var(--ivory-90);
}

.footer__place{
  margin-top:calc(var(--sp) * .7);
  font-size:clamp(.58rem, 2.8vw, .67rem);
  font-size:clamp(.58rem, min(2.8vw, calc(var(--vh) * 1.3)), .67rem);
  font-weight:300;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ivory-52);
}

.footer__links{
  margin-top:calc(var(--sp) * 1.4);
  font-size:clamp(.6rem, 2.9vw, .68rem);
  font-size:clamp(.6rem, min(2.9vw, calc(var(--vh) * 1.35)), .68rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ivory-52);
}
.footer__links a{ transition:color var(--dur) var(--ease); }
.footer__dot{ margin:0 10px; color:var(--ivory-38); }

.footer__copy{
  margin-top:calc(var(--sp) * 1.4);
  font-size:clamp(.55rem, 2.7vw, .62rem);
  font-size:clamp(.55rem, min(2.7vw, calc(var(--vh) * 1.25)), .62rem);
  font-weight:300;
  letter-spacing:.16em;
  color:rgba(246,238,232,.36);
}

/* =========================================================
   FIT TIERS
   Script measures the real viewport and picks the richest
   tier that still fits. Falls back to "full" if JS never runs.
   ========================================================= */

[data-fit="compact"] .footer__links{ display:none; }

[data-fit="tight"] .footer__links,
[data-fit="tight"] .help__text,
[data-fit="tight"] .footer__place{ display:none; }

[data-fit="minimal"] .footer__links,
[data-fit="minimal"] .help__text,
[data-fit="minimal"] .footer__place,
[data-fit="minimal"] .hero__quote,
[data-fit="minimal"] .footer__mark{ display:none; }

[data-fit="minimal"] .footer{ margin-top:calc(var(--sp) * 1.4); }
[data-fit="minimal"] .footer__copy{ margin-top:0; }

/* last resort — drop the help block, keep every link */
[data-fit="bare"] .footer__links,
[data-fit="bare"] .help,
[data-fit="bare"] .hero__quote,
[data-fit="bare"] .footer__mark,
[data-fit="bare"] .footer__place{ display:none; }

[data-fit="bare"] .footer{ margin-top:calc(var(--sp) * 1.4); }
[data-fit="bare"] .footer__copy{ margin-top:0; }

/* =========================================================
   ENTRANCE
   ========================================================= */

/* CSS-only, so the page can never be left invisible by a script hiccup */

/* animates `translate`, not `transform`, so hover/press transforms stay free */
@keyframes reveal{
  from{ opacity:0; translate:0 15px; }
  to  { opacity:1; translate:0 0; }
}

[data-reveal]{
  opacity:0;
  animation:reveal 900ms var(--ease) var(--d, 0ms) both;
}

.logo          { --d:60ms;  }
.hero .rule    { --d:240ms; }
.hero__tagline { --d:330ms; }
.hero__quote   { --d:440ms; }

.links .card:nth-child(1){ --d:580ms; }
.links .card:nth-child(2){ --d:670ms; }
.links .card:nth-child(3){ --d:760ms; }
.links .card:nth-child(4){ --d:850ms; }

.help  { --d:960ms;  }
.footer{ --d:1060ms; }

/* =========================================================
   WIDTH TWEAKS
   ========================================================= */

/* very small phones — 320px */
@media (max-width:359px){
  .logo{ letter-spacing:.32em; text-indent:.32em; }
  .hero__tagline{ letter-spacing:.22em; text-indent:.22em; }
  .card{ grid-template-columns:20px 1fr 16px; }
  .card__title{ letter-spacing:.15em; }
  .footer__mark{ letter-spacing:.34em; text-indent:.34em; }
}

/* tablet and up — keep the mobile composition, add air */
@media (min-width:768px){
  :root{ --measure:520px; }
}

/* landscape phones can't hold a one-screen layout — let it scroll */
@media (max-height:520px) and (orientation:landscape){
  .shell{
    height:auto;
    min-height:100vh;
    min-height:calc(var(--vh) * 100);
    padding-block:32px;
  }
  body{ overflow:auto; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  .atmosphere__sheen,
  .card--primary::before,
  .hero__glow{ animation:none; }

  .atmosphere__sheen{ opacity:.5; transform:translate3d(90%,0,0) rotate(14deg); }

  [data-reveal]{ animation:none; opacity:1; translate:0 0; }

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}