body{
  margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,.94rem + .28vw,1.0625rem);line-height:1.78;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
[id]{scroll-margin-top:6.5rem}

/* type primitives -------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);width:100%}
section{position:relative}
.eyebrow{
  font-family:var(--cond);font-weight:400;font-size:clamp(.8125rem,.765rem + .2vw,.875rem);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);line-height:1;
}

/* animated highlight, revealed with its section ---------------- */
.hl{
  background-image:linear-gradient(
    transparent 16%, rgba(237,165,125,.55) 16%,
    rgba(237,165,125,.55) 84%, transparent 84%);
  background-repeat:no-repeat;background-size:0% 100%;
  transition:background-size .9s var(--ease) .2s;
}
.is-in .hl{background-size:100% 100%}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink-deep);border-color:var(--apricot)}
.btn--ghost:hover{border-color:var(--apricot)}
.btn--terra::before{background:var(--ink-deep)}
.btn--terra:hover,.btn--terra:focus-visible{color:var(--cream);border-color:var(--ink-deep)}
.btn--lg{padding:1.32em 2.35em;letter-spacing:.14em;font-size:clamp(.9375rem,.89rem + .3vw,1.0625rem)}
.ulink{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--cond);font-weight:500;font-size:.9375rem;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  padding-bottom:.42em;position:relative;color:var(--ink);
}
.ulink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform-origin:right;transform:scaleX(1);
  transition:transform .42s var(--ease);
}
.ulink:hover::after{transform:scaleX(0);transform-origin:left}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;padding:1.6rem 0;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
}
.nav__sublink[aria-current="page"]{color:var(--terracotta)}

/* ========================== INTRO ============================ */
/* One face and three short paragraphs before the long read starts, so the
   reader knows who is talking before they are asked for eight minutes. */
/* the page now opens straight onto this section, so its run-up has to clear
   the fixed nav rather than sit under it */
.intro{background:var(--white);overflow:hidden;padding:clamp(8rem,14vh,10.5rem) 0 clamp(3rem,6vw,5rem)}
.intro__grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
/* the size is capped so "Why I do what I do" stays on one line in the left
   column — at the widest that column is ~554px, and the line needs about
   7.6em, so anything past ~4.5rem breaks it over two lines */
.intro__q{
  font-family:var(--serif);font-size:clamp(2.3rem,5.2vw,4.35rem);
  line-height:.94;letter-spacing:-.045em;
}
.intro__q .sub{
  display:block;font-family:var(--script);color:var(--terracotta);
  font-size:.6em;line-height:.86;margin-top:.14em;
  transform:rotate(-1.8deg);transform-origin:left;
}
.intro__body{margin-top:clamp(1.1rem,2vw,1.6rem);color:var(--ink-soft);font-size:.9875rem;line-height:1.82;max-width:56ch}
.intro__body p{margin-bottom:1.1em}
.intro__body strong{font-weight:600;color:var(--ink)}
.intro__fig{margin:0;position:relative}
.intro__fig::before{
  content:"";position:absolute;inset:0;transform:translate(6%,6%);
  background:var(--blush);border-radius:6px;
}
.intro__fig img{
  position:relative;z-index:1;width:100%;border-radius:6px;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;
  box-shadow:0 40px 84px -58px rgba(20,18,17,.65);
}

/* ========================= THE CLOSE ========================= */
.close{background:var(--sand);overflow:hidden;padding:clamp(3rem,6vw,5rem) 0 clamp(4rem,8vw,7rem)}
.close::before{
  content:"";position:absolute;inset:-22% -12% auto auto;width:42vw;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(237,165,125,.32),transparent 66%);
  pointer-events:none;
}
.close__grid{
  position:relative;display:grid;grid-template-columns:.88fr 1.12fr;
  gap:clamp(2.5rem,6vw,5.5rem);align-items:center;
}
/* Bild links, Text rechts. Per Grid-Platzierung statt per DOM-Reihenfolge,
   damit die Lesereihenfolge (Überschrift → Fließtext → Bild) erhalten bleibt. */
