/* ===========================================================================
   Boopathi Mahendran · home.v3.css — the home page only, on top of ds.v3.css
   Editorial noir: a full-height hero with the particle portrait, a numbered
   work list instead of a card grid, hairline rules everywhere, and one accent
   hue per section (--accent) that re-tints the page's spotlight as you scroll.

   VERSIONED FILENAME: publish home.v4.css rather than editing after launch.
   =========================================================================== */

/* ---------------------------------------------------------------- hero */
.hero-home{display:grid;gap:var(--s7);align-items:center;padding:var(--s8) 0 var(--s7);min-height:min(88vh,860px)}
@media(min-width:960px){
  .hero-home{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s8);padding:var(--s9) 0 var(--s8)}
}
.hero-text>*{max-width:none}
.avail{margin-bottom:var(--s5);font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.08em}
/* the ds default keeps a .status inside a <p> on one line; this one is long */
.avail .status{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  white-space:normal;align-items:baseline}
.hero-home h1{font-size:clamp(2.75rem,1.2rem + 7vw,7rem);line-height:.92;letter-spacing:-.055em;font-weight:600;
  margin:0 0 var(--s4)}
.rotator{font-size:clamp(1.35rem,1rem + 1.6vw,2.25rem);line-height:1.25;letter-spacing:-.03em;color:var(--ink);
  margin-bottom:var(--s4)}
/* the rotating words are the page's editorial flourish: serif, italic, accent */
.rot{display:inline-grid;vertical-align:bottom;overflow:hidden;height:1.25em}
.rot>span{grid-area:1/1;font-family:var(--fe);font-style:italic;font-weight:400;color:var(--accent-ink);
  white-space:nowrap;opacity:0}
.rot>span:first-child{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .rot>span{animation:rot 9s var(--ease) infinite}
  .rot>span:nth-child(1){animation-delay:0s}
  .rot>span:nth-child(2){animation-delay:3s}
  .rot>span:nth-child(3){animation-delay:6s}
  .rot>span:nth-child(4){animation-delay:9s}
}
@keyframes rot{
  0%{opacity:0;transform:translateY(.7em)}
  4%,30%{opacity:1;transform:none}
  36%,100%{opacity:0;transform:translateY(-.7em)}
}
html.lite .rot>span{animation:none;opacity:0}
html.lite .rot>span:first-child{opacity:1}
.roles{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.06em;color:var(--ink-3);margin-bottom:var(--s5);
  max-width:56ch}
.hsub{font-size:var(--t-lead);color:var(--ink-2);max-width:56ch;margin-bottom:var(--s6)}
.hero-home .actions{margin-top:0}
.hero-social{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--line)}
.hero-social a{position:relative;font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none}
.hero-social a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--accent-ink);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.hero-social a:hover{color:var(--ink)}
.hero-social a:hover::after{transform:scaleX(1)}

/* ------------------------------------------------- the particle portrait */
/* overflow:clip keeps the rotating ring's bounding box off the page scroller;
   the bloom is a box-shadow, which never adds to scroll width */
.portrait{position:relative;margin:0 auto;width:min(100%,460px);aspect-ratio:1;isolation:isolate;
  border-radius:50%;overflow:clip;
  box-shadow:0 0 110px -26px color-mix(in srgb,var(--accent) 65%,transparent)}
.portrait::before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 30%,transparent),transparent 76%);
  filter:blur(12px)}
