:root{
    --bg: oklch(0.964 0.015 81);
    --paper: oklch(0.979 0.011 84);
    --paper-2: oklch(0.947 0.018 78);
    --ink: oklch(0.215 0.014 55);
    --ink-soft: oklch(0.34 0.013 55);
    --muted: oklch(0.50 0.013 58);
    --hair: oklch(0.79 0.016 74);
    --hair-strong: oklch(0.66 0.014 70);
    --coral: oklch(0.638 0.197 36);
    --coral-soft: oklch(0.905 0.045 50);

    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --maxw: 1240px;
    --rail: 210px;
    --ease: cubic-bezier(.2,.7,.2,1);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

  body{
    margin:0;
    font-family:var(--sans);
    color:var(--ink);
    background:var(--bg);
    background-image:
      radial-gradient(120% 80% at 100% 0%, oklch(0.985 0.014 80) 0%, transparent 55%),
      radial-gradient(90% 60% at 0% 100%, oklch(0.955 0.02 76) 0%, transparent 50%);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    line-height:1.6;
    font-size:17px;
    overflow-x:hidden;
  }

  ::selection{background:var(--coral);color:#fff;}

  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 36px;}

  /* ---------- type ---------- */
  h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-0.012em;margin:0;}
  em{font-style:italic;font-family:var(--serif);}
  .dot{color:var(--coral);font-style:normal;}
  .lead{font-size:1.2rem;line-height:1.6;color:var(--ink-soft);max-width:54ch;}
  p{margin:0 0 1rem;}

  .kicker,.register,.meta{
    font-family:var(--mono);font-size:.72rem;font-weight:500;
    text-transform:uppercase;letter-spacing:.18em;color:var(--muted);
  }
  .kicker{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink-soft);}
  .kicker::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:var(--coral);display:inline-block;}

  .coral-rule{height:1px;background-image:linear-gradient(to right, var(--hair) 50%, transparent 0%);background-size:6px 1px;background-repeat:repeat-x;border:0;}

  /* ---------- topbar ---------- */
  .topbar{border-bottom:1px dotted var(--hair);background:oklch(0.95 0.013 80 / .6);}
  .topbar__row{
    max-width:var(--maxw);margin:0 auto;padding:9px 36px;
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  }
  .topbar__row .mid{color:var(--ink-soft);}
  .topbar__row .right{display:flex;align-items:center;gap:.5rem;}
  .topbar__row .right b{width:.4rem;height:.4rem;border-radius:50%;background:var(--coral);display:inline-block;}

  /* ---------- nav ---------- */
  .nav{
    position:sticky;top:0;z-index:50;
    background:oklch(0.964 0.015 81 / .82);
    backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--hair);
    transition:transform .42s var(--ease), opacity .42s var(--ease);
  }
  .nav--hidden{transform:translateY(-104%);opacity:0;}
  .nav__row{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:var(--maxw);margin:0 auto;padding:14px 36px;}
  .brand{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.18rem;letter-spacing:-0.01em;}
  .brand .mk{width:1.5rem;height:1.5rem;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:0;}
  .brand .mk i{color:var(--coral);font-style:normal;}
  .brand small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:2px;}

  .nav__links{display:flex;align-items:center;gap:26px;}
  .nav__links a{font-size:.92rem;color:var(--ink-soft);position:relative;padding:6px 0;transition:color .2s;}
  .nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--coral);transition:right .3s var(--ease);}
  .nav__links a:hover{color:var(--ink);}
  .nav__links a:hover::after{right:0;}

  .btn{
    display:inline-flex;align-items:center;gap:.55rem;
    font-family:var(--sans);font-weight:500;font-size:.95rem;
    padding:.78rem 1.3rem;border-radius:999px;cursor:pointer;border:1px solid transparent;
    transition:transform .2s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;min-height:44px;
    text-align:center;line-height:1;
  }
  .btn .arr{transition:transform .25s var(--ease);}
  .btn:hover .arr{transform:translateX(3px);}
  .btn--primary{background:var(--coral);color:#fff;box-shadow:0 1px 0 oklch(0.45 0.14 32 / .35), 0 10px 22px -10px oklch(0.5 0.18 34 / .55);}
  .btn--primary:hover{transform:translateY(-1px);box-shadow:0 2px 0 oklch(0.45 0.14 32 / .4), 0 16px 30px -12px oklch(0.5 0.18 34 / .6);}
  .btn--ghost{border-color:var(--hair-strong);color:var(--ink);background:transparent;}
  .btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:var(--paper);}
  .btn--ink{background:var(--ink);color:var(--paper);}
  .btn--ink:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px oklch(0.2 0.02 60 / .6);}

  .nav__cta{flex-shrink:0;}
  .nav__burger{display:none;}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:84px 0 96px;border-bottom:1px solid var(--hair);}
  .hero__inner{display:grid;grid-template-columns:1fr;gap:34px;}
  .hero h1{font-size:clamp(2.9rem, 6.4vw, 5.6rem);line-height:1.02;letter-spacing:-0.022em;max-width:18ch;}
  .hero h1 em{font-weight:500;}
  .hero__lead{font-size:clamp(1.1rem,1.5vw,1.34rem);max-width:46ch;color:var(--ink-soft);}
  .hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
  .hero__cta .textlink{font-size:.95rem;color:var(--ink-soft);border-bottom:1px dotted var(--hair-strong);padding-bottom:2px;}
  .hero__cta .textlink:hover{color:var(--coral);border-color:var(--coral);}

  .facts{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px dotted var(--hair-strong);}
  .facts .f{padding:22px 22px 4px 0;border-right:1px dotted var(--hair);}
  .facts .f:last-child{border-right:0;}
  .facts .f .v{font-family:var(--serif);font-size:2rem;line-height:1;font-weight:500;}
  .facts .f .v em{font-size:1.7rem;}
  .facts .f .l{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.7rem;display:block;max-width:22ch;}

  .hero__rune{position:absolute;right:36px;top:90px;font-family:var(--serif);font-style:italic;font-size:clamp(7rem,16vw,15rem);line-height:1;color:oklch(0.9 0.022 70 / .5);pointer-events:none;user-select:none;z-index:0;}
  .hero__inner{position:relative;z-index:1;}

  /* ---------- section frame ---------- */
  .section{position:relative;border-top:1px solid var(--hair);}
  .section__inner{display:grid;grid-template-columns:var(--rail) 1fr;gap:54px;padding:88px 0;align-items:start;}
  .rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:.7rem;}
  .rail .num{font-family:var(--serif);font-style:italic;font-size:2.6rem;line-height:1;color:var(--coral);}
  .rail .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);max-width:18ch;line-height:1.5;}
  .rail .vline{margin-top:.6rem;width:1px;height:64px;background-image:linear-gradient(var(--hair-strong),var(--hair-strong));background-size:1px 6px;background-repeat:repeat-y;}

  .section h2{font-size:clamp(2rem,3.7vw,3.3rem);letter-spacing:-0.018em;line-height:1.06;}
  .section h2 em{font-weight:500;}
  .section .intro{font-size:1.1rem;color:var(--ink-soft);max-width:58ch;margin-top:1.1rem;}

  .blockhead{margin-bottom:46px;}

  /* ---------- cards ---------- */
  .grid{display:grid;gap:0;}
  .cards-4{grid-template-columns:repeat(4,1fr);}
  .cards-3{grid-template-columns:repeat(3,1fr);}
  .cards-2{grid-template-columns:repeat(2,1fr);}

  .card{border-top:1px dotted var(--hair-strong);padding:26px 24px 26px 0;}
  .card + .card{}
  .card .cnum{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--coral);}
  .card .ctag{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;}
  .card h3{font-size:1.4rem;margin:.6rem 0 .7rem;font-weight:500;}
  .card p{font-size:.96rem;color:var(--ink-soft);margin:0;}

  /* gaps between cards in a row */
  .cards-4 .card{padding-right:24px;}
  .cards-4 > :nth-child(n){padding-right:24px;}
  .cards-4 .card:not(:last-child){border-right:1px dotted var(--hair);}
  .cards-3 .card:not(:last-child){border-right:1px dotted var(--hair);}
  .cards-2 .card:not(:last-child){border-right:1px dotted var(--hair);}

  /* principles inline strip */
  .principles{display:flex;flex-wrap:wrap;gap:0;margin-top:42px;border-top:1px dotted var(--hair-strong);padding-top:24px;align-items:baseline;}
  .principles span{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--ink);}
  .principles .sep{margin:0 1.1rem;color:var(--coral);font-style:normal;}

  /* pull quote */
  .pull{
    margin:46px 0 8px;padding:30px 0 26px;
    border-top:1px dotted var(--hair-strong);border-bottom:1px dotted var(--hair-strong);
    display:grid;grid-template-columns:42px 1fr;gap:18px;align-items:start;
  }
  .pull .mark{font-family:var(--serif);font-style:italic;font-size:2.6rem;line-height:.7;color:var(--coral);}
  .pull p{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.2vw,1.85rem);line-height:1.4;margin:0;color:var(--ink);}

  /* focus emphasis card */
  .focus .card.is-primary{position:relative;}
  .focus .card.is-primary .ctag{color:var(--coral);}
  .focus .card.is-primary::after{content:"основной фокус";position:absolute;top:-9px;right:8px;background:var(--coral);color:#fff;font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;padding:3px 9px;border-radius:999px;}

  /* experience subblocks */
  .exp{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:32px;}
  .exp .e{padding:24px 28px 24px 0;border-top:1px dotted var(--hair-strong);}
  .exp .e:nth-child(odd){border-right:1px dotted var(--hair);padding-right:28px;}
  .exp .e:nth-child(even){padding-left:28px;}
  .exp .e .t{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.6rem;}
  .exp .e .t .n{font-family:var(--mono);font-size:.68rem;color:var(--coral);}
  .exp .e h3{font-size:1.18rem;font-weight:500;}
  .exp .e p{font-size:.95rem;color:var(--ink-soft);margin:0;}

  .bodytext{font-size:1.06rem;color:var(--ink-soft);max-width:62ch;}
  .bodytext p+p{margin-top:1rem;}

  /* method steps */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px;}
  .step{padding:26px 24px 8px 0;border-top:1px dotted var(--hair-strong);}
  .step:not(:last-child){border-right:1px dotted var(--hair);}
  .step .sn{font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--coral);margin-bottom:.9rem;display:block;}
  .step h3{font-size:1.16rem;margin:0 0 .6rem;font-weight:500;}
  .step p{font-size:.94rem;color:var(--ink-soft);margin:0;}

  /* services TOC */
  .toc{margin-top:6px;border-top:1px dotted var(--hair-strong);}
  .toc a{display:grid;grid-template-columns:48px 1fr auto;gap:22px;align-items:center;padding:20px 0;border-bottom:1px dotted var(--hair);transition:padding .25s var(--ease), background .25s;}
  .toc a:hover{padding-left:10px;background:oklch(0.95 0.018 78 / .5);}
  .toc a .n{font-family:var(--mono);font-size:.72rem;color:var(--coral);}
  .toc a .t{font-family:var(--serif);font-size:1.34rem;font-weight:500;}
  .toc a .g{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.5rem;}
  .toc a:hover .g{color:var(--coral);}
  .toc a .g svg{transition:transform .25s var(--ease);}
  .toc a:hover .g svg{transform:translateX(4px);}

  .toc-note{margin-top:30px;font-size:.96rem;color:var(--muted);max-width:70ch;}
  .toc-note b{color:var(--ink-soft);font-weight:500;}

  /* projects */
  .proj{display:grid;grid-template-columns:1.3fr 1fr;gap:0;align-items:stretch;}
  .proj .pcard{padding:34px 32px 34px 0;}
  .proj .pcard:not(:last-child){border-right:1px dotted var(--hair);}
  .proj .pcard.r2{padding-left:32px;}
  .proj .featured{background:var(--paper);border:1px solid var(--hair);border-radius:6px;padding:38px;display:grid;grid-template-rows:auto 1fr auto;gap:18px;height:100%;}
  .proj .featured .ftag{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);}
  .proj .featured h3{font-size:clamp(1.8rem,2.6vw,2.4rem);font-weight:500;}
  .proj .featured h3 em{font-weight:500;}
  .proj .featured p{font-size:1rem;color:var(--ink-soft);max-width:42ch;}
  .proj .featured .ai-note{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--muted);border-top:1px dotted var(--hair);padding-top:16px;line-height:1.6;}
  .proj .small h3{font-size:1.4rem;font-weight:500;margin:.5rem 0 .7rem;}
  .proj .small p{font-size:.95rem;color:var(--ink-soft);}
  .proj .small .pl{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);}
  .seemore{margin-top:34px;display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:4px;}

  /* blog */
  .blog{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
  .bcard{padding:26px 26px 10px 0;border-top:1px dotted var(--hair-strong);}
  .bcard:not(:last-child){border-right:1px dotted var(--hair);}
  .bcard .meta{margin-bottom:1rem;}
  .bcard h3{font-size:1.28rem;line-height:1.25;font-weight:500;margin:0 0 .8rem;}
  .bcard p{font-size:.94rem;color:var(--ink-soft);margin:0 0 1.2rem;}
  .bcard .read{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);display:inline-flex;gap:.5rem;align-items:center;}

  /* contacts */
  .contact{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start;}
  .contact h2{font-size:clamp(2rem,3.6vw,3.2rem);}
  .contact .bodytext{font-size:1.08rem;}
  .hints{display:grid;gap:0;margin-top:8px;}
  .hint{display:grid;grid-template-columns:46px 1fr;gap:16px;padding:18px 0;border-top:1px dotted var(--hair-strong);}
  .hint:last-child{border-bottom:1px dotted var(--hair-strong);}
  .hint .n{font-family:var(--mono);font-size:.72rem;color:var(--coral);padding-top:3px;}
  .hint .t{font-family:var(--serif);font-size:1.16rem;font-weight:500;}
  .contact__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;}
  .contact__sig{margin-top:26px;font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ink-soft);max-width:46ch;}

  /* footer */
  .footer{background:var(--paper-2);border-top:1px solid var(--hair-strong);padding:64px 0 32px;position:relative;overflow:hidden;}
  .footer__cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
  .footer__brand .brand{margin-bottom:14px;}
  .footer__brand p{font-size:.96rem;color:var(--ink-soft);max-width:30ch;}
  .footer h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 16px;}
  .footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
  .footer ul a{font-size:.95rem;color:var(--ink-soft);}
  .footer ul a:hover{color:var(--coral);}
  .footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:54px;padding-top:24px;border-top:1px dotted var(--hair-strong);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
  .footer__bottom .legal{display:flex;gap:22px;flex-wrap:wrap;}
  .footer__mega{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(4rem,16vw,15rem);line-height:.78;letter-spacing:-.03em;color:oklch(0.4 0.02 60 / .14);margin-top:34px;white-space:nowrap;user-select:none;}
  .footer__mega .dot{color:oklch(0.638 0.197 36 / .5);}

  /* reveal */
  [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease), transform .75s var(--ease);transition-delay:calc(var(--d,0) * 70ms);}
  [data-reveal].is-in{opacity:1;transform:none;}
  @media (prefers-reduced-motion: reduce){
    [data-reveal]{opacity:1 !important;transform:none !important;transition:none;}
  }

  /* responsive */
  @media (max-width:1080px){
    :root{--rail:150px;}
    .cards-4{grid-template-columns:repeat(2,1fr);}
    .cards-4 .card:nth-child(2){border-right:0;}
    .cards-4 .card:nth-child(3){border-top:0;padding-top:26px;}
    .steps{grid-template-columns:repeat(2,1fr);}
    .step:nth-child(2){border-right:0;}
    .step:nth-child(3),.step:nth-child(4){border-top:0;}
    .blog{grid-template-columns:repeat(2,1fr);}
    .bcard:nth-child(2){border-right:0;}
    .hero__rune{display:none;}
  }
  @media (max-width:880px){
    body{font-size:16px;}
    .wrap{padding:0 24px;}
    .topbar__row{padding:8px 24px;}
    .topbar__row .mid{display:none;}
    .nav__row{padding:12px 24px;}
    .nav__links{
      position:absolute;top:100%;left:0;right:0;
      flex-direction:column;align-items:stretch;gap:0;
      background:var(--paper);border-bottom:1px solid var(--hair);
      padding:0 24px;max-height:0;overflow:hidden;
      transition:max-height .42s var(--ease), padding .42s var(--ease);
    }
    .nav--open .nav__links{max-height:460px;padding:12px 24px 22px;}
    .nav__links a{padding:14px 0;border-bottom:1px dotted var(--hair);}
    .nav__links a:last-child{border-bottom:0;}
    .nav__links a::after{display:none;}
    .nav__cta{display:none;}
    .nav__burger{display:inline-flex;}
    .section__inner{grid-template-columns:1fr;gap:20px;padding:64px 0;}
    .rail{position:static;flex-direction:row;align-items:center;gap:14px;}
    .rail .vline{display:none;}
    .rail .num{font-size:1.8rem;}
    .exp{grid-template-columns:1fr;}
    .exp .e:nth-child(odd){border-right:0;padding-right:0;}
    .exp .e:nth-child(even){padding-left:0;}
    .proj{grid-template-columns:1fr;}
    .proj .pcard{padding:24px 0;}
    .proj .pcard:not(:last-child){border-right:0;border-bottom:1px dotted var(--hair);}
    .proj .pcard.r2{padding-left:0;}
    .proj .featured{padding:28px;}
    .contact{grid-template-columns:1fr;gap:36px;}
    .footer__cols{grid-template-columns:1fr 1fr;}
    .hero{padding:56px 0 64px;}
  }
  @media (max-width:560px){
    .wrap{padding:0 18px;}
    .topbar__row{padding:7px 18px;font-size:.6rem;}
    .nav__row{padding:10px 18px;}
    .brand{font-size:1.04rem;}
    .facts{grid-template-columns:1fr;}
    .facts .f{border-right:0;border-bottom:1px dotted var(--hair);padding:18px 0;}
    .facts .f:last-child{border-bottom:0;}
    .cards-4,.cards-3,.cards-2,.steps,.blog{grid-template-columns:1fr;}
    .card,.step,.bcard{border-right:0 !important;padding-right:0;}
    .toc a{grid-template-columns:34px 1fr auto;gap:14px;}
    .toc a .t{font-size:1.12rem;}
    .hero__cta{flex-direction:column;align-items:stretch;}
    .hero__cta .btn{justify-content:center;}
    .footer__cols{grid-template-columns:1fr;}
    .principles span{font-size:1.1rem;}
  }

  .burger{width:42px;height:42px;border:1px solid var(--hair-strong);border-radius:999px;background:transparent;display:grid;place-content:center;cursor:pointer;}
  .burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);}
  .burger span::before{top:-5px;} .burger span::after{top:5px;}

  .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:200;}
  .skip:focus{left:0;}
  :focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:2px;}