.close__fig{grid-area:1/1}
.close__copy{grid-area:1/2}
.close__lead{
  font-family:var(--serif);font-weight:400;
  /* Rund 10% kleiner als zuvor (2.55rem / 1rem + 2vw): dort rutschte "it." als
     dritte Zeile um. Mit diesen Werten steht die Headline über den ganzen
     Zweispalter-Bereich (ab 1081px) auf zwei Zeilen. */
  font-size:clamp(1.45rem,.78rem + 1.87vw,2.3rem);
  line-height:1.16;letter-spacing:-.03em;margin-bottom:clamp(1.3rem,2.5vw,1.9rem);
}
.close__lead em{font-style:italic;color:var(--terracotta)}
.close__body{color:var(--ink-soft);font-size:.9875rem;line-height:1.82}
.close__body p{margin-bottom:1.1em}
.close__body strong{font-weight:600;color:var(--ink)}
.close__fig{margin:0;position:relative}
.close__fig::before{
  content:"";position:absolute;inset:0;transform:translate(6%,6%);
  background:var(--blush);border-radius:6px;
}
.close__fig img{
  position:relative;z-index:1;width:100%;border-radius:6px;
  aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;
  box-shadow:0 40px 84px -58px rgba(20,18,17,.65);
}
.close__sign{
  margin-top:clamp(2.6rem,5vw,4rem);display:flex;align-items:flex-end;
  justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.close__cta{display:flex;flex-wrap:wrap;gap:clamp(.8rem,1.6vw,1.4rem)}
.close__hand{display:block;line-height:.9}
.close__hand .s1{
  font-family:var(--script);font-weight:500;color:var(--ink-faint);
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem);display:block;transform:rotate(-2deg);
  transform-origin:left;
}
.close__hand .s2{
  font-family:var(--script);font-weight:600;color:var(--terracotta);
  font-size:clamp(2.8rem,2rem + 3.4vw,5rem);display:block;margin-top:.06em;
  transform:rotate(-3deg);transform-origin:left;
}

/* ======================== LOVE NOTES ========================= */
.notes{
  background:var(--white);position:relative;overflow:hidden;
  padding:clamp(2.5rem,5vw,4.5rem) 0;
}
.notes::before{
  content:"";position:absolute;inset:auto -10% -30% auto;width:46vw;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(237,165,125,.28),transparent 66%);
}
.notes__head{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.5rem,1.2vw,.9rem);margin-bottom:clamp(2.6rem,5vw,4rem);position:relative;
}
.notes__title{
  font-family:var(--script);font-size:clamp(3.2rem,2rem + 5vw,6.4rem);
  color:var(--terracotta);line-height:.85;transform:rotate(-2deg);display:inline-block;
}
.notes__sub{
  font-family:var(--cond);font-weight:500;font-size:clamp(.875rem,.82rem + .24vw,1rem);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
}
.slider{position:relative;max-width:1100px;margin-inline:auto}
.cf{
  display:grid;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.cf-item{
  grid-area:1/1;justify-self:center;width:min(54%,600px);margin:0;
  background:var(--paper);border-radius:6px;padding:clamp(1.7rem,2.9vw,2.7rem);
  display:flex;flex-direction:column;
  box-shadow:0 44px 84px -62px rgba(83,79,81,.75);
  transition:transform .75s var(--ease),opacity .75s var(--ease);
  will-change:transform,opacity;
}
.cf-item:not(.is-active){cursor:pointer}
/* pre-JS default. go() inline-styles the whole stack, but it only runs with the
   script at the foot of the page — until then every card sits in the same grid
   cell untransformed and the LAST one in the DOM paints on top, so the slider
   opened on the wrong quote. The scroll reveal normally covers that (.slider is
   .rv, opacity:0 until it enters the viewport), but under prefers-reduced-motion
   .rv is opaque from the first frame and the flash was on show. */
.cf-item:not(:first-child){opacity:0}
.quote-card__pull{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,.98rem + .8vw,1.65rem);
  line-height:1.26;letter-spacing:-.022em;position:relative;padding-top:.7em;
}
.quote-card__pull::before{
  content:"\201C";position:absolute;top:-.1em;left:-.06em;
  font-size:3.2em;line-height:1;color:var(--apricot);opacity:.5;font-style:normal;
}
.quote-card__body{margin-top:1.3rem;font-size:.9125rem;line-height:1.8;color:var(--ink-soft);flex:1}
.cf-item--long .quote-card__body{font-size:.855rem;line-height:1.76}
.cf-item--long .quote-card__pull{font-size:clamp(1.05rem,.92rem + .68vw,1.5rem)}
.quote-card__body p+p{margin-top:1em}
.quote-card__who{
  margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--hairline);
  display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;
}
.quote-card__initials{font-family:var(--serif);font-size:1.35rem;letter-spacing:.06em}
.quote-card__loc{font-family:var(--cond);font-weight:400;font-size:.875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.slider__ui{display:flex;align-items:center;justify-content:center;gap:1.6rem;margin-top:clamp(2rem,3.6vw,2.8rem)}
.sbtn{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--hairline);
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.sbtn:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.dots{display:flex;gap:.6rem}
.dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:var(--ink-faint);cursor:pointer;transition:.4s var(--ease)}
.dot[aria-current="true"]{background:var(--terracotta);width:26px;border-radius:999px}

/* =========================== CTA ============================= */
.cta{background:var(--apricot);color:var(--ink-deep);position:relative;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:-40% -10% auto auto;width:52vw;aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.24);
}
.cta__in{
  padding:clamp(2.5rem,5vw,4.25rem) 0 clamp(5rem,10vw,8.5rem);
  position:relative;text-align:center;
}
/* white, not --ink-deep: the handwriting opens the band and should read as the
   light thing sitting on the apricot, not as another line of dark type. The
   question under it keeps --ink-deep — same split as the CTA on index.html. */
