/* ==========================================================================
   1029_new_v1 — style.css
   Clean modern theme · cool neutrals + coral accent · Space Grotesk / IBM Plex
   ========================================================================== */

:root{
  --bg:#f4f5f7;
  --card:#ffffff;
  --line:#e6e8ee;
  --line-2:#eef0f4;
  --ink:#17181c;
  --text:#41454d;
  --muted:#878b95;
  --coral:#e85d3d;
  --coral-600:#cf4a2c;
  --coral-50:#fdeee9;
  --dark:#17181c;

  --display:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --body:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --read:740px;
  --max:1120px;
  --r:8px;
  --r-lg:12px;
  --r-pill:999px;
  --sh:0 1px 2px rgba(23,24,28,.04), 0 6px 18px rgba(23,24,28,.05);
  --sh-2:0 10px 24px rgba(23,24,28,.10), 0 24px 56px rgba(23,24,28,.10);
  --t:.22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  font-size:17px;line-height:1.7;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0}
a{color:var(--coral);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--coral-600)}
::selection{background:var(--coral);color:#fff}
:focus-visible{outline:2px solid var(--coral);outline-offset:2px;border-radius:3px}

h1{
  font-family:var(--display);font-weight:700;color:var(--ink);
  line-height:1.18;letter-spacing:-.02em;
  font-size:clamp(1.95rem,1.25rem + 2.3vw,2.65rem);margin:0 0 .5em;
}
p{margin:0 0 1.1em}
strong,b{font-weight:600;color:var(--ink)}
em,i{font-style:italic}

.bound{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}

/* --- Scroll progress --- */
.progress-line{
  position:fixed;inset:0 auto auto 0;height:3px;width:0;z-index:1200;
  background:linear-gradient(90deg,var(--coral),var(--coral-600));transition:width .08s linear;
}

/* ==========================================================================
   Top navigation (kept minimal)
   ========================================================================== */
.topnav{
  position:sticky;top:0;z-index:1100;background:rgba(244,245,247,.88);
  backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);transition:transform var(--t),box-shadow var(--t);
}
.topnav.is-hidden{transform:translateY(-100%)}
.topnav.is-pinned{box-shadow:0 8px 26px rgba(23,24,28,.06)}
.topnav__inner{display:flex;align-items:center;gap:1.4rem;min-height:60px}
.topnav__logo{display:inline-flex;align-items:center;gap:.55rem;flex-shrink:0}
.topnav__sign{width:32px;height:32px;border-radius:8px}
.topnav__title{font-family:var(--display);font-weight:600;font-size:1.12rem;color:var(--ink);letter-spacing:-.01em}

.topnav__burger{display:none;width:42px;height:42px;margin-left:auto;flex-direction:column;justify-content:center;gap:5px;padding:9px}
.topnav__burger span{height:2px;background:var(--ink);border-radius:2px;transition:transform var(--t),opacity var(--t)}
.topnav__burger.is-x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topnav__burger.is-x span:nth-child(2){opacity:0}
.topnav__burger.is-x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.topnav__links{display:flex;align-items:center;gap:1.4rem;margin-left:auto}
.nav{display:flex;align-items:center;gap:.15rem}
.nav--auth{margin-left:.4rem}
.nav__a{display:inline-block;padding:.5rem .8rem;border-radius:var(--r);font-weight:600;font-size:.93rem;color:var(--text);transition:background var(--t),color var(--t)}
.nav__a:hover{background:var(--coral-50);color:var(--coral-600)}

/* ==========================================================================
   Sheet / content (high to the top, centered measure)
   ========================================================================== */
.sheet{padding:2rem 0 4.5rem}
.lead{max-width:var(--read);margin:0 auto}

.post,.comments,.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}

.post{padding:clamp(1.5rem,1rem + 2vw,3rem)}
.post__top{margin-bottom:1.6rem}
.post__h1{margin-bottom:.7rem}
.post__info{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:var(--r-pill);background:var(--line-2);font-size:.82rem;color:var(--muted)}
.tag svg{opacity:.7}