/* ==========================================================================\n   Production refinement layer — 2026\n   Keeps the exported structure, fixes spacing, cramped columns, photography,\n   mobile navigation and responsive behaviour.\n   ========================================================================== */
:root{
  --bg:#f4eee3;
  --paper:#fbf7ef;
  --paper-2:#ebe3d6;
  --ink:#251f1a;
  --ink-soft:#4b443d;
  --muted:#7b736a;
  --hair:#d1c6b6;
  --hair-strong:#a99d8c;
  --coral:#ef542f;
  --coral-soft:#f8d9ce;
  --maxw:1360px;
  --rail:148px;
}

body{
  background-color:var(--bg);
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(255,252,246,.82) 0%, transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(235,224,207,.5) 0%, transparent 50%);
}

.wrap,
.topbar__row,
.nav__row{
  padding-left:clamp(20px,3vw,44px);
  padding-right:clamp(20px,3vw,44px);
}

.section[id],
.hero[id]{scroll-margin-top:86px;}

.nav--open{
  transform:none !important;
  opacity:1 !important;
}

.nav__row{min-height:72px;}
.nav__links a{white-space:nowrap;}

/* Hero */
.hero{
  padding:54px 0 0;
  overflow:hidden;
}

.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(390px,.78fr);
  column-gap:clamp(38px,5.2vw,88px);
  row-gap:42px;
  align-items:center;
}