.portrait img,.portrait canvas.pfx{position:absolute;inset:0;width:100%;height:100%}
.portrait img{object-fit:cover;border-radius:50%;opacity:1;transition:opacity .9s var(--ease)}
.portrait canvas.pfx{opacity:0;transition:opacity .9s var(--ease);touch-action:manipulation}
.portrait.pfx-on img{opacity:0}
.portrait.pfx-on canvas.pfx{opacity:1}
/* a thin ring that slowly turns behind everything */
.portrait::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;
  border:1px solid var(--line-2);
  -webkit-mask-image:conic-gradient(#000 0 25%,transparent 0 50%,#000 0 75%,transparent 0);
  mask-image:conic-gradient(#000 0 25%,transparent 0 50%,#000 0 75%,transparent 0)}
@media (prefers-reduced-motion:no-preference){
  .portrait::after{animation:ring 26s linear infinite}
}
@keyframes ring{to{transform:rotate(360deg)}}
html.lite .portrait::after{animation:none}
@media(max-width:959px){
  .portrait{order:-1;width:min(74vw,340px)}
}

/* ------------------------------------------------------- tech ticker */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s4) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:var(--s7);width:max-content;font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.track span{flex:none;display:inline-flex;align-items:center;gap:var(--s7)}
.track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.7}
@media (prefers-reduced-motion:no-preference){
  .track{animation:marquee 46s linear infinite}
  .marquee:hover .track{animation-play-state:paused}
}
@keyframes marquee{to{transform:translateX(-50%)}}
html.lite .track{animation:none}

/* ------------------------------------------------------------ sections */
/* each section carries its own accent, so the page changes temperature */
.sec{padding:var(--s9) 0 0;scroll-margin-top:80px}
#about{--accent:#5b4ae0;--accent-ink:#4a39cc}
#projects{--accent:#0a6675;--accent-ink:#0a6675}
#skills{--accent:#4c6b10;--accent-ink:#4c6b10}
#resume{--accent:#8a4e00;--accent-ink:#8a4e00}
#services{--accent:#0b6656;--accent-ink:#0b6656}
#faq{--accent:#5b4ae0;--accent-ink:#4a39cc}
#contact{--accent:#5b4ae0;--accent-ink:#4a39cc}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) #about{--accent:#8b7cff;--accent-ink:#a89bff}
  :root:not([data-theme="light"]) #projects{--accent:#3fd0e0;--accent-ink:#5fdcea}
  :root:not([data-theme="light"]) #skills{--accent:#c6f432;--accent-ink:#c6f432}
  :root:not([data-theme="light"]) #resume{--accent:#ffb03a;--accent-ink:#ffc266}
  :root:not([data-theme="light"]) #services{--accent:#34d9b5;--accent-ink:#5ce3c6}
  :root:not([data-theme="light"]) #faq{--accent:#8b7cff;--accent-ink:#a89bff}
  :root:not([data-theme="light"]) #contact{--accent:#8b7cff;--accent-ink:#a89bff}
}
:root[data-theme="dark"] #about{--accent:#8b7cff;--accent-ink:#a89bff}
:root[data-theme="dark"] #projects{--accent:#3fd0e0;--accent-ink:#5fdcea}
:root[data-theme="dark"] #skills{--accent:#c6f432;--accent-ink:#c6f432}
:root[data-theme="dark"] #resume{--accent:#ffb03a;--accent-ink:#ffc266}
:root[data-theme="dark"] #services{--accent:#34d9b5;--accent-ink:#5ce3c6}
:root[data-theme="dark"] #faq{--accent:#8b7cff;--accent-ink:#a89bff}
:root[data-theme="dark"] #contact{--accent:#8b7cff;--accent-ink:#a89bff}

.shead{position:relative;padding-top:var(--s5);margin-bottom:var(--s7)}
.shead::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--accent);
  transform-origin:left}