/* --- Prose --- */
.post__text{font-size:1.07rem;line-height:1.8;color:var(--text)}
.post__text > *:first-child{margin-top:0}
.post__text p{margin-bottom:1.15em}
.post__text a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(232,93,61,.4)}
.post__text a:hover{text-decoration-color:var(--coral)}
.post__text h2,.post__text h3,.post__text h4{font-family:var(--display);color:var(--ink);font-weight:600;line-height:1.25;letter-spacing:-.01em;scroll-margin-top:80px}
.post__text h2{font-size:clamp(1.4rem,1.05rem + 1.2vw,1.75rem);margin:1.7em 0 .55em}
.post__text h3{font-size:clamp(1.18rem,1rem + .6vw,1.35rem);margin:1.4em 0 .5em}
.post__text h4{font-size:1.1rem;margin:1.2em 0 .5em}
.post__text ul,.post__text ol{margin:0 0 1.15em;padding-left:1.4em}
.post__text ul{list-style:disc}
.post__text ol{list-style:decimal}
.post__text li{margin-bottom:.4em}
.post__text li::marker{color:var(--coral)}
.post__text img{border-radius:var(--r);margin:1.5em 0}
.post__text figure{margin:1.5em 0}
.post__text figcaption{font-size:.85rem;color:var(--muted);text-align:center;margin-top:.5em}
.post__text blockquote{margin:1.5em 0;padding:.9em 1.3em;border-left:3px solid var(--coral);background:var(--coral-50);border-radius:0 var(--r) var(--r) 0;font-size:1.08rem;color:var(--ink)}
.post__text code{font-family:'IBM Plex Mono',Consolas,monospace;font-size:.88em;background:var(--line-2);padding:.14em .42em;border-radius:5px;border:1px solid var(--line)}
.post__text pre{margin:1.5em 0;background:var(--ink);border-radius:var(--r);overflow-x:auto}
.post__text pre code{display:block;padding:1.2em 1.4em;background:none;border:0;color:#e9eaee}
.post__text table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.96rem}
.post__text th,.post__text td{padding:.7em .9em;border:1px solid var(--line);text-align:left}
.post__text th{background:var(--line-2);font-weight:600;color:var(--ink)}

/* --- Table of contents --- */
.toc{margin-bottom:1.6rem;padding:1.05rem 1.25rem;background:var(--line-2);border:1px solid var(--line);border-radius:var(--r)}
.toc[hidden]{display:none}
.toc__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem}
.toc__title{font-family:var(--display);font-weight:600;font-size:.96rem;color:var(--ink)}
.toc__btn{color:var(--coral);font-weight:600;font-size:.82rem}
.toc__list ol{list-style:none;counter-reset:t;padding:0}
.toc__list li{counter-increment:t;margin:.28em 0;padding-left:1.7em;position:relative}
.toc__list li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:.04em;font-family:var(--display);font-size:.76em;font-weight:600;color:var(--coral)}
.toc__list ol ol{margin:.28em 0;padding-left:.1em}
.toc__list ol ol li::before{content:"—";color:var(--muted)}
.toc__list a{color:var(--text);font-size:.92rem}
.toc__list a:hover{color:var(--coral)}

/* --- Share --- */
.spread{display:flex;align-items:center;flex-wrap:wrap;gap:.7rem 1.1rem;margin-top:2rem}
.spread__label{font-weight:600;font-size:.9rem;color:var(--ink)}
.spread__row{display:flex;gap:.5rem}
.spread__btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r);border:1px solid var(--line);color:var(--muted);background:var(--card);transition:all var(--t)}
.spread__btn:hover{background:var(--coral);border-color:var(--coral);color:#fff;transform:translateY(-2px)}

.divide{border:0;border-top:1px solid var(--line);margin:2.2rem 0 0}

/* --- Section labels (span, never headings) --- */
.sect-title{display:block;font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink);margin-bottom:1.1rem}

/* --- Comments --- */
.comments{padding:clamp(1.4rem,1rem + 1.5vw,2rem);margin-top:1.5rem}

/* ==========================================================================
   Inputs / buttons
   ========================================================================== */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-bottom:.85rem}
.inp-wrap{display:block}
.inp{width:100%;padding:.72rem .95rem;font:inherit;font-size:.95rem;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r);transition:border-color var(--t),box-shadow var(--t)}
.inp::placeholder{color:var(--muted)}
.inp:focus{outline:0;border-color:var(--coral);box-shadow:0 0 0 3px rgba(232,93,61,.15)}
.inp--big{resize:vertical;min-height:120px;margin-bottom:.85rem}
.row-form{display:flex;gap:.5rem}
.row-form .inp{flex:1}

