/* himankseth.com — shared styles for inner pages (v2, Oct 2026).
   The home page carries its own inline copy of these tokens for a faster first paint. */
:root{
  --night:#080909; --night-2:#151717; --on-night:#f2f5f4; --on-night-mute:#f2f5f480; --night-line:#ffffff24;
  --bg:#f4f5f3; --bg-2:#e9ebe8; --fg:#121615; --mute:#5d6662; --line:#12161524;
  --accent:#1e8f65; --accent-2:#14684a;
  --font:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.76,0,.24,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --gut:max(16px,4vw);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0d1211; --bg-2:#141b19; --fg:#eef1ef; --mute:#9aa49f; --line:#ffffff1f; color-scheme:dark } }
:root[data-theme="dark"]{ --bg:#0d1211; --bg-2:#141b19; --fg:#eef1ef; --mute:#9aa49f; --line:#ffffff1f; color-scheme:dark }
/* Pages that are dark by design (contact) */
body.is-night{ --bg:var(--night); --bg-2:#141616; --fg:var(--on-night); --mute:#f2f5f48c; --line:var(--night-line) }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ font-weight:500; letter-spacing:-.02em; line-height:1.1; margin:0; text-wrap:balance }
p{ margin:0 }
[hidden]{ display:none!important }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.wrap{ padding-left:max(var(--gut),env(safe-area-inset-left,0px)); padding-right:max(var(--gut),env(safe-area-inset-right,0px)) }
.inner{ max-width:1500px; margin:0 auto }
.label{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mute) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }
.skip{ position:absolute; left:16px; top:-60px; background:var(--accent); color:#fff; padding:10px 16px; border-radius:99px; z-index:200 }
.skip:focus{ top:16px }
.ulink{ border-bottom:1px solid currentColor }
.ulink:hover{ color:var(--accent) }

/* Buttons */
.pill{ position:relative; display:inline-flex; align-items:center; gap:.6em; padding:1.05em 1.9em; border-radius:99px; border:1px solid currentColor; overflow:hidden; isolation:isolate; font-size:.95rem; line-height:1; white-space:nowrap; cursor:pointer; background:none; font-family:inherit; color:inherit }
.pill::before{ content:""; position:absolute; left:-10%; right:-10%; top:100%; height:220%; border-radius:50%; background:var(--accent); z-index:-1; transition:top .6s var(--ease) }
.pill:hover::before,.pill:focus-visible::before{ top:-60% }
.pill:hover,.pill:focus-visible{ color:#fff; border-color:var(--accent) }
.pill--solid{ background:var(--fg); color:var(--bg); border-color:var(--fg) }
.pill--sm{ padding:.75em 1.3em; font-size:.88rem }
.pill.is-active{ background:var(--fg); color:var(--bg); border-color:var(--fg) }
.round{ position:relative; display:grid; place-items:center; width:var(--d,170px); height:var(--d,170px); border-radius:50%; background:var(--fg); color:var(--bg); font-size:1rem; overflow:hidden; isolation:isolate; text-align:center; flex:none; border:0; cursor:pointer; font-family:inherit }
.round::before{ content:""; position:absolute; inset:100% -10% auto; height:200%; border-radius:50%; background:var(--accent); z-index:-1; transition:top .6s var(--ease) }
.round:hover::before,.round:focus-visible::before{ top:-50% }
.round:hover{ color:#fff }
.round--accent{ background:var(--accent); color:#fff }
.round--accent::before{ background:var(--accent-2) }
[data-magnetic]{ transition:transform .5s var(--ease-out) }
[data-magnetic] > span{ display:inline-block; transition:transform .5s var(--ease-out) }

/* Top navigation (inner pages: dark text on the page background) */
.topnav{ position:relative; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:24px; padding-top:calc(28px + env(safe-area-inset-top,0px)) }
.brand{ display:flex; gap:.5em; font-size:.98rem; white-space:nowrap }
.brand .c{ display:inline-block; transition:transform .6s var(--ease) }
.brand:hover .c{ transform:rotate(360deg) }
.brand .roll{ display:inline-grid; overflow:hidden; height:1.55em }
.brand .roll i{ font-style:normal; transition:transform .5s var(--ease) }
.brand:hover .roll i{ transform:translateY(-100%) }
.topnav ul{ display:flex; gap:clamp(14px,2.2vw,32px); list-style:none; margin:0; padding:0; font-size:.98rem }
.topnav li a{ position:relative; display:block; padding:6px 0 }
.topnav li a::after{ content:""; position:absolute; left:50%; bottom:-6px; width:5px; height:5px; border-radius:50%; background:currentColor; transform:translateX(-50%) scale(0); transition:transform .3s var(--ease) }
.topnav li a:hover::after,.topnav li a[aria-current="page"]::after{ transform:translateX(-50%) scale(1) }
.menu-btn{ position:fixed; z-index:60; top:calc(22px + env(safe-area-inset-top,0px)); right:max(22px,calc(env(safe-area-inset-right,0px) + 16px)); --d:72px; background:var(--night-2); color:#fff; box-shadow:0 0 0 1px #ffffff1f; transform:scale(0); transition:transform .45s var(--ease) }
.menu-btn.is-shown,.menu-open .menu-btn{ transform:scale(1) }
.menu-btn .bars{ display:grid }
.menu-btn i{ display:block; width:26px; height:1.5px; background:currentColor; transition:transform .4s var(--ease) }
.menu-btn i + i{ margin-top:7px }
.menu-open .menu-btn i:first-child{ transform:translateY(4.25px) rotate(45deg) }
.menu-open .menu-btn i:last-child{ transform:translateY(-4.25px) rotate(-45deg) }
.drawer{ position:fixed; z-index:55; top:0; right:0; bottom:0; width:min(520px,100%); background:var(--night-2); color:var(--on-night); padding:calc(120px + env(safe-area-inset-top,0px)) max(56px,calc(env(safe-area-inset-right,0px) + 24px)) 40px 56px; transform:translateX(105%); transition:transform .8s var(--ease); display:flex; flex-direction:column; justify-content:space-between; gap:40px; overflow-y:auto }
.menu-open .drawer{ transform:none }
.drawer .label{ color:var(--on-night-mute); border-bottom:1px solid var(--night-line); padding-bottom:22px; margin-bottom:22px }
.drawer nav a{ display:block; font-size:clamp(2.1rem,5vw,3.2rem); line-height:1.25; letter-spacing:-.02em }
.drawer nav a:hover,.drawer nav a[aria-current="page"]{ color:#6fe0b0 }
.drawer .socials{ display:flex; flex-wrap:wrap; gap:18px 26px; font-size:.95rem }
.scrim{ position:fixed; inset:0; z-index:50; background:#0008; opacity:0; pointer-events:none; transition:opacity .6s var(--ease) }
.menu-open .scrim{ opacity:1; pointer-events:auto }

/* Page header */
.phead{ padding-block:clamp(70px,11vw,150px) 0 }
.phead__eyebrow{ margin-bottom:22px }
.phead h1{ font-size:clamp(2.6rem,7vw,7rem); line-height:1.02; letter-spacing:-.04em; max-width:15ch }
.phead__lead{ margin-top:28px; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.5; color:var(--mute); max-width:56ch }
.phead__line{ position:relative; border-bottom:1px solid var(--line); margin-top:clamp(60px,8vw,110px) }
.phead__line .round{ position:absolute; right:clamp(0px,8vw,140px); top:50%; transform:translateY(-50%); --d:clamp(130px,12vw,170px) }
.phead__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }

/* Sections */
.sec{ padding-block:clamp(70px,9vw,130px) 0 }
.phead + .sec{ padding-top:clamp(100px,10vw,150px) }
.sec__head{ display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:clamp(32px,4.5vw,60px) }
.sec__head h2,.big{ font-size:clamp(2.1rem,4.6vw,4.2rem); letter-spacing:-.035em }
.sec__head p{ color:var(--mute); max-width:46ch }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:clamp(28px,6vw,110px) }
.split > *{ min-width:0 }
.sticky{ position:sticky; top:32px; align-self:start }

/* Row lists (timeline / experience) */
.xp{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.xp li{ display:grid; grid-template-columns:11ch minmax(0,1fr); gap:6px 26px; padding:26px 0; border-bottom:1px solid var(--line) }
.xp time{ color:var(--accent); font-size:.92rem; font-variant-numeric:tabular-nums; padding-top:.2em }
.xp h3{ font-size:clamp(1.2rem,1.7vw,1.5rem); letter-spacing:-.015em }
.xp .org{ color:var(--mute); font-size:.95rem; margin-top:4px }
.xp .org a:hover{ color:var(--accent) }
.xp p.desc{ grid-column:2; color:var(--mute); font-size:.95rem; max-width:62ch; margin-top:6px }

/* Chips */
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px }
.chips li{ background:var(--bg-2); border-radius:99px; padding:.42em .9em; font-size:.88rem; line-height:1.3 }
.groups{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:28px 36px }
.groups .label{ margin-bottom:10px }

/* Cards grid */
.cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.card{ background:var(--bg-2); border-radius:18px; padding:24px 22px 26px; min-width:0 }
.card .k{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent) }
.card b{ display:block; font-weight:500; font-size:1.1rem; margin:12px 0 6px; line-height:1.25 }
.card p{ color:var(--mute); font-size:.92rem }

/* Certificates table */
.certs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.certs li{ display:grid; grid-template-columns:9ch minmax(0,1fr) minmax(0,.6fr) auto; gap:8px 24px; align-items:baseline; padding:16px 0; border-bottom:1px solid var(--line); font-size:.95rem }
.certs time{ color:var(--mute); font-variant-numeric:tabular-nums }
.certs .by{ color:var(--mute) }
.certs a{ color:var(--accent); white-space:nowrap }
.certs a:hover{ text-decoration:underline }
.filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px }

/* Big link rows with floating preview (blog list, companies) */
.rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.rows li{ border-bottom:1px solid var(--line) }
.rows a,.rows .row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr) 10ch; gap:24px; align-items:center; padding:clamp(24px,3.4vw,44px) clamp(0px,3vw,48px); transition:opacity .4s }
.rows h2,.rows h3{ font-size:clamp(1.5rem,3.4vw,3.3rem); letter-spacing:-.03em; transition:transform .5s var(--ease); min-width:0; overflow-wrap:anywhere }
.rows .meta,.rows .yr{ color:var(--mute); font-size:.95rem }
.rows .yr{ text-align:right }
.rows__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr) 10ch; gap:24px; padding:0 clamp(0px,3vw,48px) 16px; font-size:.78rem; color:var(--mute); letter-spacing:.06em; text-transform:uppercase }
@media (hover:hover) and (pointer:fine){
  .rows:hover a,.rows:hover .row{ opacity:.35 }
  .rows a:hover,.rows .row:hover{ opacity:1 }
  .rows a:hover h2,.rows a:hover h3{ transform:translateX(-12px) }
}
.peek{ position:fixed; z-index:40; left:0; top:0; width:360px; height:250px; pointer-events:none; transform:translate(-50%,-50%) scale(0); transition:transform .45s var(--ease); background:var(--bg-2); overflow:hidden }
.peek.is-on{ transform:translate(-50%,-50%) scale(1) }
.peek img{ width:100%; height:100%; object-fit:cover }
.peek.is-logo img{ object-fit:contain; padding:48px 60px; background:#fff }
.peek__dot{ position:fixed; z-index:41; left:0; top:0; width:84px; height:84px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:.85rem; pointer-events:none; transform:translate(-50%,-50%) scale(0); transition:transform .4s var(--ease) }
.peek__dot.is-on{ transform:translate(-50%,-50%) scale(1) }

/* Post cards (blog grid on small screens and related posts) */
.posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px) }
.post{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.post__img{ aspect-ratio:16/10; background:var(--bg-2); overflow:hidden; border-radius:4px; max-width:100% }
.post__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out) }
.post:hover .post__img img{ transform:scale(1.04) }
.post h3{ font-size:clamp(1.15rem,1.6vw,1.4rem); letter-spacing:-.015em }
.post .label{ display:flex; gap:12px }

