/* Quiet pencil colour fields; illustration edges merge into the page. */
.mobile-break{display:none}
@media(max-width:700px){
 .mobile-break{display:initial}
 .intro{gap:8px}
 .intro>div:first-child>p{margin-bottom:12px}
 .theme-1 .theme-illustration{max-width:250px;height:175px}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .home-flow .home-hero .hero-copy>p:first-of-type{animation:mobile-welcome-in 1s ease-out .08s both}
 @keyframes mobile-welcome-in{from{opacity:0}to{opacity:1}}
}
:root{--field-sand:#dbc3a53b;--field-clay:#d6a58c26;--field-ochre:#e0bb7839;--pencil-fill:url('/assets/pencil-fill.svg')}
main{position:relative;isolation:isolate}
.theme-hero,.home-online-grid,.page-hero,.home-work{position:relative;isolation:isolate}
.theme-hero:before,.home-online-grid:before,.page-hero:before{content:'';position:absolute;inset:-35px -48px -45px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 55%,var(--field-ochre),transparent 62%),radial-gradient(ellipse at 65% 25%,var(--field-clay),transparent 70%);mask-image:linear-gradient(transparent,#000 20%,#000 75%,transparent)}
.theme-hero:before{background:radial-gradient(ellipse at 80% 55%,#ddb77555,transparent 65%),radial-gradient(ellipse at 65% 35%,#d6a58c44,transparent 70%);opacity:.22;mix-blend-mode:multiply;filter:blur(22px)}
.theme-1{--theme-image:url('/assets/tema-1.webp')}.theme-2{--theme-image:url('/assets/tema-2.webp')}.theme-3{--theme-image:url('/assets/tema-3.webp')}.theme-4{--theme-image:url('/assets/tema-4.webp')}.theme-5{--theme-image:url('/assets/tema-5.webp')}
.theme-illustration,.online-illustration,.plant-illustration,.home-work .abstract{mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at center,#000 48%,#000c 65%,transparent 76%);border-radius:0;outline:0;box-shadow:none}
.theme-illustration{transform:none}.plant-illustration{width:100%;max-width:360px;justify-self:center;height:auto;transform:rotate(-2deg)}
.home-hero:before{mask-image:linear-gradient(#000 78%,transparent);background-color:#fcf7ef}
.intro,.doors-space,.home-work,.exit,.reading section,.about-method,.credentials>div,.personal,.online-body>.prose,.online-body .split>div,.contact-flow section,.contact-form{--field:var(--field-sand);position:relative;isolation:isolate;background:transparent;border-radius:0}
.intro:before,.home-work:before{display:none}
.intro:after,.doors-space:after,.home-work:after,.exit:after,.reading section:before,.about-method:before,.credentials>div:before,.personal:before,.online-body>.prose:before,.online-body .split>div:before,.contact-flow section:before,.contact-form:after{content:'';position:absolute;inset:-14px -22px;z-index:-1;pointer-events:none;border:0;transform:none;width:auto;height:auto;border-radius:0;background-image:var(--pencil-fill),radial-gradient(ellipse at 35% 45%,var(--field) 5%,transparent 76%),radial-gradient(ellipse at 75% 65%,var(--field) 8%,transparent 78%);background-size:180px 180px,100% 100%,100% 100%;mask-image:radial-gradient(ellipse at center,#000 46%,transparent 76%)}
.doors-space{--field:#d9bd972c}.doors-space:after,.personal:before{inset:-25px -40px}
.home-work,.about-method,.reading section:nth-child(3n+1),.contact-flow section:nth-child(2){--field:var(--field-clay)}
.reading section:nth-child(3n+2),.online-body>.prose:first-child,.credentials>div:last-child{--field:var(--field-ochre)}
.reading section:nth-child(3n),.online-body>.prose:last-child{--field:#dcbf9226}
.reading section:before,.contact-flow section:before{inset:-12px -32px}
.contact-form{--field:#d7b89339}.contact-form:after{mask-image:radial-gradient(ellipse at center,#000 55%,transparent 82%);inset:-25px -35px}
.contact-form:before{border-color:#b6a08735}
.online-body .split{position:relative;isolation:isolate}.online-body .split:before{content:'';position:absolute;inset:-15px -35px;z-index:-1;background:radial-gradient(ellipse at 25% 50%,var(--field-ochre),transparent 65%);pointer-events:none}
@media(max-width:700px){.theme-hero:before,.home-online-grid:before,.page-hero:before{inset:-15px -20px -30px}.theme-hero:before{background-size:110% auto;background-position:75% 90%;opacity:.16}.plant-illustration{max-width:290px}.intro:after,.doors-space:after,.home-work:after,.exit:after,.reading section:before,.about-method:before,.credentials>div:before,.personal:before,.online-body>.prose:before,.online-body .split>div:before,.contact-flow section:before,.contact-form:after{inset:-10px -12px}.contact-form:after{inset:-18px -12px}}
/* Override the earlier solid fills without changing layout or typography. */
.reading section:nth-child(n),.credentials>div:nth-child(n),.online-body>.prose:nth-child(n),.online-body .split>div,.contact-flow section:nth-child(n){background:transparent}
.plant-illustration{mask-image:linear-gradient(transparent,#000 7%,#000 92%,transparent);mix-blend-mode:multiply}
/* Review: warmer fields and a more compact illustrated rhythm on phones. */
:root{--field-ochre:#e0bb7826;--field-sand:#dec39c2d;--sage:#968a72}
.theme-hero:before{opacity:.16}
.home-online-grid .online-teaser,.online-body>.prose:last-child{border-left-color:#b29d7c40}
.room{box-shadow:10px 12px 0 #d9c4a62b;outline-color:#b29d7c47}
.mobile-toggle{color:var(--ink)}
@media(max-width:700px){
 .theme-hero{gap:0;padding-bottom:8px}
 .theme-illustration{max-width:210px;width:100%;height:145px;object-fit:contain;margin-top:-5px;justify-self:center}
 .theme-hero:before{opacity:.12}
 .reading{margin-top:0;margin-bottom:25px}
 .reading section,.reading section:nth-child(even),.reading section:nth-child(3n){margin-top:10px;margin-bottom:18px;padding-top:24px;padding-bottom:24px}
 .reading section:first-child{margin-top:0;padding-top:18px}
 .home-work .abstract{display:none}
 .home-work{padding-bottom:20px;gap:0}
 .home-online-grid{margin-top:0;padding-top:12px;gap:0}
 .home-online-grid .online-illustration{max-width:250px;height:155px;object-fit:contain}
 .home-online-grid .online-teaser{padding-top:18px}
 .personal{padding-bottom:28px}
 .personal+.exit{margin-top:15px;padding-top:32px}
 .online-body .split{padding:12px 0;margin:12px 0;gap:8px}
 .plant-illustration{max-width:250px;height:220px;object-fit:contain;transform:none}
 .online-body .split>div{padding-top:22px;padding-bottom:22px}
}

/* Contact title stays clear of the former circular decoration. */
.contact-hero:after{display:none}
/* Home introduction uses the same body typography in both columns. */
.intro p:first-child{font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.85;letter-spacing:normal}

@media(max-width:700px){.about-experience:after{display:none}}
/* Thematic illustrations are visible immediately, without a page fade. */
@media(max-width:700px){main.fade-in:has(.theme-hero){animation:none}}

/* Desktop links follow each description at the same distance, regardless of card height. */
@media(min-width:701px){
 .door p{flex:0 0 auto;margin-bottom:12px}
 .door>.text-link{margin-top:0;margin-bottom:0}
}
/* Phone review: close links, quieter colour, and less space before the plant. */
@media(max-width:700px){
 .doors{align-items:start}
 .door h3{margin-bottom:14px}
 .door p{flex:0;margin-bottom:8px}
 .door>.text-link{margin-top:0;margin-bottom:0}
 .online-body>.prose:first-child{padding-bottom:16px}
 .online-body>.prose:first-child p:last-child{margin-bottom:0}
 .online-body .split{margin-top:0;padding-top:0}
 .intro:after,.doors-space:after,.home-work:after,.exit:after,.reading section:before,.about-method:before,.credentials>div:before,.personal:before,.online-body>.prose:before,.online-body .split>div:before,.contact-flow section:before,.contact-form:after,.online-body .split:before,.page-hero:before,.home-online-grid:before{opacity:.52}
 .theme-hero:before{opacity:.06}
 .online-body .split.reveal-ready{opacity:1;transform:none;transition:none}
}
/* A single exact excerpt gives each page a quiet editorial accent. */
.quote-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.48fr);gap:32px;align-items:start;margin-bottom:23px}
.quote-copy{min-width:0}.quote-copy p:last-child{margin-bottom:0}
.margin-note{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(21px,2vw,25px);line-height:1.4;letter-spacing:-.015em;color:#653e2e;padding-top:10px;text-align:left}
.margin-note:before{content:'';display:block;width:32px;border-top:1px solid #b8896466;margin-bottom:14px}
.home-work:has(.quote-pair){grid-template-columns:1fr .45fr;gap:35px}
@media(max-width:1000px){.quote-pair{grid-template-columns:minmax(0,1fr) minmax(160px,.55fr);gap:24px}.home-work:has(.quote-pair){grid-template-columns:1fr}.home-work:has(.quote-pair) .abstract{height:180px;max-width:230px}}
@media(max-width:700px){
 .quote-pair{display:block;margin-bottom:23px}
 .margin-note{font-size:21px;line-height:1.45;margin:18px 0 4px;padding:0 0 0 16px;border-left:1px solid #b8896455}
 .margin-note:before{display:none}
 main p{text-align:left}
}
/* The welcome lead and editorial notes have their own breathing room. */
.home-hero .hero-copy>p:first-of-type{font-weight:600;font-size:18px;line-height:1.7;margin-bottom:28px;color:#534032}
.quote-pair{gap:44px;margin-top:18px;margin-bottom:34px}
.margin-note{padding:22px 4px 22px 8px}
@media(max-width:700px){
 .home-hero .hero-copy>p:first-of-type{font-size:17px;line-height:1.75;margin-bottom:26px}
 .quote-pair{margin-top:0;margin-bottom:30px}
 .margin-note{margin:30px 0 16px;padding:8px 0 8px 18px}
}
/* The welcome sentence feels like an invitation across the threshold. */
main.fade-in:has(.home-hero){animation:none}
.home-hero h1{text-align:left}
.home-hero .hero-copy>p:first-of-type{font-family:var(--serif);font-size:22px;font-weight:400;font-style:italic;line-height:1.6;letter-spacing:0;text-align:center;max-width:440px;margin:0 auto 32px;color:#653e2e;animation:welcome-in .45s ease-out .08s both}
@keyframes welcome-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.home-hero .hero-copy>p:first-of-type{font-size:19px;line-height:1.65;margin-bottom:28px}}
@media(prefers-reduced-motion:reduce){.home-hero .hero-copy>p:first-of-type{animation:none}}

.home-hero .hero-copy>p:not(:first-of-type){text-align:left}
/* On phones, the invitation shares the page's true centre between its margins. */
@media(max-width:700px){
 .home-hero .hero-copy{max-width:100%;width:100%}
 .home-hero .hero-copy>p:first-of-type{max-width:100%;width:100%;margin-left:auto;margin-right:auto;text-align:center}
 .home-hero .hero-copy>p:not(:first-of-type){max-width:83%;text-align:left}
}
@media(max-width:700px){.home-hero .hero-copy>p:first-of-type{text-align:left;max-width:83%;margin-left:0;margin-right:0}}
/* Desktop: let this short paragraph breathe across the section, with its note below. */
@media(min-width:701px){
 .reading-3 section:nth-child(2) .margin-note{padding-top:4px}
}
@media(min-width:701px){
 .reading-2 section:nth-child(3) .quote-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.46fr);gap:28px;align-items:center;margin-top:0;margin-bottom:24px}
 .reading-2 section:nth-child(3) .margin-note{max-width:none;margin:0;padding:8px 0 8px 18px;border-left:1px solid #b8896455;text-align:left}
 .reading-2 section:nth-child(3) .margin-note:before{display:none}
}
/* Desktop Home introduction: four balanced blocks instead of a narrow nested column. */
@media(min-width:701px){
 .intro{grid-template-columns:1fr 1fr;gap:30px 60px;align-items:start;padding:45px 25px 50px}
 .intro>div,.intro .quote-pair,.intro .quote-copy{display:contents}
 .intro p{margin-bottom:0}
 .intro .margin-note{align-self:center;max-width:360px;padding:18px 8px;margin:0;font-size:25px}
}
/* Desktop relationship section: an open paragraph and a compact inset note. */
@media(min-width:701px){
 :is(.reading-4,.reading-5) section:nth-child(4) .quote-pair{display:block;margin-top:0;margin-bottom:18px}
 :is(.reading-4,.reading-5) section:nth-child(4) .margin-note{max-width:420px;margin:16px 0 0 auto;padding:4px 0 4px 18px;border-left:1px solid #b8896455}
 :is(.reading-4,.reading-5) section:nth-child(4) .margin-note:before{display:none}
 :is(.reading-4,.reading-5) section:nth-child(4)>p{margin-bottom:16px}
 :is(.reading-4,.reading-5) section:nth-child(4)>p:last-child{margin-bottom:0}
}
/* Desktop About: the same compact paragraph rhythm and inset note. */
@media(min-width:701px){
 .about-method .quote-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.46fr);gap:28px;align-items:center;margin-top:0;margin-bottom:18px}
 .about-method .margin-note{max-width:none;margin:0;padding:8px 0 8px 18px;border-left:1px solid #b8896455;text-align:left}
 .about-method .margin-note:before{display:none}
 .about-method>p{margin-bottom:16px}
 .about-method>p:last-child{margin-bottom:0}
}
/* Desktop Online: centre the text beside the plant and tighten the surrounding rhythm. */
@media(min-width:701px){
 .online-body .split{align-items:center;margin:18px 0;padding:20px 0;gap:45px}
 .online-body .split>div{padding:28px 32px}
 .online-body .split>div p:last-child{margin-bottom:0}
 .online-body>.prose:first-child{padding-bottom:28px}
 .online-body>.prose:first-child p:last-child{margin-bottom:0}
 .online-body>.prose:last-child{padding-top:28px;padding-bottom:28px}
}
/* Desktop shared-space section: the same inset-note and paragraph rhythm. */
@media(min-width:701px){
 .online-body>.prose:last-child .quote-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.46fr);gap:28px;align-items:center;margin-top:0;margin-bottom:18px}
 .online-body>.prose:last-child .margin-note{max-width:none;margin:0;padding:8px 0 8px 18px;border-left:1px solid #b8896455;text-align:left}
 .online-body>.prose:last-child .margin-note:before{display:none}
 .online-body>.prose:last-child>p{margin-bottom:16px}
 .online-body>.prose:last-child>p:last-child{margin-bottom:0}
}
/* Desktop first consultation: compact prose and the note beneath it. */
@media(min-width:701px){
 .contact-flow section:nth-child(2) .quote-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.46fr);gap:28px;align-items:center;margin-top:0;margin-bottom:18px}
 .contact-flow section:nth-child(2) .margin-note{max-width:none;margin:0;padding:8px 0 8px 18px;border-left:1px solid #b8896455;text-align:left}
 .contact-flow section:nth-child(2) .margin-note:before{display:none}
 .contact-flow section:nth-child(2)>p{margin-bottom:16px}
 .contact-flow section:nth-child(2)>p:last-child{margin-bottom:0}
}
/* Desktop introduction follows a staggered reading path, preserving the text order. */
@media(min-width:701px){
 .intro{grid-template-columns:repeat(12,minmax(0,1fr));gap:22px 18px;padding:38px 20px 42px}
 .intro>div:first-child>p{grid-column:1 / span 7;grid-row:1}
 .intro>div:last-child>p{grid-column:5 / span 8;grid-row:2}
 .intro .quote-copy>p{grid-column:2 / span 7;grid-row:3}
 .intro .margin-note{grid-column:9 / span 4;grid-row:3;align-self:center;padding:8px 0 8px 18px;border-left:1px solid #b8896455;max-width:none;font-size:24px}
 .intro .margin-note:before{display:none}
}
@media(min-width:701px) and (max-width:900px){
 .intro>div:first-child>p{grid-column:1 / span 9}
 .intro>div:last-child>p{grid-column:3 / span 10}
 .intro .quote-copy>p{grid-column:1 / span 8}
 .intro .margin-note{font-size:21px}
}
/* Images and their containing sections never wait for a reveal animation. */
main.fade-in{animation:none}
.reveal-ready:has(img,.abstract,.art){opacity:1;transform:none;transition:none}
/* Desktop thematic opening: expanded illustration merging into the right-hand space. */
@media(min-width:701px){
 .theme-hero{display:block;min-height:460px;isolation:isolate}
 .theme-hero>div{position:relative;z-index:1;width:62%}
 .theme-hero .theme-illustration{position:absolute;z-index:-1;right:-28px;top:4px;width:78%;max-width:none;height:calc(100% + 36px);object-fit:contain;object-position:right center;transform:none;opacity:.82;pointer-events:none;
  mask-image:linear-gradient(90deg,transparent 0%,transparent 20%,#0005 43%,#000 70%),radial-gradient(ellipse at 62% 49%,#000 34%,#000c 53%,transparent 76%);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 20%,#0005 43%,#000 70%),radial-gradient(ellipse at 62% 49%,#000 34%,#000c 53%,transparent 76%);
  -webkit-mask-composite:source-in}
}
@media(min-width:701px) and (max-width:900px){
 .theme-hero>div{width:68%}
 .theme-hero .theme-illustration{width:82%;right:-18px;opacity:.68}
}
/* Trial: brisk scroll entry for text sections on the first thematic desktop page only. */
@media(min-width:701px) and (prefers-reduced-motion:no-preference){
 .reading-1 section.section-reveal{opacity:0;transform:translateY(8px);transition:opacity .24s ease-out,transform .24s ease-out}
 .reading-1 section.section-reveal.is-visible{opacity:1;transform:translateY(0)}
}
/* Desktop refinements: a small extra pause and a balanced centred relationship note. */
@media(min-width:701px){
 .intro>div:last-child>p{margin-bottom:8px}
 :is(.reading-4,.reading-5) section:nth-child(4) .quote-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.46fr);gap:28px;align-items:center;margin-bottom:18px}
 :is(.reading-4,.reading-5) section:nth-child(4) .margin-note{max-width:none;margin:0;padding:8px 0 8px 18px;border-left:1px solid #b8896455;text-align:left}
}
/* Desktop trial: a continuous warm colour flow across the first thematic reading. */
@media(min-width:701px){
 .reading-1{isolation:isolate}
 .reading-1:before{content:'';position:absolute;inset:-40px -36px -40px;z-index:-1;pointer-events:none;
  background-image:var(--pencil-fill),linear-gradient(180deg,transparent 0%,#d6a58c20 10%,#d6a58c20 23%,#e0bb781e 42%,#e0bb781e 57%,#dec39c20 79%,#dec39c18 91%,transparent 100%);
  background-size:180px 180px,100% 100%;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in}
 .reading-1 section:before{display:none}
}
/* The same colour flow now begins with the thematic opening. */
@media(min-width:701px){
 .theme-flow{position:relative;isolation:isolate}
 .theme-flow:before{content:'';position:absolute;inset:0 -36px -40px;z-index:-1;pointer-events:none;
  background-image:var(--pencil-fill),var(--flow-gradient);
  background-size:180px 180px,100% 100%;
  mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in}
 .theme-flow .reading-1:before,.theme-flow .theme-hero:before{display:none}
}
/* Fade the actual square artwork before its lower paper edge can meet the colour flow. */
@media(min-width:701px){
 .theme-flow .theme-illustration{height:auto;aspect-ratio:1;top:50%;transform:translateY(-50%);object-fit:fill;mix-blend-mode:multiply;
  mask-image:linear-gradient(90deg,transparent 0%,transparent 20%,#0005 43%,#000 70%),radial-gradient(ellipse at 62% 46%,#000 30%,#000b 49%,transparent 74%),linear-gradient(180deg,transparent 0%,#000 20%,#000 58%,transparent 90%);
  mask-composite:intersect,intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 20%,#0005 43%,#000 70%),radial-gradient(ellipse at 62% 46%,#000 30%,#000b 49%,transparent 74%),linear-gradient(180deg,transparent 0%,#000 20%,#000 58%,transparent 90%);
  -webkit-mask-composite:source-in,source-in}
}

@media(min-width:701px){.theme-flow .reading:before,.theme-flow .reading section:before{display:none}}
.about-experience:after{display:none}
@media(min-width:701px){
 .about-flow .page-hero:before,.about-flow .about-method:before,
 .about-flow .credentials>div:before,.about-flow .personal:before{display:none}
 .home-flow .intro:after,.home-flow .doors-space:after,
 .home-flow .home-work:after,.home-flow .home-online-grid:before{display:none}
 .online-flow .page-hero:before,.online-flow .online-body>.prose:before,
 .online-flow .online-body .split>div:before{display:none}
 .online-flow .online-body .split:before{inset:-65px -36px;background:radial-gradient(ellipse at 22% 50%,#e0bb7815,transparent 72%),radial-gradient(ellipse at 38% 60%,#d6a58c0d,transparent 75%);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 65%,transparent),linear-gradient(90deg,transparent,#000 22%,#000 75%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 65%,transparent),linear-gradient(90deg,transparent,#000 22%,#000 75%,transparent);
  -webkit-mask-composite:source-in}
 .contacts-flow .contact-flow section:before,.contacts-flow .contact-form:after{display:none}
}
/* Centre the staircase itself and soften the upper terracotta wash in this opening. */
@media(min-width:701px){
 .theme-flow .theme-1 .theme-illustration{width:84%;right:-100px;top:55%;
  mask-image:linear-gradient(90deg,transparent 0%,#0005 30%,#000 57%),radial-gradient(ellipse at 43% 59%,#000 24%,#000b 44%,transparent 72%),linear-gradient(180deg,transparent 8%,#0003 30%,#000 48%,#000 63%,transparent 90%);
  mask-composite:intersect,intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#0005 30%,#000 57%),radial-gradient(ellipse at 43% 59%,#000 24%,#000b 44%,transparent 72%),linear-gradient(180deg,transparent 8%,#0003 30%,#000 48%,#000 63%,transparent 90%);
  -webkit-mask-composite:source-in,source-in}
 .theme-1{--edge-colour:#e0bb7838;--edge-accent:#d6a58c25}
 .theme-2{--edge-colour:#d6a58c35;--edge-accent:#dec39c28}
 .theme-3{--edge-colour:#e0bb7835;--edge-accent:#d6a58c27}
 .theme-4{--edge-colour:#d6a58c32;--edge-accent:#e0bb7828}
 .theme-5{--edge-colour:#dec39c35;--edge-accent:#d6a58c28}
 .theme-flow .theme-hero:after{content:'';position:absolute;z-index:-2;pointer-events:none;top:10%;bottom:0;left:48%;right:calc((min(100vw,1220px) - 100vw)/2 - 48px);
  background:linear-gradient(90deg,transparent 0%,var(--edge-colour) 100%),radial-gradient(ellipse at 100% 48%,var(--edge-accent),transparent 80%);
  mask-image:linear-gradient(180deg,transparent,#000 25%,#000 70%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 70%,transparent)}
}
@media(min-width:701px) and (max-width:1000px){.theme-flow .theme-hero:after{right:-30px}}
/* Phone doors gently peek once as they enter the central reading area. */
/* Finish every image edge at zero opacity, so paper never cuts across a colour flow. */
.home-work .abstract,.online-illustration,.plant-illustration{
 mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
 mask-composite:intersect;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
 -webkit-mask-composite:source-in;
 border-radius:0;outline:0;box-shadow:none}
.home-work .abstract:after{display:none}
@media(min-width:701px){.home-flow .home-work .abstract{transform:rotate(3deg) scale(1.22);transform-origin:center;align-self:center}}
.home-flow .home-work .abstract,.home-flow .online-illustration{
 background-color:transparent;mix-blend-mode:multiply;
 mask-image:radial-gradient(ellipse at center,#000 28%,#000b 43%,#0003 60%,transparent 72%),linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent),linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
 mask-composite:intersect,intersect;
 -webkit-mask-image:radial-gradient(ellipse at center,#000 28%,#000b 43%,#0003 60%,transparent 72%),linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent),linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
 -webkit-mask-composite:source-in,source-in}
.online-detail{
 mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
 mask-composite:intersect;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent),linear-gradient(180deg,transparent,#000 5%,#000 95%,transparent);
 -webkit-mask-composite:source-in;
 outline:0;box-shadow:none}
@media(min-width:701px){
 .theme-flow .theme-illustration{
  mask-image:linear-gradient(90deg,transparent 0%,transparent 20%,#0005 43%,#000 70%,transparent 100%),radial-gradient(ellipse at 62% 46%,#000 30%,#000b 49%,transparent 74%),linear-gradient(180deg,transparent 0%,#000 20%,#000 58%,transparent 90%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 20%,#0005 43%,#000 70%,transparent 100%),radial-gradient(ellipse at 62% 46%,#000 30%,#000b 49%,transparent 74%),linear-gradient(180deg,transparent 0%,#000 20%,#000 58%,transparent 90%)}
 .theme-flow .theme-1 .theme-illustration{
  mask-image:linear-gradient(90deg,transparent 0%,#0005 30%,#000 57%,transparent 100%),radial-gradient(ellipse at 43% 59%,#000 24%,#000b 44%,transparent 72%),linear-gradient(180deg,transparent 8%,#0003 30%,#000 48%,#000 63%,transparent 90%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#0005 30%,#000 57%,transparent 100%),radial-gradient(ellipse at 43% 59%,#000 24%,#000b 44%,transparent 72%),linear-gradient(180deg,transparent 8%,#0003 30%,#000 48%,#000 63%,transparent 90%)}
}
@media(max-width:700px){
 .theme-illustration{
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-composite:source-in}
}
@media(min-width:701px){
 .theme-flow .theme-4 .theme-illustration,
 .theme-flow .theme-5 .theme-illustration{top:55%;right:-8px}
}
/* Keep decorative edges inside the phone viewport without creating a new scroll container. */
@media(max-width:700px){
 html,body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
 .wrap{min-width:0}
 .online-body .split:before{left:-12px;right:-12px}
}
@supports not (overflow:clip){
 @media(max-width:700px){html,body{overflow-x:hidden}}
}
@media(max-width:700px) and (prefers-reduced-motion:no-preference){
 .door-visual.door-peek .art{animation:mobile-door-peek 1.8s ease-in-out var(--peek-delay,0ms);will-change:transform}
 @keyframes mobile-door-peek{
  0%,100%{transform:rotateY(0deg);box-shadow:none}
  35%,58%{transform:rotateY(-22deg);box-shadow:9px 5px 12px #80654420}
 }
}
/* A single gentle colour field follows the full reading on phones too. */
.edge-echo{display:none}
/* Small illustrated corner echoes, above the photographs rather than across them. */
@media(min-width:701px){
 .home-flow .doors-space{padding-bottom:40px}
 .home-flow .home-work{margin-top:20px;padding-top:35px}
 :is(.about-flow,.online-flow,.contacts-flow):after{content:'';position:absolute;pointer-events:none;z-index:-1;top:-12px;right:calc((min(100vw,1220px) - 100vw)/2 - 48px);width:340px;height:195px;
  background:url('/assets/tema-4.webp') 55% 42%/490px auto no-repeat;opacity:.42;mix-blend-mode:multiply;filter:sepia(.35) saturate(.7);
  mask-image:radial-gradient(ellipse at 100% 0%,#000 20%,#000b 43%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 20%,#000b 43%,transparent 75%)}
 .online-flow:after{width:310px;height:170px;background-position:25% 66%;background-size:460px auto;opacity:.38}
 .contacts-flow:after{width:390px;height:235px;background-position:75% 62%;background-size:550px auto;opacity:.48}
}
@media(min-width:701px) and (max-width:1000px){:is(.about-flow,.online-flow,.contacts-flow):after{right:-30px}}
@media(prefers-reduced-motion:no-preference){
 .scroll-section-reveal{opacity:0;transition:opacity .4s ease-out}
 .scroll-section-reveal.is-visible{opacity:1}
}
@media(max-width:700px){
 .online-flow .plant-illustration{width:183px;max-width:100%;height:auto;object-fit:fill;
  mask-image:radial-gradient(ellipse at center,#000 35%,#000b 49%,#0003 64%,transparent 76%),linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  mask-composite:intersect,intersect;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 35%,#000b 49%,#0003 64%,transparent 76%),linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);
  -webkit-mask-composite:source-in,source-in}
 .theme-flow .theme-hero .theme-illustration{width:145px;max-width:100%;height:auto;aspect-ratio:1;object-fit:fill;
  mask-image:radial-gradient(ellipse at center,#000 28%,#000b 44%,#0003 61%,transparent 74%),linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
  mask-composite:intersect,intersect;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 28%,#000b 44%,#0003 61%,transparent 74%),linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent),linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
  -webkit-mask-composite:source-in,source-in}
 .theme-flow .theme-1 .theme-illustration{width:175px}
 .theme-1{--side-colour:#e0bb782d;--side-accent:#d6a58c20}
 .theme-2{--side-colour:#d6a58c2a;--side-accent:#dec39c25}
 .theme-3{--side-colour:#e0bb782a;--side-accent:#d6a58c22}
 .theme-4{--side-colour:#d6a58c28;--side-accent:#e0bb7822}
 .theme-5{--side-colour:#dec39c2c;--side-accent:#d6a58c22}
 .theme-flow .theme-hero:after{content:'';position:absolute;left:-22px;right:-22px;bottom:-55px;height:300px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 0% 50%,var(--side-colour),transparent 75%),radial-gradient(ellipse at 100% 50%,var(--side-accent),transparent 75%);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 65%,transparent),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 65%,transparent),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-composite:source-in}
 .theme-flow{position:relative;isolation:isolate}
 .theme-flow:before{content:'';position:absolute;inset:0 -22px -32px;z-index:-1;pointer-events:none;
  background-image:var(--pencil-fill),var(--flow-gradient);background-size:180px 180px,100% 100%;opacity:.9;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-composite:source-in}
 .theme-flow .theme-hero:before,.theme-flow .reading:before,.theme-flow .reading section:before,
 .theme-flow .page-hero:before,.theme-flow .about-method:before,.theme-flow .credentials>div:before,.theme-flow .personal:before,
 .theme-flow .intro:after,.theme-flow .doors-space:after,.theme-flow .home-work:after,.theme-flow .home-online-grid:before,
 .theme-flow .online-body>.prose:before,.theme-flow .online-body .split:before,.theme-flow .online-body .split>div:before,
 .theme-flow .contact-flow section:before,.theme-flow .contact-form:after{display:none}
}
/* The same corner illustrations, sized for a phone and kept inside its viewport. */
@media(max-width:700px){
 :is(.about-flow,.online-flow,.contacts-flow):after{content:'';position:absolute;pointer-events:none;z-index:-1;top:-10px;right:-22px;width:180px;height:112px;
  background:url('/assets/tema-4.webp') 55% 42%/270px auto no-repeat;opacity:.42;mix-blend-mode:multiply;filter:sepia(.35) saturate(.7);
  mask-image:radial-gradient(ellipse at 100% 0%,#000 20%,#000b 43%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 100% 0%,#000 20%,#000b 43%,transparent 75%)}
 .online-flow:after{width:165px;height:100px;background-position:25% 66%;background-size:250px auto;opacity:.38}
 .contacts-flow:after{width:195px;height:130px;background-position:75% 62%;background-size:290px auto;opacity:.48}
}
/* Keep the fine illustration lines farther from desktop reading columns. */
@media(min-width:701px){
 .theme-flow .theme-2 .theme-illustration{right:-88px}
 .theme-flow .theme-4 .theme-illustration{right:-68px}
}

.theme-2{--theme-image:url('/assets/tema-2-v2.webp')}
.theme-4{--theme-image:url('/assets/tema-4-v2.webp')}
@media(min-width:701px){
 .theme-flow .theme-2 .theme-illustration{top:46%}
 .theme-flow .theme-4 .theme-illustration{top:50%}
}
@media(max-width:700px){
 .theme-flow .theme-2 .theme-illustration,
 .theme-flow .theme-4 .theme-illustration{width:185px;max-width:100%;height:auto;aspect-ratio:1}
}
@media(min-width:701px){
 .theme-flow .theme-2 .theme-illustration{top:65%}
}
@media(min-width:701px){
 .theme-flow .theme-4 .theme-illustration{top:66%}
}
@media(min-width:701px){
 .theme-flow .theme-2 .theme-illustration{top:61%}
 .theme-flow .theme-4 .theme-illustration{top:62%}
}
@media(max-width:700px){
 .home-flow .door p{text-align:center;align-self:center;width:100%;margin-left:auto;margin-right:auto}
}
/* Larger centred thematic artwork, with slightly softer colours on phones. */
@media(max-width:700px){
 .theme-flow .theme-hero .theme-illustration{width:min(90%,320px);max-width:100%;height:auto;aspect-ratio:1;position:static;transform:none;justify-self:center;align-self:center;margin-left:auto;margin-right:auto;opacity:.9;filter:saturate(.82)}
}
@media(max-width:700px){
 .theme-flow .theme-2 .theme-illustration{transform:translateX(-12px)}
}
@media(max-width:700px){
 .theme-flow .theme-4 .theme-illustration{transform:translateX(-12px)}
}
@media(max-width:700px){
 .theme-flow .theme-5 .theme-illustration{transform:translateX(-12px)}
}
@media(max-width:700px){
 .theme-flow .theme-1 .theme-illustration{width:100%;max-width:380px}
}
@media(max-width:700px){
 .theme-flow .theme-1 .theme-illustration{width:calc(100% + 64px);max-width:none;margin-left:-32px;margin-right:-32px;margin-top:-55px;margin-bottom:-12px;position:relative;z-index:-1}
 .theme-flow .theme-1>div{position:relative;z-index:1}
}
@media(max-width:700px){
 .theme-flow .theme-hero .theme-illustration{width:calc(100% + 64px);max-width:none;margin-left:-32px;margin-right:-32px;margin-top:-55px;margin-bottom:-12px;position:relative;z-index:-1}
 .theme-flow .theme-hero>div{position:relative;z-index:1}
}
@media(max-width:700px){
 .theme-flow .theme-3 .theme-illustration{width:100%;max-width:none;margin-left:auto;margin-right:auto}
}
@media(max-width:700px){
 .theme-flow .theme-5 .theme-illustration{margin-top:-85px}
}
@media(max-width:700px){
 .header.header-compact{min-height:70px;padding-top:10px;padding-bottom:10px;gap:12px}
 .header.header-compact .brand strong{font-size:20px}
 .header.header-compact .brand span{margin-top:3px}
 .header.header-compact .mobile-toggle{padding:5px 13px;min-height:40px}
}
@media(max-width:700px){
 .header{width:calc(100% + 44px);margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px}
}
/* Mobile reading rhythm: use the feathered image space to shorten long pauses. */
@media(max-width:700px){
 .theme-flow .theme-hero .theme-illustration{margin-top:-75px;margin-bottom:-35px}
 .theme-flow .theme-5 .theme-illustration{margin-top:-85px}
 .theme-flow .theme-hero{padding-bottom:0}
 .theme-flow .reading section:first-child{padding-top:14px}
 .about-flow .page-hero,.online-flow .page-hero{gap:18px;padding-bottom:38px}
 .about-flow .personal .split{gap:18px}
 .about-flow .personal+.exit{margin-top:10px}
 .online-flow .online-body .split{margin-top:0;padding-top:0;gap:4px}
 .online-flow .plant-illustration{margin-top:-12px;margin-bottom:-12px}
 .online-flow .online-body .split>div{padding-top:16px;padding-bottom:16px}
 .home-flow .home-online-grid .online-illustration{margin-top:-10px;margin-bottom:-8px}
 .home-flow .home-online-grid .online-teaser{padding-top:12px}
}

/* Compact gradually with scrolling instead of switching between two heights. */
@media(max-width:700px){
 .header{--header-progress:0;min-height:calc(100px - 22px * var(--header-progress));padding-top:calc(22px - 10px * var(--header-progress));padding-bottom:calc(22px - 10px * var(--header-progress));gap:calc(24px - 8px * var(--header-progress));overflow-anchor:none}
 .header .brand strong{font-size:calc(22px - 1px * var(--header-progress))}
 .header .brand span{margin-top:calc(5px - 1px * var(--header-progress))}
 .header .mobile-toggle{padding:calc(7px - 1px * var(--header-progress)) calc(16px - 2px * var(--header-progress));min-height:40px}
}

/* Balance mobile heading lines without changing their wording or type sizes. */
@media(max-width:700px){
 #contenuto h1,#contenuto h2,#contenuto h3{
  text-wrap:balance;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
 }
}

/* A shared rhythm for the five mobile door cards. */
@media(max-width:700px){
 .home-flow .doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px;align-items:start}
 .home-flow .door,.home-flow .door:nth-child(n){margin-top:0;padding:0;min-width:0;align-items:center;text-align:center}
 .home-flow .door:last-child{grid-column:1/-1;width:calc((100% - 20px)/2);max-width:none;justify-self:center}
 .home-flow .door .art{width:clamp(104px,32vw,132px);height:clamp(104px,32vw,132px)}
 .home-flow .door h3{font-size:22px;line-height:1.16;margin-top:20px;margin-bottom:12px;width:100%;max-width:100%}
 .home-flow .door p{font-size:16px;line-height:1.65;margin-top:0;margin-bottom:10px;max-width:100%;flex:0 0 auto}
 .home-flow .door>.text-link{margin:0;align-self:center}
}

/* Quieter pencil grain through long mobile reading; retain it by the doors. */
@media(max-width:700px){
 .theme-flow:before{background-image:url('/assets/pencil-fill-soft.svg'),var(--flow-gradient)}
 .home-flow .doors-space:after{
  display:block;
  background-image:var(--pencil-fill);
  background-size:180px 180px;
  opacity:.72;
  mask-image:radial-gradient(ellipse at center,#000 45%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 45%,transparent 80%);
 }
 .exit:after{background-image:url('/assets/pencil-fill-soft.svg'),radial-gradient(ellipse at 35% 45%,var(--field) 5%,transparent 76%),radial-gradient(ellipse at 75% 65%,var(--field) 8%,transparent 78%)}
}

/* Give the choices illustration a little more room before its next heading. */
@media(max-width:700px){
 .theme-flow .theme-3 .theme-illustration{margin-bottom:-11px}
}

/* Desktop Home: a gentler stagger, with the final note beside its paragraph. */
@media(min-width:701px){
 .home-flow .intro{gap:28px 24px;padding:38px 20px 42px}
 .home-flow .intro p{margin:0}
 .home-flow .intro>div:first-child>p{grid-column:1 / span 8;grid-row:1}
 .home-flow .intro>div:last-child>p{grid-column:3 / span 9;grid-row:2}
 .home-flow .intro .quote-copy>p{grid-column:1 / span 8;grid-row:3}
 .home-flow .intro .margin-note{grid-column:9 / span 4;grid-row:3;align-self:center;margin:0;padding:8px 0 8px 18px;font-size:23px;line-height:1.45}
}
@media(min-width:701px) and (max-width:900px){
 .home-flow .intro{column-gap:18px}
 .home-flow .intro>div:first-child>p{grid-column:1 / span 10}
 .home-flow .intro>div:last-child>p{grid-column:2 / span 11}
 .home-flow .intro .margin-note{font-size:21px}
}

/* Desktop prose has a comfortable measure; side notes keep their own space. */
@media(min-width:701px){
 .theme-flow{--reading-measure:68ch}
 .theme-flow .theme-hero>div>p:not(.eyebrow),
 .theme-flow .reading section>p,
 .theme-flow .quote-copy>p,
 .about-flow .page-hero>div>p,
 .about-flow .about-method>p,
 .about-flow .about-experience>p,
 .about-flow .personal .split>div>p,
 .online-flow .page-hero>div>p,
 .online-flow .online-body>.prose>p,
 .online-flow .online-body .split>div>p,
 .contacts-flow .contact-flow section>p,
 .home-flow .home-work>div>p,
 .home-flow .online-teaser>p{max-width:var(--reading-measure)}
 /* Preserve the Home introduction composition just approved. */
 .home-flow .intro .quote-copy>p{max-width:none}
}

/* Desktop Home: a centred reading pause without the repeated staircase. */
@media(min-width:701px){
 .home-flow .home-work{display:block}
 .home-flow .home-work .abstract{display:none}
 .home-flow .home-work>div:first-child{width:100%;max-width:68ch;margin-left:auto;margin-right:auto}
 .home-flow .home-work h2{text-align:center;text-wrap:balance}
 .home-flow .home-work p{text-align:left}
 .home-flow .home-work .text-link{display:table;margin-left:auto;margin-right:auto}
}

/* Keep the compass section's second paragraph close to its opening. */
@media(min-width:701px){
 .reading-1 section:nth-child(3) .quote-pair{margin-bottom:16px}
}

/* Avoid isolated final words in the desktop responsibility-page paragraphs. */
@media(min-width:701px){
 .theme-2>div>p:last-child,.reading-2 section:first-child>p:first-of-type{text-wrap:pretty}
}

/* Lift professional experience slightly beside the education column. */
@media(min-width:701px){
 .about-flow .credentials>div:last-child{padding-top:42px}
}

/* A shorter desktop pause between the approach and online-therapy sections. */
@media(min-width:701px){
 .home-flow .home-work{padding-bottom:50px}
 .home-flow .home-online-grid{margin-top:15px;padding-top:40px}
}

/* Balance the compass note at the opening of its paragraph, without a large pause. */
@media(min-width:701px){
 .reading-1 section:nth-child(3) .quote-pair{grid-template-columns:minmax(0,1fr) minmax(160px,.42fr);gap:28px;align-items:start;margin-top:0;margin-bottom:18px}
 .reading-1 section:nth-child(3) .margin-note{align-self:start;margin:0;padding:4px 0 8px 18px;font-size:23px;line-height:1.45;border-left:1px solid #b8896455}
 .reading-1 section:nth-child(3) .margin-note:before{display:none}
 .reading-1 section:nth-child(3)>p:not(:last-child){margin-bottom:18px}
}

/* Bring the choices note up to the paragraph it accompanies. */
@media(min-width:701px){
 .reading-3 section:nth-child(2) .quote-pair{align-items:start}
 .reading-3 section:nth-child(2) .margin-note{align-self:start;margin:0;padding:4px 0 8px 18px;border-left:1px solid #b8896455}
 .reading-3 section:nth-child(2) .margin-note:before{display:none}
}

@media(min-width:701px){
 .theme-4>div>p:last-child{text-wrap:pretty}
}

/* Shared desktop inset-note rhythm, with a gentler stagger for the doors. */
@media(min-width:701px){
 .theme-flow .reading section .quote-pair,
 .about-flow .about-method .quote-pair,
 .online-flow .online-body .quote-pair,
 .contacts-flow .contact-flow .quote-pair{
  grid-template-columns:minmax(0,1fr) minmax(160px,.42fr);
  gap:28px;align-items:start;margin-top:0;margin-bottom:20px;
 }
 .theme-flow .reading section .quote-pair .margin-note,
 .about-flow .about-method .quote-pair .margin-note,
 .online-flow .online-body .quote-pair .margin-note,
 .contacts-flow .contact-flow .quote-pair .margin-note{
  align-self:start;max-width:none;margin:0;padding:4px 0 8px 18px;
  font-size:23px;line-height:1.45;text-align:left;
  border-left:1px solid #b8896455;
 }
 .theme-flow .reading .margin-note:before,
 .about-flow .about-method .margin-note:before,
 .online-flow .online-body .margin-note:before,
 .contacts-flow .contact-flow .margin-note:before{display:none}
 .home-flow .doors{align-items:start;row-gap:36px}
 .home-flow .door:nth-child(2),.home-flow .door:nth-child(5){margin-top:32px}
 .home-flow .door:nth-child(4){margin-top:0}
 .home-flow .door h3{width:100%;max-width:260px;margin-top:20px;margin-bottom:14px;text-wrap:balance}
 .home-flow .door p{width:100%;max-width:260px;flex:0 0 auto;margin-top:0;margin-bottom:12px}
 .home-flow .door>.text-link{margin-top:0;margin-bottom:0}
}

/* Match the outer reading pause on both sides of the centred Home section. */
@media(min-width:701px){
 .home-flow .doors-space{padding-bottom:50px}
}

/* Centre this relationship paragraph and its side note on a shared vertical axis. */
@media(min-width:701px){
 .theme-flow .reading-4 section:nth-child(4) .quote-pair{align-items:center}
 .theme-flow .reading-4 section:nth-child(4) .quote-pair .quote-copy,
 .theme-flow .reading-4 section:nth-child(4) .quote-pair .margin-note{align-self:center}
}

/* The uncertainty paragraph and its note share the same vertical centre. */
@media(min-width:701px){
 .theme-flow .reading-5 section:nth-child(4) .quote-pair{align-items:center}
 .theme-flow .reading-5 section:nth-child(4) .quote-pair .quote-copy,
 .theme-flow .reading-5 section:nth-child(4) .quote-pair .margin-note{align-self:center}
}

/* Centre the About paragraph beside its note. */
@media(min-width:701px){
 .about-flow .about-method .quote-pair{align-items:center}
 .about-flow .about-method .quote-pair .quote-copy,
 .about-flow .about-method .quote-pair .margin-note{align-self:center}
}

/* The centred approach column has a shared left edge for its heading and prose. */
@media(min-width:701px){
 .home-flow .home-work h2{width:100%;max-width:none;text-align:left;margin-left:0;margin-right:0}
}

/* Desktop rhythm: close continuations, clearer pauses for changes of subject. */
@media(min-width:701px){
 .theme-flow .reading section:nth-child(n){padding-top:30px;padding-bottom:30px;margin-top:16px;margin-bottom:30px}
 .theme-flow .reading section:nth-child(n)>p:not(:last-child),
 .about-flow .about-method>p:not(:last-child),
 .online-flow .online-body>.prose>p:not(:last-child),
 .contacts-flow .contact-flow section:nth-child(n)>p:not(:last-child){margin-bottom:20px}
 .theme-flow .reading section:nth-child(n)>p:last-child,
 .about-flow .about-method>p:last-child,
 .online-flow .online-body>.prose>p:last-child,
 .contacts-flow .contact-flow section:nth-child(n)>p:last-child{margin-bottom:0}
 .about-flow .page-hero,.online-flow .page-hero{padding-bottom:48px}
 .about-flow .about-method{padding-top:30px;padding-bottom:30px}
 .about-flow .about-experience{padding-top:58px;padding-bottom:36px}
 .about-flow .personal{margin-top:36px;padding-top:52px;padding-bottom:52px}
 .online-flow .online-body>.prose:first-child{padding-top:30px}
 .contacts-flow .contact-flow section:nth-child(n){padding-top:30px;padding-bottom:30px}
 /* Balance headings within their actual columns while preserving type sizes. */
 #contenuto h1,#contenuto h2,#contenuto h3{text-wrap:balance;word-break:normal;overflow-wrap:normal;hyphens:none}
}

/* Quiet the red-dominant pigments without washing out the ochre areas. */
@media(min-width:701px){
 .theme-flow :is(.theme-2,.theme-3,.theme-4) .theme-illustration{filter:url('/assets/warm-illustration-filter.svg#soften-red')}
 /* Only a breath more room, shared across the Home transitions. */
 .home-flow .intro{padding-top:44px;padding-bottom:48px}
 .home-flow .doors-space{padding-top:clamp(71px,7.2vw,86px);padding-bottom:53px}
 .home-flow .home-work{margin-top:23px;padding-bottom:53px}
 .home-flow .home-online-grid{margin-top:18px}
 .home-flow+.exit{margin-top:36px}
}

/* Soften the relationship illustration's red pigments on phones too. */
@media(max-width:700px){
 .theme-flow .theme-4 .theme-illustration{filter:url('/assets/warm-illustration-filter.svg#soften-red') saturate(.82)}
}

/* Optical alignment of the Home note with its neighbouring paragraph. */
@media(min-width:701px){
 .home-flow .intro .margin-note{position:relative;top:-8px}
}

/* A smaller stagger for the final desktop door and all its accompanying text. */
@media(min-width:701px){
 .home-flow .door:nth-child(5){margin-top:20px}
}

/* Shared vertical centre for the compass and responsibility paragraphs and notes. */
@media(min-width:701px){
 .theme-flow :is(.reading-1,.reading-2) section:nth-child(3) .quote-pair{align-items:center}
 .theme-flow :is(.reading-1,.reading-2) section:nth-child(3) .quote-pair .quote-copy,
 .theme-flow :is(.reading-1,.reading-2) section:nth-child(3) .quote-pair .margin-note{align-self:center}
}

/* Centre the choices paragraph with its accompanying note. */
@media(min-width:701px){
 .theme-flow .reading-3 section:nth-child(2) .quote-pair{align-items:center}
 .theme-flow .reading-3 section:nth-child(2) .quote-pair .quote-copy,
 .theme-flow .reading-3 section:nth-child(2) .quote-pair .margin-note{align-self:center}
}

/* A slightly quieter terra pigment in the fourth thematic illustration. */
@media(min-width:701px){
 .theme-flow .theme-4 .theme-illustration{filter:url('/assets/warm-illustration-filter.svg#soften-red-more')}
}
@media(max-width:700px){
 .theme-flow .theme-4 .theme-illustration{filter:url('/assets/warm-illustration-filter.svg#soften-red-more') saturate(.82)}
}

/* Restore a little red warmth to the fourth illustration on desktop only. */
@media(min-width:701px){
 .theme-flow .theme-4 .theme-illustration{filter:url('/assets/warm-illustration-filter.svg#soften-red-balanced')}
}

/* Balance this short door description so its final word is not isolated. */
@media(min-width:701px){
 .home-flow .door:nth-child(3)>p{text-wrap:balance}
}

/* Keep the closing About link connected to its introductory sentence on every screen. */
.exit>p:has(+a:is([href="/chi-sono/"],[href="/psicoterapia-online/"])){margin-bottom:8px}
.exit>a:is([href="/chi-sono/"],[href="/psicoterapia-online/"]){margin-top:0;padding-top:2px}

/* A quieter desktop header, with a stable height throughout reading. */
@media(min-width:701px){
 .header{min-height:88px;padding-top:16px;padding-bottom:16px}
}

/* Full-width desktop navigation and a strictly vertical page scroll. */
@media(min-width:701px){
 html,body{max-width:100%;overflow-x:clip;overscroll-behavior-x:none}
 .wrap{min-width:0}
 .header{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:max(48px,calc((100vw - 1124px)/2));padding-right:max(48px,calc((100vw - 1124px)/2))}
}
@media(min-width:701px) and (max-width:1000px){
 .header{padding-left:30px;padding-right:30px}
}
@supports not (overflow:clip){
 @media(min-width:701px){html,body{overflow-x:hidden}}
}

/* Broad, gentle desktop washes accompany the reading, without changing Home. */
@media(min-width:701px){
 .theme-flow:not(.home-flow):before{
  left:calc(50% - 50vw);right:calc(50% - 50vw);top:0;bottom:-40px;
  background-image:url('/assets/pencil-fill-soft.svg'),var(--flow-gradient),radial-gradient(ellipse at 12% 25%,#e0bb7820,transparent 66%),radial-gradient(ellipse at 90% 62%,#d6a58c1c,transparent 68%),radial-gradient(ellipse at 30% 90%,#dec39c1e,transparent 64%);
  background-size:180px 180px,100% 100%,100% 100%,100% 100%,100% 100%;
  opacity:1;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-composite:source-in;
 }
}

/* Feather the plant's paper on every edge while keeping its centre readable. */
@media(min-width:701px){
 .online-flow .plant-illustration{
  mask-image:radial-gradient(ellipse at 50% 50%,#000 25%,#000e 40%,#0008 55%,transparent 73%),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 78%,transparent);
  mask-composite:intersect,intersect;
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 25%,#000e 40%,#0008 55%,transparent 73%),linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 78%,transparent);
  -webkit-mask-composite:source-in,source-in;
 }
}

/* Shorten the mobile pause after the choices note, without crowding its text. */
@media(max-width:700px){
 .reading-3 section:nth-child(2){padding-bottom:12px;margin-bottom:10px}
 .reading-3 section:nth-child(2) .quote-pair{margin-bottom:14px}
 .reading-3 section:nth-child(3){padding-top:16px}
}

/* Text-only enlargement gets a roomy layout; ordinary mobile styling is unchanged. */
@media(max-width:700px){
 html.enlarged-text .home-flow .doors{grid-template-columns:minmax(0,1fr);gap:34px}
 html.enlarged-text .home-flow .door,
 html.enlarged-text .home-flow .door:last-child{grid-column:auto;width:100%;max-width:100%;margin-top:0;justify-self:stretch}
 html.enlarged-text #contenuto h1,
 html.enlarged-text #contenuto h2,
 html.enlarged-text #contenuto h3{overflow-wrap:anywhere;word-break:normal;max-width:100%;min-width:0}
 html.enlarged-text .home-hero .hero-copy{max-width:100%;min-width:0}
 html.enlarged-text .header{position:relative;flex-wrap:wrap;min-height:0}
 html.enlarged-text .brand{flex-shrink:1;min-width:0;max-width:100%}
 html.enlarged-text .brand strong,
 html.enlarged-text .brand span{overflow-wrap:anywhere}
}

/* A little breathing room before Home's next illustration on phones. */
@media(max-width:700px){
 .home-flow .home-online-grid{padding-top:28px}
}

/* Home echoes the reading washes more softly, leaving its opening illustration clear. */
@media(min-width:701px){
 .home-flow:before{
  left:calc(50% - 50vw);right:calc(50% - 50vw);
  background-image:url('/assets/pencil-fill-soft.svg'),var(--flow-gradient),radial-gradient(ellipse at 15% 40%,#e0bb7810,transparent 68%),radial-gradient(ellipse at 88% 76%,#d6a58c0e,transparent 70%);
  background-size:180px 180px,100% 100%,100% 100%,100% 100%;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent 0%,transparent 12%,#000 24%,#000 94%,transparent);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent 0%,transparent 12%,#000 24%,#000 94%,transparent);
  -webkit-mask-composite:source-in;
 }
}

/* Quiet colour emphasis for Home’s audience and services. */
.home-flow .home-work p:first-of-type strong{font-weight:700;color:inherit}

/* Keyboard targets stay visible below the sticky header; reduced motion stays still. */
a,button,input,textarea,summary{scroll-margin-top:120px;scroll-margin-bottom:24px}
.scroll-section-reveal:focus-within{opacity:1;transition:none}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .scroll-section-reveal,.section-reveal,.reveal-ready{opacity:1;transform:none;transition:none;animation:none}
 .door-visual.door-peek .art{animation:none}
}

/* Privacy acknowledgement stays compact within the contact form. */
.contact-form input[type="checkbox"]{width:auto;display:inline-block;margin-right:.5rem}

/* Desktop opening artwork reaches both viewport edges; reading widths stay comfortable. */
@media(min-width:701px){
 .home-flow .home-hero:before{left:calc(50% - 50vw);right:calc(50% - 50vw)}
}