.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.72rem 1.6rem;font-family:var(--body);font-weight:600;font-size:.94rem;line-height:1;color:#fff;background:var(--coral);border-radius:var(--r);transition:background var(--t),transform var(--t),box-shadow var(--t)}
.button:hover{background:var(--coral-600);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(232,93,61,.26)}
.button:active{transform:translateY(0)}
.button--sm{padding:.5rem 1.1rem;font-size:.85rem}
.button--icon{padding:.72rem;width:46px;flex-shrink:0}
.button--dark{background:var(--dark)}
.button--dark:hover{background:#000}
.button--full{width:100%}

/* ==========================================================================
   Below-content forms band
   ========================================================================== */
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;max-width:var(--max);margin:2.6rem auto 0}
.box{padding:1.5rem}
.box__title{display:block;font-family:var(--display);font-weight:600;font-size:1.1rem;color:var(--ink);margin-bottom:.5rem}
.box__text{font-size:.92rem;color:var(--muted);margin-bottom:1.1rem}

/* ==========================================================================
   Footer (minimal)
   ========================================================================== */
.foot{background:var(--dark);color:#b9bcc4;padding:2.4rem 0 1.8rem;margin-top:1rem}
.foot a{color:#b9bcc4}
.foot a:hover{color:#fff}
.foot__inner{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.foot__brand{display:inline-flex;align-items:center;gap:.55rem}
.foot__brand img{width:30px;height:30px;border-radius:8px}
.foot__brand span{font-family:var(--display);font-weight:600;font-size:1.08rem;color:#fff}
.foot__list{display:flex;gap:1.3rem;font-size:.9rem}
.socials{display:flex;gap:.5rem;margin-left:auto}
.socials__a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r);background:rgba(255,255,255,.07);color:#cdd0d7;transition:all var(--t)}
.socials__a:hover{background:var(--coral);color:#fff;transform:translateY(-2px)}
.foot__base{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.1)}
.foot__copy{font-size:.84rem;color:#8a8e98}

/* ==========================================================================
   Back to top
   ========================================================================== */
.up{position:fixed;right:1.5rem;bottom:1.5rem;width:46px;height:46px;z-index:900;display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill);background:var(--coral);color:#fff;box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(12px) scale(.9);transition:opacity var(--t),visibility var(--t),transform var(--t),background var(--t)}
.up.is-on{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.up:hover{background:var(--coral-600);transform:translateY(-3px)}

/* ==========================================================================
   Cookie bar
   ========================================================================== */
.cookies{position:fixed;inset:auto 0 0 0;z-index:950;background:var(--dark);color:#cdd0d7;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1)}
.cookies.is-on{transform:translateY(0)}
.cookies__inner{display:flex;align-items:center;justify-content:space-between;gap:1.3rem;padding-top:1rem;padding-bottom:1rem}
.cookies p{font-size:.88rem;margin:0}
.cookies a{color:#fff;text-decoration:underline}

/* ==========================================================================
   Auth modals (pure CSS :target)
   ========================================================================== */
.modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:1.2rem}
.modal:target{display:flex;animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0}to{opacity:1}}
.modal__veil{position:absolute;inset:0;background:rgba(23,24,28,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.modal__box{position:relative;z-index:1;width:100%;max-width:410px;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:2rem 1.8rem 1.8rem}
.modal__x{position:absolute;top:.7rem;right:.95rem;font-size:1.7rem;line-height:1;color:var(--muted)}
.modal__x:hover{color:var(--ink)}
.modal__cap{display:block;font-family:var(--display);font-weight:600;font-size:1.4rem;color:var(--ink);margin-bottom:1.2rem}
.modal__form{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem}
.modal__alt{font-size:.88rem;color:var(--muted);margin:0;text-align:center}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:760px){
  .topnav__burger{display:flex}
  .topnav__links{position:fixed;inset:60px 0 0 0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.4rem;margin:0;padding:1.6rem 24px;background:var(--bg);transform:translateX(100%);transition:transform .3s ease;overflow-y:auto}
  .topnav__links.is-open{transform:translateX(0)}
  .nav{flex-direction:column;align-items:stretch;gap:.1rem}
  .nav--auth{margin:.8rem 0 0;border-top:1px solid var(--line);padding-top:.8rem}
  .nav__a{padding:.75rem 0;font-size:1.05rem}
  .nav--auth .button{margin-top:.4rem}
  .boxes{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root{--r-lg:10px}
  .bound{padding:0 16px}
  .duo{grid-template-columns:1fr}
  .spread{flex-direction:column;align-items:flex-start}
  .foot__inner{gap:1.1rem}
  .socials{margin-left:0}
  .up{right:1.1rem;bottom:1.1rem}
  .cookies__inner{flex-direction:column;align-items:flex-start;gap:.7rem}
  .modal__box{padding:1.7rem 1.3rem 1.4rem}
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print{
  .topnav,.foot,.up,.cookies,.progress-line,.spread,.boxes,.modal{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .post,.comments{box-shadow:none;border:0;padding:0}
  .lead{max-width:none}
}