/* ============================================================
   Aki Vivekanandan · Portfolio
   Single shared stylesheet. All tokens live here.
   Governance: type floor 11px, --dim holds >= 4.5:1 on --bg.
   ============================================================ */

@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-var.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-var.woff2') format('woff2');font-weight:100 900;font-stretch:62.5% 125%;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-var.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-italic-var.woff2') format('woff2');font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/plexmono-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --bg:#f7f2ec; --bg2:#efe6da; --panel:rgba(36,22,16,.045);
  --ink:#241610; --ink2:rgba(36,22,16,.82); --dim:#655346;
  --line:rgba(36,22,16,.16); --lineS:rgba(36,22,16,.08);
  --acc:#8a4f28; --acc2:#5c3a24; --onacc:#f7f2ec;
  --glass:rgba(255,253,250,.5); --glassLine:rgba(255,255,255,.62); --gSheen1:rgba(255,255,255,.62); --gSheen2:rgba(255,255,255,.14); --glassP:rgba(255,253,250,.55); --glassGlow:rgba(255,255,255,.55); --gTop:rgba(255,255,255,.92); --gBot:rgba(36,22,16,.11); --gSide:rgba(255,255,255,.52); --gCast:rgba(36,22,16,.26); --gSpec:rgba(255,255,255,.55);
  --shadow:0 18px 50px -18px rgba(36,22,16,.22);
  --ff:'Archivo',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gutter:48px; --max:1180px;
}
[data-mode="dark"]{
  --bg:#1b110a; --bg2:#241811; --panel:rgba(244,235,226,.05);
  --ink:#f4ebe2; --ink2:rgba(244,235,226,.84); --dim:#b3a294;
  --line:rgba(244,235,226,.18); --lineS:rgba(244,235,226,.09);
  --acc:#d79a63; --acc2:#e8bd93; --onacc:#1b110a;
  --glass:rgba(30,20,13,.55); --glassLine:rgba(244,235,226,.16); --gSheen1:rgba(255,255,255,.09); --gSheen2:rgba(255,255,255,.02); --glassP:rgba(36,24,17,.5); --glassGlow:rgba(255,255,255,.12); --gTop:rgba(255,255,255,.16); --gBot:rgba(0,0,0,.4); --gSide:rgba(255,255,255,.08); --gCast:rgba(0,0,0,.55); --gSpec:rgba(255,255,255,.10);
  --shadow:0 18px 50px -18px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ff);font-size:14.5px;line-height:1.72;transition:background .35s ease,color .35s ease;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--acc2)}
img{max-width:100%;display:block}
::selection{background:var(--acc);color:var(--onacc)}

/* ambient background: original three-layer glow */
.amb{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.amb i{position:absolute;border-radius:50%;pointer-events:none}
.amb i:nth-child(1){top:-20%;left:-14%;width:72vw;height:72vw;background:radial-gradient(circle,var(--acc) 0%,transparent 62%);opacity:.11;filter:blur(80px);animation:drift 38s ease-in-out infinite}
.amb i:nth-child(2){bottom:-28%;right:-18%;width:68vw;height:68vw;background:radial-gradient(circle,var(--acc2) 0%,transparent 64%);opacity:.1;filter:blur(90px);animation:drift 48s ease-in-out infinite reverse}
.amb i:nth-child(3){inset:0;border-radius:0;background:radial-gradient(52% 46% at 72% 84%,var(--acc2),transparent 70%);opacity:.22;filter:blur(30px);animation:drift 30s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(3%,-2%,0)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(1.15);opacity:.8}}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes riseSm{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes heroLine{to{clip-path:inset(-6% -2% -6% -2%);transform:none;opacity:1}}
@keyframes titleUp{from{clip-path:inset(-4% -2% 104% -2%);transform:translateY(34px);opacity:0}to{clip-path:inset(-4% -2% -6% -2%);transform:none;opacity:1}}
main{animation:pageIn .7s cubic-bezier(.2,.7,.2,1) both}
.pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--acc);animation:breathe 3.4s ease-in-out infinite;margin-right:12px;vertical-align:middle}
.hl{display:block;clip-path:inset(-6% -2% 106% -2%);transform:translateY(44%);opacity:0;animation:heroLine 1s cubic-bezier(.22,.8,.3,1) both}
.hl:nth-child(2){animation-delay:.08s}.hl:nth-child(3){animation-delay:.16s}.hl:nth-child(4){animation-delay:.24s}.hl:nth-child(5){animation-delay:.32s}
[data-rv="sm"]{transform:translateY(14px)}
.js .tierbars .tbar{transform-origin:bottom;transform:scaleY(0)}
.tierbars.rv-in .tbar{animation:growY .9s cubic-bezier(.2,.7,.2,1) both}
.tierbars.rv-in .tbar:nth-child(2){animation-delay:.07s}.tierbars.rv-in .tbar:nth-child(3){animation-delay:.14s}.tierbars.rv-in .tbar:nth-child(4){animation-delay:.21s}.tierbars.rv-in .tbar:nth-child(5){animation-delay:.28s}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
main{display:block}
.sec{padding:78px 0}
.sec-tight{padding:52px 0}
.band{background:var(--bg2)}
.band-acc{background:var(--acc);color:var(--onacc)}
.band-acc .label{color:var(--onacc);opacity:.75}