.hero__content{
  display:grid;
  align-content:center;
  gap:26px;
  min-width:0;
  padding:26px 0 10px;
}

.hero h1{
  font-size:clamp(3.25rem,5.7vw,5.35rem);
  max-width:14ch;
}

.hero__lead{
  margin:0;
  max-width:43ch;
}

.hero__media{
  position:relative;
  align-self:end;
  margin:0;
  min-width:0;
}

.hero__photo-frame{
  position:relative;
  aspect-ratio:4 / 5;
  max-height:690px;
  overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--hair);
  border-bottom:0;
}

.hero__photo-frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(244,238,227,.18), transparent 22%);
}

.hero__photo-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 42%;
}

.hero__media figcaption{
  position:absolute;
  z-index:2;
  right:18px;
  bottom:18px;
  max-width:26ch;
  padding:8px 11px;
  background:rgba(251,247,239,.9);
  border:1px solid rgba(169,157,140,.7);
  backdrop-filter:blur(8px);
  font-family:var(--mono);
  font-size:.58rem;
  line-height:1.5;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.facts{
  grid-column:1 / -1;
  width:100%;
  margin:0;
  border-top:1px solid var(--hair-strong);
  border-bottom:1px solid var(--hair);
}

.facts .f{
  min-width:0;
  min-height:116px;
  padding:26px 30px;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:18px;
  align-items:center;
  border-right:1px solid var(--hair);
}

.facts .f:first-child{padding-left:0;}
.facts .f:last-child{padding-right:0;border-right:0;}

.facts .f .v{
  font-size:2.45rem;
  color:var(--ink);
}

.facts .f .l{
  margin:0;
  max-width:30ch;
  font-family:var(--sans);
  font-size:.96rem;
  font-weight:500;
  line-height:1.45;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-soft);
}