/* Article */
.article{ max-width:760px; margin:0 auto }
.article__meta{ display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--mute); font-size:.95rem; margin-top:26px }
.article__hero{ max-width:1200px; margin:clamp(40px,6vw,80px) auto 0; aspect-ratio:16/8; overflow:hidden; background:var(--bg-2); border-radius:4px }
.article__hero img{ width:100%; height:100%; object-fit:cover }
.prose{ font-size:1.12rem; line-height:1.75; margin-top:clamp(40px,5vw,70px) }
.prose > * + *{ margin-top:1.15em }
.prose h2{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin-top:1.8em; letter-spacing:-.025em }
.prose h3{ font-size:clamp(1.25rem,1.9vw,1.55rem); margin-top:1.6em }
.prose p,.prose li{ color:var(--fg) }
.prose a{ color:var(--accent); border-bottom:1px solid currentColor }
.prose img{ border-radius:4px; height:auto }
.prose ul,.prose ol{ padding-left:1.3em }
.prose blockquote{ margin:1.6em 0; padding-left:1.2em; border-left:2px solid var(--accent); color:var(--mute); font-size:1.2rem }
.prose table{ width:100%; border-collapse:collapse; display:block; overflow-x:auto }
.prose td,.prose th{ border-bottom:1px solid var(--line); padding:10px 12px; text-align:left }
.prose pre{ overflow-x:auto; background:var(--bg-2); padding:16px; border-radius:6px; font-size:.9rem }
.cta-box{ margin-top:clamp(50px,6vw,80px); background:var(--night); color:var(--on-night); border-radius:22px; padding:clamp(28px,4vw,48px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center }
.cta-box h2{ font-size:clamp(1.5rem,2.6vw,2.2rem) }
.cta-box p{ color:var(--on-night-mute); margin-top:8px }
.cta-box .pill{ border-color:var(--night-line) }
.comments{ margin-top:clamp(60px,7vw,100px) }
.comment{ padding:22px 0; border-bottom:1px solid var(--line) }
.comment b{ font-weight:500 }
.comment time{ color:var(--mute); font-size:.85rem; margin-left:10px }
.comment p{ margin-top:8px; color:var(--mute) }

/* Numbered form (contact page, comments) */
.cform{ border-top:1px solid var(--line) }
.field{ display:grid; grid-template-columns:4ch minmax(0,1fr); gap:6px 22px; padding:28px 0 24px; border-bottom:1px solid var(--line) }
.field .n{ color:var(--mute); font-size:.85rem; padding-top:.35em }
.field label{ font-size:clamp(1.15rem,1.8vw,1.55rem); letter-spacing:-.01em }
.field label small{ color:var(--mute); font-size:.9rem; letter-spacing:0; margin-left:8px }
.field input,.field textarea,.field select{ grid-column:2; width:100%; background:none; border:0; color:var(--fg); font:inherit; font-size:16px; padding:10px 0 0; resize:vertical }
.field input::placeholder,.field textarea::placeholder{ color:var(--mute); opacity:.7 }
.field input:focus,.field textarea:focus{ outline:none }
.field:focus-within{ border-bottom-color:var(--accent) }
.count{ grid-column:2; justify-self:end; font-size:.78rem; color:var(--mute) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.cform__send{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:32px }
.cform__send .round{ --d:140px }
.status{ font-size:.95rem; min-height:1.5em; color:var(--mute) }
.status.ok{ color:var(--accent) } .status.err{ color:#d4513c }
body.is-night .status.ok{ color:#6fe0b0 } body.is-night .status.err{ color:#ff9a8a }
.details{ display:grid; align-content:start; gap:34px; font-size:.98rem }
.details .label{ margin-bottom:12px }
.details a{ display:block; width:max-content; max-width:100%; line-height:1.9 }
.details a:hover{ color:var(--accent) }
.details a.round{ display:grid; width:var(--d); line-height:1.25 }
.details a.round:hover{ color:#fff }
.phead__row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:30px; align-items:end }
.split--form{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) }

/* Books */
.books{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,3vw,44px) clamp(18px,2.4vw,34px) }
.book{ display:flex; flex-direction:column; gap:14px; min-width:0 }
.book__cover{ position:relative; aspect-ratio:2/3; background:var(--bg-2); border-radius:3px 8px 8px 3px; overflow:hidden; box-shadow:0 1px 0 var(--line), 0 18px 40px -22px #0007; transition:transform .6s var(--ease-out) }
.book:hover .book__cover{ transform:translateY(-8px) rotate(-1deg) }
.book__cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.book__fallback{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:20px; background:var(--night-2); color:var(--on-night); font-size:1.15rem; line-height:1.2; letter-spacing:-.01em }
.book__fallback small{ font-size:.75rem; color:var(--on-night-mute); letter-spacing:.06em; text-transform:uppercase }
.book h2{ font-size:1.15rem; letter-spacing:-.01em; line-height:1.25 }
.book p{ color:var(--mute); font-size:.92rem }
.book__links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto }

/* Companies page */
.co{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:clamp(24px,5vw,90px); padding-block:clamp(36px,5vw,64px); border-bottom:1px solid var(--line) }
.co__head{ display:grid; align-content:start; gap:12px }
.co__logo{ width:72px; height:72px; border-radius:16px; background:#fff; display:grid; place-items:center; padding:10px; box-shadow:0 0 0 1px var(--line) }
.co__logo img{ max-height:100%; object-fit:contain }
.co__head h2{ font-size:clamp(1.8rem,3.2vw,2.8rem); letter-spacing:-.03em }
.co__role{ color:var(--mute); font-size:.95rem }
.co__links{ display:flex; flex-wrap:wrap; gap:6px 18px; color:var(--accent); font-size:.95rem }
.co__links a:hover{ text-decoration:underline }
.co__lead{ font-size:clamp(1.05rem,1.4vw,1.22rem); line-height:1.45; max-width:54ch; margin-bottom:26px }

/* Footer */
.foot{ margin-top:clamp(90px,11vw,170px); background:var(--night); color:var(--on-night); padding-block:clamp(80px,10vw,140px) calc(28px + env(safe-area-inset-bottom,0px)); position:relative; overflow-x:clip }
.foot::before{ content:""; position:absolute; left:-10%; right:-10%; top:-1px; height:clamp(50px,7vw,110px); background:var(--bg); border-radius:0 0 50% 50% }
body.is-night .foot{ margin-top:0; padding-top:clamp(40px,5vw,70px) }
body.is-night .foot::before{ display:none }
.foot__title{ display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); font-size:clamp(2.6rem,7vw,6.8rem); line-height:1.02; letter-spacing:-.04em; font-weight:500 }
.foot__title img{ width:clamp(64px,7vw,108px); height:clamp(64px,7vw,108px); border-radius:50%; object-fit:cover }
.foot__line{ position:relative; border-bottom:1px solid var(--night-line); margin:clamp(56px,7vw,96px) 0 clamp(44px,5vw,60px) }
.foot__line .round{ position:absolute; right:clamp(0px,8vw,140px); top:50%; transform:translateY(-50%); --d:clamp(130px,12vw,180px) }
.foot__pills{ display:flex; flex-wrap:wrap; gap:14px }
.foot__pills .pill{ font-size:1.02rem; padding:1.2em 1.9em; border-color:var(--night-line) }
.foot__note{ color:var(--on-night-mute); margin-top:18px; font-size:.95rem }
.bottombar{ display:flex; justify-content:space-between; align-items:end; gap:28px 40px; flex-wrap:wrap; margin-top:clamp(80px,9vw,130px); font-size:.92rem }
.bottombar .label{ display:block; color:var(--on-night-mute); font-size:.7rem; margin-bottom:10px }
.bottombar .grp,.bottombar .socials{ display:flex; gap:clamp(22px,4vw,56px); flex-wrap:wrap }
.bottombar .socials{ gap:22px }
.bottombar a:hover{ color:#6fe0b0 }
.theme-btn{ background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:0 }

/* Reveal */
.rv{ opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out) }
.rv.in{ opacity:1; transform:none }
.no-js .rv{ opacity:1; transform:none }

/* Responsive */
@media (max-width:1080px){
  .cards,.books{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .posts{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:860px){
  .topnav ul{ display:none }
  .menu-btn{ transform:scale(1) }
  .split,.split--form,.co,.cta-box{ grid-template-columns:minmax(0,1fr) }
  .sticky{ position:static }
  .phead__line .round,.foot__line .round{ right:0; --d:112px }
  .rows__head{ display:none }
  .rows a,.rows .row{ grid-template-columns:minmax(0,1fr) auto; row-gap:8px }
  .rows .meta{ grid-column:1; grid-row:2 }
  .rows .yr{ grid-row:1 / span 2; grid-column:2 }
  .certs li{ grid-template-columns:8ch minmax(0,1fr) }
  .certs .by{ grid-column:2 }
  .certs a{ grid-column:2 }
  .foot__title{ font-size:clamp(2.4rem,11vw,4rem) }
}
@media (max-width:560px){
  body{ font-size:16px }
  .cards,.posts{ grid-template-columns:minmax(0,1fr) }
  .xp li{ grid-template-columns:minmax(0,1fr) }
  .xp p.desc{ grid-column:1 }
  .field{ grid-template-columns:3ch minmax(0,1fr); gap:6px 12px }
  .drawer{ padding-left:32px }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms!important; animation-duration:.01ms!important }
  .rv{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}