/* ---------- nav ---------- */
header.site{position:sticky;top:0;z-index:60;background:var(--glass);background-image:linear-gradient(158deg,var(--gSheen1),var(--gSheen2) 52%,transparent 82%);backdrop-filter:blur(28px) saturate(1.9) brightness(1.07);-webkit-backdrop-filter:blur(28px) saturate(1.9) brightness(1.07);border-bottom:1px solid var(--glassLine)}
header.site .bar{max-width:var(--max);margin:0 auto;padding:16px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center}
.lockup{display:block;width:128px;height:42px;background:var(--ink);-webkit-mask:url('../img/av-lockup.png') no-repeat left center/contain;mask:url('../img/av-lockup.png') no-repeat left center/contain}
.brand:hover .lockup{background:var(--acc)}
.avmark{display:block;width:58px;height:62px;background:var(--acc);-webkit-mask:url('../img/av-mark.png') no-repeat left center/contain;mask:url('../img/av-mark.png') no-repeat left center/contain;animation:riseSm .7s ease both}
nav.main{display:flex;align-items:center;gap:26px}
nav.main a{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom:2px solid var(--acc);padding-bottom:3px}
.mode{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;background:var(--acc);color:var(--onacc);border:0;border-radius:999px;padding:9px 15px;cursor:pointer;white-space:nowrap}
.mode:hover{opacity:.88}

/* ---------- type ---------- */
.label{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--acc);margin:0}
.display{font-family:'Bricolage Grotesque',var(--ff);font-weight:800;font-stretch:100%;letter-spacing:-.015em;text-transform:uppercase;line-height:.98;margin:0}
h1.display{font-size:clamp(42px,7vw,92px)}
h2.display{font-size:clamp(30px,4.4vw,54px)}
.statement{font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.6vw,31px);line-height:1.32;letter-spacing:-.01em;margin:0;color:var(--ink)}
.statement .acc{color:var(--acc)}
h3.sub{font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.18;letter-spacing:-.01em;margin:0}
p.lead{font-size:16px;line-height:1.75;color:var(--ink2);margin:0}
p.body,li.body{font-size:14.5px;line-height:1.75;color:var(--ink2);margin:0}
.small{font-size:12.5px;line-height:1.7;color:var(--dim)}
.num{font-family:var(--serif);font-weight:600;letter-spacing:-.02em}
.shape{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.6;color:var(--ink2);margin:0}
.shape b{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);display:block;margin-bottom:8px}

/* ---------- shared components ---------- */
.crumb{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--glassLine);background:radial-gradient(circle 300px at var(--mx,28%) var(--my,0%),var(--gSpec),transparent 66%),linear-gradient(158deg,var(--gSheen1),var(--gSheen2) 52%,transparent 82%),var(--glassP);backdrop-filter:blur(30px) saturate(1.9) brightness(1.07);-webkit-backdrop-filter:blur(30px) saturate(1.9) brightness(1.07);border-radius:20px;overflow:hidden;box-shadow:inset 0 1px 0 var(--gTop),inset 0 -1px 0 var(--gBot),inset 1px 0 0 var(--gSide),inset -1px 0 0 var(--gSide),0 34px 62px -34px var(--gCast)}
.meta.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.meta > div{padding:22px;border-right:1px solid var(--lineS)}
.meta > div:last-child{border-right:0}
.meta p{margin:0}
.meta .label{margin-bottom:11px}
.meta .v{font-size:13px;line-height:1.7;color:var(--ink2)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:18px;padding:10px 30px;background:radial-gradient(circle 300px at var(--mx,28%) var(--my,0%),var(--gSpec),transparent 66%),linear-gradient(158deg,var(--gSheen1),var(--gSheen2) 52%,transparent 82%),var(--glassP);backdrop-filter:blur(28px) saturate(1.9) brightness(1.07);-webkit-backdrop-filter:blur(28px) saturate(1.9) brightness(1.07);border:1px solid var(--glassLine);box-shadow:inset 0 1px 0 var(--gTop),inset 0 -1px 0 var(--gBot),inset 1px 0 0 var(--gSide),inset -1px 0 0 var(--gSide),0 30px 56px -34px var(--gCast)}
.stats.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stat{padding:30px 26px 28px;border-right:1px solid var(--lineS)}
.stat:last-child{border-right:0}
.stat .num{font-family:'Bricolage Grotesque',var(--ff);font-weight:700;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-.045em;display:block;color:var(--ink)}
.stat .num em{font-style:normal;color:var(--acc)}
.stat .small{margin-top:8px;display:block}

.cardgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.card{background:radial-gradient(circle 300px at var(--mx,28%) var(--my,0%),var(--gSpec),transparent 66%),linear-gradient(158deg,var(--gSheen1),var(--gSheen2) 52%,transparent 82%),var(--glassP);backdrop-filter:blur(28px) saturate(1.9) brightness(1.07);-webkit-backdrop-filter:blur(28px) saturate(1.9) brightness(1.07);border:1px solid var(--glassLine);border-radius:20px;padding:26px;box-shadow:inset 0 1px 0 var(--gTop),inset 0 -1px 0 var(--gBot),inset 1px 0 0 var(--gSide),inset -1px 0 0 var(--gSide),0 30px 56px -34px var(--gCast)}
.card h4{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.2;margin:12px 0 0}
.card p.body{margin-top:12px}
.card .label{margin:0}

.rows{border-top:1px solid var(--line)}
.arow{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;padding:38px 48px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background 400ms ease}
.arow:hover{background:var(--panel)}
.arow h3{display:inline-block;font-family:'Bricolage Grotesque',var(--ff);font-weight:600;font-size:clamp(24px,2.6vw,36px);line-height:1.05;letter-spacing:-.03em;margin:0;color:var(--ink);transition:transform 480ms cubic-bezier(.19,1,.22,1)}
.arow:hover h3{transform:translateX(6px)}
.arow .rrole{margin:0;display:flex;align-items:center;justify-content:flex-end;gap:14px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.arow [data-arrow]{opacity:0;transform:translateX(-8px);transition:opacity 380ms ease,transform 480ms cubic-bezier(.19,1,.22,1)}
.arow:hover [data-arrow]{opacity:1;transform:none}
.ulink{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);border-bottom:1px solid var(--acc);padding-bottom:5px}
.ulink:hover{color:var(--acc2)}
.ctaline{display:inline-flex;align-items:center;gap:22px;font-family:'Bricolage Grotesque',var(--ff);font-weight:700;font-size:clamp(38px,5.4vw,78px);line-height:.98;letter-spacing:-.045em;text-transform:uppercase;color:var(--onacc);padding-bottom:.06em;transition:opacity 300ms ease}
.ctaline:hover{opacity:.8;color:var(--onacc)}
.cta-mark{display:block;width:40px;height:43px;flex:none;background:var(--onacc);-webkit-mask:url('../img/av-mark.png') no-repeat center/contain;mask:url('../img/av-mark.png') no-repeat center/contain}
.ffield{display:block;width:100%;box-sizing:border-box;font-family:var(--ff);font-size:14.5px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-top:8px}
.ffield:focus{outline:none;border-color:var(--acc)}
textarea.ffield{min-height:130px;resize:vertical}
.flabel{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:34px;padding:34px 0;border-bottom:1px solid var(--line)}
.row .role{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);text-align:right}
.row h3 a{color:var(--ink)}
.row h3 a:hover{color:var(--acc)}

.bars{display:grid;gap:12px}
.brow{display:grid;grid-template-columns:minmax(0,1fr) 260px 54px;gap:16px;align-items:center}
.brow .bl{font-size:13px;color:var(--ink2)}
.brow .bl .small{display:block}
.track{display:block;height:10px;background:var(--lineS);border-radius:99px;overflow:hidden}
.fill{display:block;height:100%;background:var(--acc);border-radius:99px;transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.js .fill{transform:scaleX(0)}
.js .rv-in .fill{transform:scaleX(1)}
.bval{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);text-align:right}
.brow.hl .fill{background:linear-gradient(90deg,var(--acc),var(--acc2))}

table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
table.data td{padding:13px 14px;border-bottom:1px solid var(--lineS);color:var(--ink2)}
table.data td.n{font-family:var(--mono);font-size:12.5px;color:var(--ink);text-align:right}
table.data th.n{text-align:right}
table.data tr.tot td{border-top:1px solid var(--line);font-weight:600;color:var(--ink)}

.honest{border-left:3px solid var(--acc);background:radial-gradient(circle 300px at var(--mx,28%) var(--my,0%),var(--gSpec),transparent 66%),linear-gradient(158deg,var(--gSheen1),var(--gSheen2) 52%,transparent 82%),var(--glassP);backdrop-filter:blur(21px) saturate(1.9) brightness(1.07);-webkit-backdrop-filter:blur(21px) saturate(1.9) brightness(1.07);border-radius:0 20px 20px 0;padding:22px 26px;box-shadow:inset 0 1px 0 var(--gTop),inset 0 -1px 0 var(--gBot),inset 1px 0 0 var(--gSide),inset -1px 0 0 var(--gSide),0 30px 56px -34px var(--gCast)}
.honest .label{margin-bottom:10px}
.honest p{margin:0}