.fact-icon{
  position:relative;
  width:42px;
  height:42px;
  display:block;
}

.fact-icon--line::before{
  content:"";
  position:absolute;
  left:8px;
  top:20px;
  width:27px;
  height:2px;
  background:var(--coral);
  transform:rotate(-54deg);
  transform-origin:center;
}

.fact-icon--circle{
  width:18px;
  height:18px;
  margin-left:11px;
  border:2px solid var(--coral);
  border-radius:50%;
}

/* Section geometry */
.section__inner{
  grid-template-columns:var(--rail) minmax(0,1fr);
  gap:42px;
  padding:88px 0;
}

.section__inner > *{min-width:0;}
.rail{top:88px;}
.blockhead{margin-bottom:36px;max-width:980px;}
.section .intro{max-width:64ch;}

/* Comfortable card spacing */
.grid,
.steps,
.blog,
.exp{gap:14px;}

.card,
.step,
.bcard,
.exp .e{
  min-width:0;
  height:100%;
  padding:24px !important;
  border:1px solid var(--hair) !important;
  border-radius:4px;
  background:rgba(251,247,239,.42);
}

.card p,
.step p,
.bcard p,
.exp .e p{
  line-height:1.55;
}

.task-card .ctag{
  display:block;
  margin:.7rem 0 .75rem;
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:500;
  line-height:1.22;
  letter-spacing:-.01em;
  text-transform:none;
  color:var(--ink);
}