.shead h2{margin:0}
.shead .lede{margin-top:var(--s4);font-size:var(--t-lead);color:var(--ink-2);max-width:60ch}
.subhead{font-family:var(--fm);font-size:var(--t-xs);font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border-top:1px solid var(--line);padding-top:var(--s4);margin:var(--s8) 0 var(--s5)}
.cols{display:grid;gap:var(--s7)}
@media(min-width:860px){
  .cols{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .cols.cols-even{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------------------------------------------------------------- about */
.bento{display:grid;gap:var(--s7)}
@media(min-width:960px){.bento{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:var(--s8)}}
.t-about .a-lead{font-size:clamp(1.3rem,1.05rem + 1.1vw,1.9rem);line-height:1.35;letter-spacing:-.025em;
  color:var(--ink);margin-bottom:var(--s5);max-width:32ch}
.t-about p{color:var(--ink-2);max-width:58ch}
.t-side{display:grid;gap:var(--s6);align-content:start}
.t-facts table.spec{margin:0}
.t-path{border-top:1px solid var(--line);padding-top:var(--s5)}
.timeline{list-style:none;margin:0;counter-reset:tl;max-width:none}
.timeline li{counter-increment:tl;position:relative;padding:0 0 var(--s5) var(--s6);margin:0;
  border-left:1px solid var(--line)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-4px;top:8px;width:7px;height:7px;border-radius:50%;
  background:var(--accent)}
.timeline h3{margin:0 0 var(--s2);font-size:var(--t-md)}
.timeline .when{font-family:var(--fm);font-size:var(--t-xs);font-weight:400;letter-spacing:.06em;color:var(--ink-3)}
.timeline p{font-size:var(--t-sm);color:var(--ink-2);margin:0}
.numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:var(--s7);
  border-top:1px solid var(--line)}
@media(min-width:700px){.numbers{grid-template-columns:repeat(5,minmax(0,1fr))}}
.numbers .t-stat,.numbers .t-years{display:flex;flex-direction:column;gap:2px;padding:var(--s5) var(--s4) var(--s5) 0;
  border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:color .2s}
@media(min-width:700px){.numbers .t-stat,.numbers .t-years{border-bottom:0}}
.numbers b{font-family:var(--fd);font-size:clamp(2rem,1.4rem + 1.8vw,3rem);font-weight:600;letter-spacing:-.05em;
  line-height:1}
.numbers span{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.numbers a.t-stat:hover{color:var(--accent-ink)}
.numbers a.t-stat:hover span{color:var(--accent-ink)}
.numbers .t-years b{color:var(--accent-ink)}

/* ------------------------------------------------- work (numbered list) */
.filters{margin-bottom:var(--s6)}
.worklist{counter-reset:wk;display:grid;gap:0;border-top:1px solid var(--line)}
article.app{counter-increment:wk;position:relative;display:grid;gap:var(--s4) var(--s6);align-items:start;
  padding:var(--s7) 0;border-bottom:1px solid var(--line);scroll-margin-top:96px}
article.app::before{content:counter(wk,decimal-leading-zero);font-family:var(--fm);font-size:var(--t-xs);
  letter-spacing:.1em;color:var(--ink-3);transition:color .3s}
article.app:hover::before{color:var(--accent-ink)}
article.app:target{outline:1px solid var(--accent);outline-offset:12px;border-radius:2px}
@media(min-width:860px){
  article.app{grid-template-columns:56px minmax(0,1fr) minmax(0,340px);align-items:center}
  article.app .app-fig{grid-column:3;grid-row:1}
  article.app .app-body{grid-column:2;grid-row:1}
  article.app.featured{grid-template-columns:56px minmax(0,1fr);row-gap:var(--s6)}
  article.app.featured .app-fig{grid-column:2;grid-row:1}
  article.app.featured .app-body{grid-column:2;grid-row:2}
}
.app-fig{position:relative;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--bg-2);
  transition:transform .5s var(--ease),border-color .3s}
article.app:hover .app-fig{transform:translateY(-6px) scale(1.015);border-color:var(--line-2)}
.app-fig picture,.app-fig img{display:block;width:100%}
.app-fig img{aspect-ratio:16/10;object-fit:cover}
article.app.featured .app-fig img{aspect-ratio:21/9}
.app-fig svg.bd{width:100%;height:auto;aspect-ratio:16/10;background:var(--bg-2)}
svg.bd rect{fill:none;stroke:var(--line-2);stroke-width:1}
svg.bd rect.core{stroke:var(--accent);fill:color-mix(in srgb,var(--accent) 10%,transparent)}
svg.bd text{font-family:var(--fs);font-size:13px;fill:var(--ink-2)}
svg.bd text.bd-t{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-3)}
svg.bd text.bd-s{font-size:11px;fill:var(--ink-3)}
svg.bd path.arr{fill:none;stroke:var(--line-2);stroke-width:1}
svg.bd path.ah{fill:var(--accent-ink);stroke:none}
.app-body>*{max-width:none}
.pcat{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);
  margin-bottom:var(--s3)}