.btn{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--acc);color:var(--acc);border-radius:999px;padding:10px 22px}
.btn:hover{background:var(--acc);color:var(--onacc)}
.btn.solid{background:var(--acc);color:var(--onacc)}
.btn.solid:hover{background:var(--acc2);border-color:var(--acc2)}

.note{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);line-height:2}

/* ---------- document viewer ---------- */
.viewer{border:1px solid var(--glassLine);border-radius:20px;overflow:hidden;background:radial-gradient(circle 300px at var(--mx,28%) var(--my,0%),var(--gSpec),transparent 66%),linear-gradient(158deg,var(--gSheen1),var(--gSheen2) 52%,transparent 82%),var(--glassP);backdrop-filter:blur(21px) saturate(1.9) brightness(1.07);-webkit-backdrop-filter:blur(21px) saturate(1.9) brightness(1.07);box-shadow:inset 0 1px 0 var(--gTop),inset 0 -1px 0 var(--gBot),inset 1px 0 0 var(--gSide),inset -1px 0 0 var(--gSide),0 34px 62px -34px var(--gCast)}
.viewer .vhead{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--lineS);background:var(--bg2)}
.viewer .dots{display:flex;gap:5px}
.viewer .dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.viewer .dots i:first-child{background:var(--acc)}
.viewer .vtitle{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer .vpage{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--dim)}
.viewer .vopen{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.viewer .vbody{height:560px;overflow-y:auto;scrollbar-width:thin;background:var(--bg2);padding:18px}
.viewer .vbody img{margin:0 auto 18px;box-shadow:0 8px 30px -12px rgba(0,0,0,.35);border-radius:4px;background:#fff}
.viewer .vbody img:last-child{margin-bottom:0}
.viewer.short .vbody{height:420px}
.vfine{margin-top:10px}

/* embedded prototype frame */
.frame{border:1px solid var(--glassLine);backdrop-filter:blur(21px) saturate(1.9) brightness(1.07);-webkit-backdrop-filter:blur(21px) saturate(1.9) brightness(1.07);border-radius:20px;overflow:hidden;box-shadow:inset 0 1px 0 var(--gTop),inset 0 -1px 0 var(--gBot),inset 1px 0 0 var(--gSide),inset -1px 0 0 var(--gSide),0 40px 70px -38px var(--gCast);background:radial-gradient(circle 300px at var(--mx,28%) var(--my,0%),var(--gSpec),transparent 66%),linear-gradient(158deg,var(--gSheen1),var(--gSheen2) 52%,transparent 82%),var(--glassP)}
.frame iframe{display:block;width:100%;height:640px;border:0;background:#fff}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.chip{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--dim)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);margin-top:40px}
footer.site .fbar{max-width:var(--max);margin:0 auto;padding:26px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:18px}
footer.site .fnote{max-width:var(--max);margin:0 auto;padding:22px var(--gutter) 0}

/* ---------- reveal ---------- */
.js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1),clip-path .85s cubic-bezier(.2,.7,.2,1)}
.js h1.display.rv-in,.js h2.display.rv-in{animation:titleUp .95s cubic-bezier(.22,.8,.3,1) both}
.js .rv-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js [data-rv]{opacity:1;transform:none}
  .js h1.display.rv-in,.js h2.display.rv-in{animation:none;clip-path:none}
  .js .fill{transform:scaleX(1)}
  .hl{animation:none;clip-path:none;opacity:1;transform:none}
  .tierbars .tbar{transform:none;animation:none}
  .pulse{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:960px){
  :root{--gutter:26px}
  .meta,.meta.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meta > div{border-bottom:1px solid var(--lineS)}
  .stats,.stats.cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cardgrid{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:minmax(0,1fr);gap:12px}
  .arow{grid-template-columns:minmax(0,1fr);gap:14px;padding:30px 0}
  .arow .rrole{justify-content:flex-start}
  .row .role{text-align:left}
  .frame iframe{height:520px}
}
@media (max-width:600px){
  :root{--gutter:18px}
  body{font-size:14px}
  header.site .bar{flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
  nav.main{gap:16px;width:100%;order:3;justify-content:space-between}
  .meta,.meta.cols-3,.stats,.stats.cols-5{grid-template-columns:minmax(0,1fr)}
  .brow{grid-template-columns:minmax(0,1fr) 70px;gap:10px}
  .brow .track{display:none}
  .viewer .vbody{height:440px;padding:12px}
  .sec{padding:56px 0}
  table.data th,table.data td{padding:10px 8px}
  .hidem{display:none}
}