.cta__script{
  font-family:var(--script);font-size:clamp(2.6rem,1.7rem + 3.8vw,5rem);
  line-height:.9;transform:rotate(-2deg);display:inline-block;color:var(--white);
}
.cta__q{
  font-family:var(--serif);font-size:clamp(1.6rem,1.15rem + 1.9vw,2.85rem);
  line-height:1.16;letter-spacing:-.026em;max-width:26ch;margin:clamp(1.4rem,2.6vw,2rem) auto 0;
}
.cta__btns{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:clamp(.8rem,1.6vw,1.4rem);margin-top:clamp(2.2rem,4vw,3.2rem);
}
.cta__btns .btn{text-align:center}

/* ========================= FOOTER ============================ */
.foot{background:var(--ink-deep);color:#FFFFFF;padding:clamp(2.75rem,5.5vw,4.25rem) 0 1.75rem}

/* ======================== REVEALS ============================ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}

/* ====================== RESPONSIVE =========================== */
@media (max-width:1080px){
  /* six nav items no longer fit on one line — fold into the full-screen menu */
  .nav__links{
    position:fixed;inset:0 0 auto;top:0;background:var(--cream);
    flex-direction:column;justify-content:center;gap:1.7rem;height:100dvh;
    clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);margin-bottom:0;
  }
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0)}
  .nav__link{font-size:1.5rem;font-family:var(--serif);letter-spacing:.04em;text-transform:none}
  .burger{display:block;position:relative;z-index:2}
  .intro__grid,.close__grid{grid-template-columns:1fr;gap:clamp(2.6rem,6vw,3.8rem)}
  .intro__fig,.close__fig{max-width:480px;width:100%;margin-inline:auto}
  /* einspaltig: feste Platzierung aufheben, sonst legen sich Bild und Text übereinander */
  .close__fig,.close__copy{grid-area:auto}
  /* the portrait leads on a phone; the copy reads underneath it */
  .intro__fig{order:-1}
  .cf-item{width:min(78%,600px)}
  .cta__btns{flex-direction:column;align-items:center}
  .cta__btns .btn{width:min(100%,26rem);justify-content:center}
}
@media (max-width:860px){
  .cf-item{width:min(88%,600px)}
  .cf{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  }
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1/-1}
}
@media (max-width:640px){
  /* Nur auf dem Handy: das Portrait steht nicht mehr über der Überschrift,
     sondern unter dem ersten Absatz ("Today I'm an ADHD Workplace & Strategy
     Consultant …"). Das Bild ist ein Geschwister von .intro__copy und kann
     per order allein nicht zwischen dessen Absätze rutschen — deshalb lösen
     sich .intro__copy und .intro__body hier per display:contents auf.
     Überschrift, Absätze und Bild werden dadurch alle zu direkten Zellen von
     .intro__grid und lassen sich frei sortieren. Zwei Folgen davon:
     .intro__copy hat keine Box mehr, das Scroll-Reveal (.rv) greift für den
     Text hier also nicht — der Abschnitt steht ohnehin ganz oben auf der
     Seite. Und der Grid-Gap stünde jetzt zwischen jedem Absatz, deshalb
     geht er auf 0 und die Abstände kommen wieder aus den Margins. */
  .intro__grid{gap:0}
  .intro__copy,.intro__body{display:contents}
  .intro__q{order:1}
  .intro__body>p{order:4}
  /* der erste Absatz trägt den Abstand, den sonst .intro__body setzt */
  .intro__body>p:first-child{order:2;margin-top:clamp(1.1rem,2vw,1.6rem)}
  .intro__fig{order:3;margin-block:.6rem 2rem}

  /* on a phone the long quotes ran taller than the screen. the body drops
     another step, the card's padding and rules close up with it, and the
     --long variants are named too — they are two classes deep and a media
     query adds no specificity, so they would otherwise win on their own size. */
  .cf-item{padding:1.35rem 1.25rem 1.45rem}
  .quote-card__pull,
  .cf-item--long .quote-card__pull{font-size:1.06rem;line-height:1.3}
  .quote-card__body,
  .cf-item--long .quote-card__body{margin-top:.95rem;font-size:.8125rem;line-height:1.62}
  .quote-card__who{margin-top:1.1rem;padding-top:.9rem;gap:.6rem}
  .quote-card__initials{font-size:1.15rem}
  .quote-card__loc{font-size:.75rem;letter-spacing:.1em}
  /* all three cards sit in the same grid cell and stretch to the height of the
     longest one, so the two shorter notes were left with dead space under them.
     Their type goes up 10% to take some of it back — pull 1.06→1.17rem, body
     .8125→.89rem. The --long card keeps the sizes above; :not() puts these at
     (0,3,0), so they win on specificity as well as on order. */
  .cf-item:not(.cf-item--long) .quote-card__pull{font-size:1.17rem}
  .cf-item:not(.cf-item--long) .quote-card__body{font-size:.89rem}
}
@media (max-width:560px){
  .foot__grid{grid-template-columns:1fr}
  .close__sign{flex-direction:column;align-items:flex-start;gap:1.6rem}
  .close__cta{width:100%;flex-direction:column}
  .close__sign .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}