article.app h3{margin:0 0 var(--s3);font-size:clamp(1.4rem,1.1rem + 1.1vw,2.1rem);letter-spacing:-.035em;
  transition:transform .35s var(--ease)}
@media(hover:hover) and (pointer:fine){
  article.app:hover h3{transform:translateX(6px)}
}
article.app.featured h3{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.7rem)}
article.app .app-body p{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:var(--s4);max-width:62ch}
article.app.featured .app-body p{font-size:var(--t-md)}
.app-acts{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s4)}
.app-acts .more{margin-top:0;padding-top:0}
.app-fig .flag{z-index:2}

/* --------------------------------------------------------------- skills */
.areas{display:grid;gap:var(--s6) var(--s7);border-top:1px solid var(--line);padding-top:var(--s6)}
@media(min-width:640px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.areas{grid-template-columns:repeat(4,minmax(0,1fr))}}
.area>*{max-width:none}
.area .ico{display:block;font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.12em;color:var(--accent-ink);
  margin-bottom:var(--s3)}
.area h3{margin:0 0 var(--s2);font-size:var(--t-md)}
.area p{font-size:var(--t-sm);color:var(--ink-2);margin:0}
.skill-groups{columns:4 230px;column-gap:var(--s7)}
.sg{break-inside:avoid;margin-bottom:var(--s6)}
.sg h4{font-family:var(--fm);font-size:var(--t-xs);font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);border-bottom:1px solid var(--line);padding-bottom:var(--s2);margin:0 0 var(--s3)}
.sg ul{list-style:none;margin:0}
.sg li{display:flex;flex-direction:column;gap:1px;margin:0 0 var(--s3)}
.sk-name{font-size:var(--t-sm);color:var(--ink)}
.sk-used{font-size:var(--t-xs);color:var(--ink-3)}
.sk-used a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line-2)}
.sk-used a:hover{color:var(--accent-ink);border-bottom-color:currentColor}
.sg li.learning .sk-name{color:var(--ink-2)}
.sg .status{font-size:var(--t-xs)}

/* ------------------------------------------------------------ experience */
.panel{border-top:1px solid var(--line);padding-top:var(--s5)}
.panel>*{max-width:none}
.panel h3{margin:0 0 var(--s2)}
.rrole{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.06em;color:var(--ink-3);margin-bottom:var(--s5)}
.speclist{list-style:none;margin:0}
.speclist li{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:var(--s4);font-size:var(--t-sm);
  color:var(--ink-2);border-bottom:1px solid var(--line);padding:var(--s3) 0;margin:0}
.speclist li span:first-child{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.dl-box .file{font-family:var(--fm);font-size:var(--t-xs);color:var(--ink-3);margin-bottom:var(--s5)}
.dl-box .btn{margin-bottom:var(--s5)}
.srow{display:flex;gap:var(--s5);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s4)}
.srow .soc{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  text-decoration:none}
.srow .soc:hover{color:var(--accent-ink)}
.rcards{display:grid;gap:var(--s6) var(--s7);margin-top:var(--s7)}
@media(min-width:760px){.rcards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rcard{border-top:1px solid var(--line);padding-top:var(--s4)}
.rcard h3{margin:0 0 var(--s3);font-size:var(--t-md)}
.rcard ul{list-style:none;margin:0}
.rcard li{font-size:var(--t-sm);color:var(--ink-2);padding-left:var(--s4);position:relative;margin-bottom:var(--s3)}
.rcard li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:1px;background:var(--accent)}

/* -------------------------------------------------------------- writing */
.doc-card{border-top:1px solid var(--line-2);padding-top:var(--s5)}
.doc-card>*{max-width:none}
.doc-card h3{margin:0 0 var(--s3);font-size:var(--t-h3)}
.doc-card p{font-size:var(--t-sm);color:var(--ink-2)}
.doc-card .tags{margin-bottom:var(--s5)}
.postlist{list-style:none;margin:var(--s7) 0 0;border-top:1px solid var(--line)}
.postlist li{margin:0}
.postlist a{display:grid;gap:var(--s2) var(--s5);align-items:baseline;padding:var(--s5) 0;
  border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:padding-left .3s var(--ease)}
