@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:100% 125%;font-display:swap;src:url("fonts/Archivo-Variable.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/Newsreader-Variable.woff2") format("woff2")}
/* Mihaiela Bocancea · Consiliere filosofică
   Varianta 7 — „Linia de dialog”
   Consilierea filosofică este dialog. Semnătura vizuală este linia de dialog din tipografia românească („—”),
   în vermilion, care marchează replicile: întrebările omului (serif, mari) și răspunsurile (sans, închise la culoare).
   Pagină aproape albă, text gros și negru, un singur vermilion; o singură bandă de culoare și o singură zonă închisă. */

:root{
  --paper:#FAF9F6;
  --ink:#111111;
  --ink-2:#26231F;
  --grey:#4F4A44;
  --rule:rgba(17,17,17,.16);
  --accent:#C8321E;
  --accent-deep:#A92915;
  --dark:#171715;
  --on-dark:#F5F3EE;
  --on-dark-2:rgba(245,243,238,.76);
  --serif:"Newsreader","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gl:max(20px,env(safe-area-inset-left,0px));
  --gr:max(20px,env(safe-area-inset-right,0px));
  --max:1240px;
  --dash:1.15em;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
html.smooth{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html.smooth{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
p,h1,h2,h3,h4{margin:0}
h1,h2,h3,h4{font-weight:inherit}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:calc(var(--max) + var(--gl) + var(--gr));margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.skip{position:absolute;left:-9999px;top:0;z-index:60;padding:.85rem 1.1rem;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none}
.skip:focus{left:var(--gl);top:calc(env(safe-area-inset-top,0px) + .5rem)}

/* Linia de dialog: replică cu „—” vermilion atârnat în stânga */
.q,.review blockquote p,.acc summary span,.final h2{position:relative;padding-left:var(--dash)}
.q::before,.review blockquote p::before,.acc summary span::before,.final h2::before,.band p::before{content:"";position:absolute;left:0;top:.5em;top:calc(.5lh - .1em);width:.72em;height:max(2px,.075em);background:var(--accent)}

/* ---------- Butoane ---------- */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:3.5rem;padding:1rem 1.35rem;background:var(--accent);color:#fff;border:1.5px solid var(--accent);font:700 1.0625rem/1.2 var(--sans);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.btn::after{content:"→";font-weight:400;transition:transform .2s}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn:hover::after{transform:translateX(4px)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- Antet ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--paper);z-index:41}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:4rem;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand b{font:800 .8125rem/1.1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.brand i{font:300 1.6rem/1 var(--sans);font-style:normal;color:var(--accent)}
.brand small{font:500 .75rem/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.menu-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:0 .25rem;background:none;border:0;font:600 .9375rem var(--sans);color:var(--ink);cursor:pointer}
.menu-btn i{position:relative;width:1.25rem;height:1.5px;background:currentColor}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:100%;height:1.5px;background:currentColor}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.menu{display:none}
@media (max-width:959px){
  .menu.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--rule);padding:.25rem var(--gr) 1.5rem var(--gl);box-shadow:0 20px 30px -20px rgba(0,0,0,.25)}
  .menu.open a:not(.btn){padding:.9rem 0;border-bottom:1px solid var(--rule);font:600 1.375rem/1.3 var(--serif);text-decoration:none}
  .menu.open .btn{margin-top:1.25rem;background:var(--accent);border-color:var(--accent);color:#fff}
}
@media (min-width:960px){
  .menu-btn{display:none}
  .menu{display:flex;align-items:center;gap:1.75rem;font:500 .9375rem var(--sans)}
  .menu a:not(.btn){text-decoration:none}
  .menu .btn{min-height:2.75rem;padding:.55rem 1rem;font-size:.9375rem}
}

/* ---------- Primul ecran ---------- */
.hero{position:relative}
.hero-photo{position:relative;margin:0;height:44svh;min-height:280px;max-height:460px;overflow:hidden;background:#d9d6d1}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.05)}
.hero-card{position:relative;margin:-3.5rem 0 0;padding:1.5rem var(--gr) 3.5rem var(--gl);background:var(--paper)}
.h1{font:600 clamp(2.5rem,10.5vw,3.25rem)/1 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.h1 .sub{display:block;margin-top:1rem;font:500 1.1875rem/1.35 var(--sans);letter-spacing:0;color:var(--ink-2);max-width:30ch;text-wrap:pretty}
.h1 .sub em{font-style:normal;box-shadow:inset 0 -.35em 0 rgba(200,50,30,.18)}
.lead{margin-top:1.25rem;color:var(--ink-2);max-width:34rem}
.hero .btn{margin-top:1.75rem;width:100%}
.note{margin-top:.75rem;font:500 .875rem var(--sans);color:var(--grey)}
@media (min-width:600px){.hero .btn{width:auto;min-width:20rem}}
@media (min-width:960px){
  .hero{min-height:min(calc(100svh - 4rem),860px);display:flex;align-items:center}
  .hero-photo{position:absolute;top:0;right:0;bottom:0;width:46%;height:auto;max-height:none;min-height:0}
  .hero-card{width:54%;margin:0;padding:4.5rem 3rem 4.5rem max(var(--gl),calc((100vw - var(--max)) / 2));background:none}
  .h1{font-size:clamp(4rem,6.4vw,6.5rem);line-height:.96;max-width:11ch}
  .h1 .sub{font-size:1.5rem;margin-top:1.75rem;max-width:26ch;line-height:1.3}
  .lead{font-size:1.1875rem;max-width:30rem}
  .hero .btn{margin-top:2.25rem}
}

/* ---------- Secțiuni ---------- */
.sec{padding:3.5rem 0}
.kicker{display:flex;align-items:center;gap:.9rem;font:500 1.375rem/1 var(--serif);font-variant-numeric:lining-nums;color:var(--accent)}
.kicker::after{content:"";flex:1;height:1.5px;background:var(--ink);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.1,1)}
html.io .kicker:not(.in)::after{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){.kicker::after{transition:none}html.io .kicker:not(.in)::after{transform:none}}
.h2{margin-top:1.25rem;font:600 clamp(2.25rem,8.5vw,2.75rem)/1.04 var(--serif);letter-spacing:-.02em;text-wrap:balance;max-width:16ch}
@media (min-width:960px){
  .sec{padding:5.5rem 0}
  .h2{margin-top:1.5rem;font-size:clamp(3rem,4.4vw,4rem)}
}

/* Cu ce poți veni: dialog */
.dialog{margin-top:2.25rem;border-top:1.5px solid var(--ink)}
.line{padding:1.5rem 0 1.65rem;border-bottom:1px solid var(--rule)}
.q{font:500 1.5rem/1.22 var(--serif);letter-spacing:-.01em;text-wrap:pretty}
.a{margin-top:.7rem;padding-left:calc(1.5rem * 1.15);font-size:1rem;color:var(--ink-2);max-width:38rem}
@media (min-width:960px){
  .dialog{margin-top:3.5rem}
  .line{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:3rem;padding:2.25rem 0}
  .q{font-size:2.125rem}
  .a{margin:0;padding:.55rem 0 0;font-size:1.0625rem}
}

/* Banda vermilion: fraza care „se clarifică” la derulare */
.band{background:var(--accent);color:#fff;padding:3.5rem 0}
.band p{position:relative;padding-left:var(--dash);font:500 clamp(1.75rem,7vw,2.25rem)/1.18 var(--serif);letter-spacing:-.015em;max-width:26ch;text-wrap:pretty}
.band p::before{background:#fff}
.clarify .w{transition:opacity .25s}
html.io .clarify .w{opacity:.32}
html.io .clarify .w.on{opacity:1}
@media (prefers-reduced-motion:reduce){html.io .clarify .w{opacity:1}}
@media (min-width:960px){.band{padding:6.5rem 0}.band p{font-size:clamp(2.5rem,3.8vw,3.5rem);max-width:28ch}}

/* Despre */
.about{display:grid;gap:1.75rem;margin-top:1.5rem}
.about-photo{margin:0}
.about-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;filter:grayscale(1) contrast(1.05)}
.bio .h2{margin-top:0}
.bio p{color:var(--ink-2);max-width:36rem}
.bio .h2+p{margin-top:1.25rem}
.bio p+p{margin-top:1rem}
.studies{margin-top:3.5rem}
.studies-title{font:700 .75rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-bottom:1rem;border-bottom:1.5px solid var(--ink)}
.edu{list-style:none;margin:0;padding:0}
.edu li{display:grid;row-gap:.35rem;padding:1.4rem 0;border-bottom:1px solid var(--rule)}
.edu .yr{font:700 .8125rem/1.4 var(--sans);font-variant-numeric:tabular-nums;color:var(--accent)}
.edu h4{font:600 1.375rem/1.25 var(--serif)}
.edu .edu-meta{font:500 .9375rem/1.5 var(--sans);color:var(--ink)}
.edu li>p:last-child{font-size:.9375rem;color:var(--grey)}
@media (min-width:600px){.about-photo{max-width:28rem}}
@media (min-width:960px){
  .about{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:4rem;align-items:end;margin-top:2.5rem}
  .about-photo{max-width:none}
  .studies{margin-top:5rem}
  .edu li{grid-template-columns:minmax(0,2fr) minmax(0,8fr);column-gap:2rem;padding:1.75rem 0}
  .edu .yr{grid-row:1 / span 3;padding-top:.35rem}
  .edu li>*:not(.yr){grid-column:2}
}

/* Consultația: fișă + pași */
.sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:2.25rem 0 0;border-top:1.5px solid var(--ink)}
.sheet div{padding:1.35rem 1rem 1.4rem 0;border-bottom:1px solid var(--rule)}
.sheet div:nth-child(odd){border-right:1px solid var(--rule)}
.sheet div:nth-child(even){padding-left:1rem}
.sheet dt{font:600 clamp(1.5rem,6.6vw,2rem)/1.05 var(--serif);letter-spacing:-.015em}
.sheet dt small{font:700 .75rem var(--sans);letter-spacing:.08em;text-transform:uppercase;margin-left:.15rem}
.sheet dd{margin:.55rem 0 0;font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.steps{list-style:none;margin:3rem 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-content:start;padding:1.4rem 0;border-top:1px solid var(--rule)}
.steps li::before{content:"0" counter(s);font:700 .8125rem/2.1 var(--sans);color:var(--accent)}
.steps h3{font:600 1.375rem/1.25 var(--serif)}
.steps p{grid-column:2;margin-top:.45rem;color:var(--ink-2);font-size:1rem}
.cum-foot{margin-top:1.5rem;padding-top:1.5rem;border-top:1.5px solid var(--ink);display:grid;gap:1.25rem}
.cum-foot p{color:var(--ink-2)}
.cum-foot .btn{justify-self:start}
@media (min-width:960px){
  .sheet{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:3.5rem}
  .sheet div,.sheet div:nth-child(even){padding:1.75rem 1.25rem;border-right:1px solid var(--rule)}
  .sheet div:first-child{padding-left:0}
  .sheet div:last-child{border-right:0}
  .sheet dt{font-size:clamp(1.75rem,2.4vw,2.25rem)}
  .steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem;margin-top:4rem}
  .steps h3{font-size:1.5rem}
  .cum-foot{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem;margin-top:2.5rem}
}

/* Recenzia: replică */
.review{margin:2rem 0 0}
.review blockquote{margin:0}
.review blockquote p{font:500 1.375rem/1.4 var(--serif);text-wrap:pretty;max-width:48rem}
.review figcaption{margin-top:1.25rem;padding-left:var(--dash);font:700 .8125rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.review figcaption{padding-left:calc(1.375rem * 1.15)}
@media (min-width:960px){
  .review{margin-top:3rem}
  .review blockquote p{font-size:1.875rem;line-height:1.36}
  .review figcaption{padding-left:calc(1.875rem * 1.15)}
}

/* Întrebări: fiecare întrebare e o replică */
.acc{margin-top:2.25rem;border-top:1.5px solid var(--ink)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{display:flex;justify-content:space-between;align-items:baseline;gap:1.25rem;padding:1.25rem 0;cursor:pointer;list-style:none;font:500 1.25rem/1.3 var(--serif)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";flex:none;font:400 1.5rem/1 var(--sans);color:var(--ink);transition:transform .25s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc summary:hover{color:var(--accent)}
.acc .body{padding:0 0 1.6rem calc(1.25rem * 1.15);max-width:44rem;color:var(--ink-2)}
.acc .body p+p{margin-top:.85rem}
@media (min-width:960px){
  .acc{margin-top:3.5rem}
  .acc summary{font-size:1.625rem;padding:1.6rem 0}
  .acc .body{padding-left:calc(1.625rem * 1.15);font-size:1.0625rem}
}

/* ---------- Final: singura zonă închisă ---------- */
.final{background:var(--dark);color:var(--on-dark);padding:4.5rem 0 5rem}
.final h2{font:500 clamp(2.25rem,9.5vw,3rem)/1.06 var(--serif);letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
.final .big-link{display:inline-flex;align-items:baseline;gap:.9rem;margin:2.5rem 0 0 var(--dash);padding-bottom:.55rem;border-bottom:1.5px solid var(--on-dark);font:500 1.5rem/1.2 var(--serif);text-decoration:none;color:var(--on-dark)}
.final .big-link{margin-left:calc(2.25rem * 1.15)}
.final .big-link::after{content:"→";font-family:var(--sans);font-weight:400;color:var(--accent);transition:transform .2s}
.final .big-link:hover{color:var(--on-dark);border-color:var(--accent)}
.final .big-link:hover::after{transform:translateX(5px)}
.book-note,.book-mail{margin-left:calc(2.25rem * 1.15);font-size:.9375rem;color:var(--on-dark-2)}
.book-note{margin-top:1.5rem}
.book-mail{margin-top:.35rem}
.book-mail a{color:var(--on-dark);overflow-wrap:anywhere}
.book-mail a:hover{color:var(--on-dark);text-decoration-color:var(--accent)}
.final :focus-visible{outline-color:var(--on-dark)}
@media (min-width:960px){
  .final{padding:9rem 0 9.5rem}
  .final h2{font-size:clamp(3.5rem,5.2vw,4.75rem)}
  .final .big-link,.book-note,.book-mail{margin-left:calc(clamp(3.5rem,5.2vw,4.75rem) * 1.15)}
  .final .big-link{font-size:2rem;margin-top:3.5rem}
}

/* ---------- Subsol ---------- */
footer{padding:2.5rem 0 2.75rem;border-top:1px solid var(--rule)}
.foot{display:grid;gap:1.5rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.foot nav a{font:700 .75rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:.5rem 0}
.foot p{font-size:.8125rem;color:var(--grey);max-width:44rem}
@media (min-width:960px){.foot{grid-template-columns:auto 1fr;align-items:center}.foot nav{justify-content:flex-end}.foot p{grid-column:1 / -1;padding-top:1.25rem;border-top:1px solid var(--rule);max-width:none}}

/* ---------- Bara de jos pe mobil ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:.75rem var(--gr) calc(.75rem + env(safe-area-inset-bottom,0px)) var(--gl);background:rgba(250,249,246,.95);border-top:1px solid var(--rule);transition:transform .25s,opacity .25s}
.dock .btn{width:100%}
.dock.off{transform:translateY(110%);opacity:0;pointer-events:none}
@media (min-width:960px){.dock{display:none}}
@media (max-width:959px){footer{padding-bottom:6.5rem}}

/* ---------- Documente (condiții, confidențialitate, 404, programare) ---------- */
.doc{padding:3rem 0 4.5rem}
.doc .wrap{max-width:calc(46rem + var(--gl) + var(--gr))}
.doc h1{font:600 clamp(2.25rem,8vw,3.25rem)/1.06 var(--serif);letter-spacing:-.02em;margin-bottom:1.25rem}
.doc h2{font:600 1.5rem/1.25 var(--serif);margin:2.5rem 0 .85rem;padding-top:1.25rem;border-top:1.5px solid var(--ink)}
.doc p,.doc li{color:var(--ink-2)}
.doc p+p{margin-top:.85rem}
.doc ul{padding-left:1.15rem;margin:.75rem 0}
.doc li+li{margin-top:.4rem}
.doc .updated{margin:0 0 2rem;font:500 .875rem var(--sans);color:var(--grey)}
.doc .back{display:inline-block;margin-bottom:2rem;font-weight:500}
.doc .btn{margin-top:1.5rem}
@media (min-width:960px){.doc{padding:5rem 0 7rem}}