.task-card p{font-size:.97rem;}
.focus .card.is-primary::after{top:-10px;right:18px;}

.cards-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.cards-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.steps{grid-template-columns:repeat(4,minmax(0,1fr));}
.blog{grid-template-columns:repeat(3,minmax(0,1fr));}

.principles{
  margin-top:34px;
  padding-top:22px;
}

.pull{
  margin-top:38px;
  padding-left:2px;
  padding-right:2px;
}

/* Experience + family photo fills the formerly empty right side. */
.about__intro{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(310px,.88fr);
  gap:44px;
  align-items:start;
}

.about__intro .bodytext{max-width:none;}

.about__visual{
  position:relative;
  margin:0;
  padding:0 34px 42px 0;
}

.about__photo-main{
  aspect-ratio:4 / 5;
  overflow:hidden;
  border:1px solid var(--hair-strong);
  background:var(--paper-2);
}

.about__photo-main img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}

.about__memory{
  position:absolute;
  right:0;
  bottom:28px;
  width:40%;
  aspect-ratio:3 / 4;
  object-fit:cover;
  border:8px solid var(--paper);
  box-shadow:0 18px 34px -22px rgba(37,31,26,.55);
  transform:rotate(2.3deg);
}

.about__visual figcaption{
  margin-top:14px;
  max-width:30ch;
  font-family:var(--serif);
  font-size:1.05rem;
  font-style:italic;
  line-height:1.4;
  color:var(--ink-soft);
}