@media(min-width:760px){.postlist a{grid-template-columns:minmax(0,10rem) minmax(0,1fr) auto}}
.postlist a:hover{padding-left:var(--s3)}
.pl-cat{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.pl-t{font-size:var(--t-lead);letter-spacing:-.02em}
.postlist a:hover .pl-t{color:var(--accent-ink)}
.pl-m{font-family:var(--fm);font-size:var(--t-xs);color:var(--ink-3)}

/* ------------------------------------------------------------------ faq */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:baseline;gap:var(--s4);cursor:pointer;list-style:none;
  padding:var(--s5) var(--s6) var(--s5) 0;font-size:var(--t-lead);letter-spacing:-.02em;color:var(--ink);position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--fm);font-size:1.3rem;color:var(--accent-ink);transition:transform .3s var(--ease)}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:hover{color:var(--accent-ink)}
.faq-a{padding:0 0 var(--s5)}
.faq-a p{font-size:var(--t-sm);color:var(--ink-2);margin:0;max-width:72ch}

/* -------------------------------------------------------------- contact */
.contact-panel{border-top:1px solid var(--accent);padding-top:var(--s6)}
.contact-panel .kicker{margin-bottom:var(--s4)}
.contact-panel h2{margin:0 0 var(--s4)}
.ctintro{color:var(--ink-2);max-width:48ch;margin-bottom:var(--s6)}
.cols.order{gap:var(--s8)}
.clinks{display:grid;margin-bottom:var(--s7);border-top:1px solid var(--line)}
.clink{display:grid;grid-template-columns:minmax(0,6.5rem) minmax(0,1fr) auto;gap:var(--s4);align-items:baseline;
  padding:var(--s4) 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);
  transition:padding-left .3s var(--ease)}
.clink:hover{padding-left:var(--s3)}
.cll{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.clv{font-size:var(--t-sm);color:var(--ink)}
.clink:hover .clv{color:var(--accent-ink)}
.clink .arr{color:var(--accent-ink);transition:transform .3s var(--ease)}
.clink:hover .arr{transform:translateX(4px)}
.cf{border-top:1px solid var(--line);padding-top:var(--s5)}
.cf h3{margin:0 0 var(--s5)}
.fg{margin-bottom:var(--s5)}
.fg label{display:block;font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s2)}
.fg label small{font-family:var(--fs);letter-spacing:0;text-transform:none}
.fg input,.fg textarea{width:100%;font-family:var(--fs);font-size:var(--t-sm);color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:var(--s3) 0;transition:border-color .2s}
.fg textarea{resize:vertical;min-height:7rem}
.fg input::placeholder,.fg textarea::placeholder{color:var(--ink-3)}
.fg input:focus,.fg textarea:focus{outline:none;border-bottom-color:var(--accent)}
.fg input:focus-visible,.fg textarea:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.cfs{font-size:var(--t-sm);margin:var(--s4) 0 0;min-height:1.5em}
.cfs.ok{color:var(--ok)}
.cfs.err{color:var(--err)}
.cf .note{margin-top:var(--s4)}

/* --------------------------------------------------------- home footer */
.fi{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:var(--s5);margin-bottom:var(--s5)}
.fcopy{font-size:var(--t-sm);color:var(--ink-2);margin:0;max-width:none}
.fsoc{display:flex;gap:var(--s5);flex-wrap:wrap}
.fsoc a{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  text-decoration:none}
.fsoc a:hover{color:var(--accent-ink)}

/* --------------------------------------------------------------- mobile */
@media(max-width:859px){
  .sec{padding-top:var(--s8)}
  article.app{padding:var(--s6) 0}
  .app-fig{margin-bottom:var(--s4)}
  .speclist li{grid-template-columns:minmax(0,1fr)}
  .speclist li span:first-child{margin-bottom:2px}
  .clink{grid-template-columns:minmax(0,5rem) minmax(0,1fr) auto}
}