.exp{
  margin-top:42px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.exp .e:nth-child(odd),
.exp .e:nth-child(even){padding:24px !important;}

/* Other blocks */
.toc a{
  padding-left:14px;
  padding-right:14px;
  border-radius:3px;
}

.proj{gap:14px;}
.proj .pcard,
.proj .pcard.r2{
  padding:0;
  border:0 !important;
}
.proj .pcard.r2{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px !important;
  border:1px solid var(--hair) !important;
  border-radius:4px;
  background:rgba(251,247,239,.36);
}

.read--muted{
  color:var(--muted) !important;
  cursor:default;
}

.contact__cta .btn{justify-content:center;}
.footer__bottom .legal{max-width:58ch;text-align:right;}

/* Progressive enhancement: content stays visible when JavaScript is disabled. */
[data-reveal]{opacity:1;transform:none;}
.js [data-reveal]{opacity:0;transform:translateY(20px);}
.js [data-reveal].is-in{opacity:1;transform:none;}

/* Mobile menu is not keyboard-focusable while closed. */
@media (max-width:880px){
  .nav__links{
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    box-shadow:0 16px 30px -24px rgba(37,31,26,.55);
    transition:max-height .42s var(--ease), padding .42s var(--ease), opacity .22s ease, visibility 0s linear .42s;
  }
  .nav--open .nav__links{
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:max-height .42s var(--ease), padding .42s var(--ease), opacity .22s ease, visibility 0s;
  }
  .nav--open .burger span{background:transparent;}
  .nav--open .burger span::before{top:0;transform:rotate(45deg);}
  .nav--open .burger span::after{top:0;transform:rotate(-45deg);}
  .burger span::before,.burger span::after{transition:top .2s ease,transform .2s ease;}
  body.menu-open{overflow:hidden;}
}

@media (max-width:1280px){
  :root{--rail:132px;}
  .section__inner{gap:34px;}
  .cards-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:1080px){
  .hero__inner{
    grid-template-columns:minmax(0,1fr) minmax(350px,.82fr);
    column-gap:34px;
  }
  .hero h1{font-size:clamp(3rem,6.2vw,4.6rem);}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .blog{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:900px){
  .hero{padding-top:36px;}
  .hero__inner{grid-template-columns:1fr;row-gap:30px;}
  .hero__content{padding-top:14px;}
  .hero h1{max-width:15ch;}
  .hero__media{width:min(100%,720px);}
  .hero__photo-frame{aspect-ratio:5 / 4;max-height:none;border-bottom:1px solid var(--hair);}
  .hero__photo-frame img{object-position:50% 34%;}
  .facts{grid-template-columns:repeat(3,minmax(0,1fr));}
  .facts .f{grid-template-columns:52px minmax(0,1fr);padding:22px 18px;}
  .facts .f:first-child{padding-left:0;}
  .facts .f:last-child{padding-right:0;}
  .about__intro{grid-template-columns:1fr;gap:34px;}
  .about__visual{width:min(100%,680px);}
}

@media (max-width:700px){
  .facts{grid-template-columns:1fr;}
  .facts .f,
  .facts .f:first-child,
  .facts .f:last-child{
    min-height:auto;
    padding:18px 0;
    border-right:0;
    border-bottom:1px dotted var(--hair);
    grid-template-columns:52px minmax(0,1fr);
  }
  .facts .f:last-child{border-bottom:0;}
  .cards-4,
  .cards-3,
  .cards-2,
  .steps,
  .blog,
  .exp{grid-template-columns:1fr;}
  .about__visual{padding-right:24px;}
  .about__memory{width:36%;border-width:6px;}
  .proj{grid-template-columns:1fr;}
  .footer__bottom .legal{text-align:left;}
}

@media (max-width:560px){
  .topbar__row .right{display:none;}
  .hero h1{font-size:clamp(2.65rem,13vw,3.55rem);}
  .hero__lead{font-size:1.05rem;}
  .hero__media figcaption{left:12px;right:12px;bottom:12px;max-width:none;}
  .hero__photo-frame{aspect-ratio:4 / 5;}
  .hero__photo-frame img{object-position:50% 38%;}
  .section__inner{padding:58px 0;}
  .card,.step,.bcard,.exp .e{padding:21px !important;}
  .toc a{grid-template-columns:30px 1fr;}
  .toc a .g{display:none;}
  .about__visual{padding-right:16px;padding-bottom:34px;}
  .about__memory{right:0;bottom:26px;width:38%;}
  .footer__mega{font-size:26vw;}
}

/* QA fixes after viewport testing */
.nav__burger{display:none;}

/* Do not hide whole sections before scrolling; animations must never create blank pages. */
.js [data-reveal],
.js [data-reveal].is-in{
  opacity:1 !important;
  transform:none !important;
}

/* .section__inner is also the page wrapper, so keep its horizontal gutters. */
.section__inner{
  padding:88px clamp(20px,3vw,44px);
}

.about__memory{right:22px;}

@media (max-width:880px){
  .nav__burger{display:inline-grid;}
  .section__inner{
    grid-template-columns:1fr;
    gap:20px;
    padding:64px 24px;
  }
}

@media (max-width:700px){
  .about__memory{right:14px;}
}

@media (max-width:560px){
  .section__inner{padding:58px 18px;}
  .hero__cta .textlink{align-self:flex-start;}
  .footer__mega{font-size:24vw;}
}

/* Final visual polish */
.nav{
  background:rgba(244,238,227,.96);
  box-shadow:0 1px 0 rgba(169,157,140,.18);
}

.about__memory{
  width:35%;
  height:auto;
  right:18px;
  bottom:34px;
}

@media (max-width:700px){
  .about__memory{width:32%;right:12px;bottom:30px;}
}

/* Keep the experience section compact: the photo should support the text, not create dead space. */
.about__photo-main{aspect-ratio:4 / 3;}
.about__memory{width:25%;right:12px;bottom:26px;}
.about__visual{padding-right:24px;padding-bottom:30px;}

@media (max-width:700px){
  .about__memory{width:27%;right:8px;bottom:24px;}
}

/* Tablet navigation: the full seven-link menu is too dense around 1024 px. */
@media (max-width:1120px){
  .nav__links{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    max-height:0;
    overflow:hidden;
    padding:0 24px;
    visibility:hidden;
    opacity:0;
    pointer-events:none;
    background:var(--paper);
    border-bottom:1px solid var(--hair);
    box-shadow:0 16px 30px -24px rgba(37,31,26,.55);
    transition:max-height .42s var(--ease), padding .42s var(--ease), opacity .22s ease, visibility 0s linear .42s;
  }
  .nav--open .nav__links{
    max-height:520px;
    padding:12px 24px 22px;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transition:max-height .42s var(--ease), padding .42s var(--ease), opacity .22s ease, visibility 0s;
  }
  .nav__links a{
    padding:14px 0;
    border-bottom:1px dotted var(--hair);
  }
  .nav__links a:last-child{border-bottom:0;}
  .nav__links a::after{display:none;}
  .nav__cta{display:none;}
  .nav__burger{display:inline-grid;}
  .nav--open .burger span{background:transparent;}
  .nav--open .burger span::before{top:0;transform:rotate(45deg);}
  .nav--open .burger span::after{top:0;transform:rotate(-45deg);}
  body.menu-open{overflow:hidden;}

  html:not(.js) .nav__row{flex-wrap:wrap;}
  html:not(.js) .nav__links{
    position:static;
    flex-basis:100%;
    order:3;
    max-height:none;
    padding:10px 0 14px;
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    box-shadow:none;
    border-bottom:0;
  }
  html:not(.js) .nav__burger{display:none;}
}