/* Layout: a living-room TV — big screen left, channel remote right, programme guide underneath.
   Single committed dark look (a lit screen in a dim room), large type for viewers 14–80. */
:root{
  color-scheme: dark;
  --room:#14111c;        /* dim room */
  --panel:#1e1a29;       /* cabinet */
  --panel-2:#272236;
  --line:#3a3350;
  --ink:#f6efe3;         /* warm paper white */
  --muted:#b9ae9f;
  --marigold:#f2a03d;    /* accent */
  --marigold-ink:#1d1206;
  --sindoor:#e5483a;     /* LIVE */
  --peacock:#3fb8a8;     /* rule chips */
  --display:"Mukta", system-ui, sans-serif; /* channel names: the same bold Mukta as the full-screen panel */
  --body:"Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html,body{background:var(--room);color:var(--ink)}
body{font-family:var(--body);font-size:17px;line-height:1.45;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-block:16px 40px}
.wrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* OGTV logo: the O is a TV screen with an on-air light; mark from the #ogmark symbol, word in Unbounded */
.logo{display:inline-flex;align-items:center;gap:.1em;line-height:1;font-family:"Unbounded",var(--body);font-weight:700;letter-spacing:-.045em;color:var(--ink)}
.logo-mark{width:1.05em;height:.84em;flex:none;color:var(--marigold)}
.brand h1{font-size:2rem;margin:0;font-weight:700}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.clock{font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:700}
.clock small{font-weight:500;color:var(--muted);font-size:.8rem;letter-spacing:.08em;margin-left:6px}

/* main grid */
.main{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:860px){.main{grid-template-columns:1fr}}
.main.list-hidden{grid-template-columns:minmax(0,1fr)}
/* Channel list toggle: Hide in the panel; a tab on the right edge brings it back */
.remote-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hide-list{display:inline-flex;align-items:center;gap:2px;min-height:36px;padding:0 10px 0 6px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--muted);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;flex-direction:row-reverse}
.hide-list:hover{color:var(--ink);border-color:var(--muted)}
.show-list{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 8px;border:1px solid var(--line);border-right:0;border-radius:12px 0 0 12px;background:var(--panel);color:var(--ink);cursor:pointer;
  box-shadow:-8px 0 24px rgba(0,0,0,.35)}
.show-list span{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:700;font-size:.85rem;letter-spacing:.08em}
.show-list:hover{background:var(--panel-2)}

.tv{display:flex;flex-direction:column;gap:12px;min-width:0}
.screen{position:relative;aspect-ratio:16/9;max-width:100%;background:#000;border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px var(--line),0 20px 60px -20px rgba(242,160,61,.25)}
#yt,#yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Press to start splash */
.start{position:fixed;inset:0;z-index:50;border:0;cursor:pointer;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(70% 60% at 50% 45%,#1d1a26 0%,#0b0a0f 70%,#050407 100%);font-family:var(--body)}
.start-logo{font-size:clamp(3.2rem,14vw,8rem)}
.start-logo .logo{filter:drop-shadow(0 0 28px rgba(242,160,61,.25))}
.start-cta{font-weight:700;letter-spacing:.4em;text-transform:uppercase;font-size:clamp(.85rem,2.6vw,1.05rem);color:var(--marigold);animation:blink 1.4s ease-in-out infinite}
.start-sub{color:var(--muted);font-size:.9rem}
@keyframes blink{50%{opacity:.35}}
/* Retro camcorder mode: warm VHS colour, scanlines, grain, tracking band and a VCR readout */
.retro-btn{background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 16px;min-height:44px;color:var(--muted);font-weight:700;letter-spacing:.06em;cursor:pointer}
.retro-btn[aria-pressed="true"]{background:var(--marigold);color:var(--marigold-ink);border-color:var(--marigold)}
.vhs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;display:none}
.screen.retro .vhs{display:block}
.screen.retro #yt{filter:saturate(1.45) contrast(1.12) brightness(1.04) sepia(.2) hue-rotate(-8deg) blur(.45px)}
.vhs::before{content:"";position:absolute;inset:0;z-index:1;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),
  radial-gradient(110% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.55))}
.vhs::after{content:"";position:absolute;left:0;right:0;height:7%;top:-10%;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.10) 40%,rgba(255,255,255,.18) 50%,transparent);animation:track 6s linear infinite}
.vhs .grain{position:absolute;inset:-50%;opacity:.16;mix-blend-mode:overlay;animation:grain .5s steps(5) infinite;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.osd{position:absolute;z-index:2;font-family:"VT323",ui-monospace,monospace;color:#f4f4f4;font-size:clamp(1.1rem,2.6vw,1.9rem);line-height:1;letter-spacing:.06em;
  text-shadow:2px 0 rgba(255,0,80,.55),-2px 0 rgba(0,220,255,.55),0 0 6px rgba(0,0,0,.6);white-space:pre}
.osd-play{top:14px;right:18px;animation:blink 1.6s steps(1) infinite}
.osd-time{left:136px;bottom:18px}
.screen:fullscreen .osd-time,.screen:-webkit-full-screen .osd-time,.screen.pseudo-fs .osd-time{left:236px} /* clear of the on-screen buttons */
@keyframes track{to{top:105%}}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-7%,4%)}40%{transform:translate(5%,-6%)}60%{transform:translate(-4%,7%)}80%{transform:translate(6%,3%)}}
/* Full screen: real fullscreen where supported, otherwise the screen fills the window (iPhone) */
.fs{position:absolute;left:14px;bottom:14px;z-index:4;width:48px;height:48px;border-radius:999px;border:0;display:grid;place-items:center;
  background:rgba(0,0,0,.55);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.4);cursor:pointer}
.fs:hover{background:rgba(0,0,0,.8)}
/* Subtitles on/off, beside full screen; struck through when off */
.cc{position:absolute;left:72px;bottom:14px;z-index:4;height:48px;min-width:48px;padding:0 12px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font:700 .9rem/1 var(--body);letter-spacing:.06em;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.cc:hover{background:rgba(0,0,0,.8)}
/* Retro on the screen itself, only in full screen (the header has its own button) */
.retro-fs{display:none;position:absolute;left:130px;bottom:14px;z-index:4;height:48px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;font:700 .9rem/1 var(--body);letter-spacing:.04em;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.retro-fs:hover{background:rgba(0,0,0,.8)}
.retro-fs[aria-pressed="true"]{background:var(--marigold);color:var(--marigold-ink)}
.screen:fullscreen .retro-fs,.screen:-webkit-full-screen .retro-fs,.screen.pseudo-fs .retro-fs{display:block;z-index:6;transition:bottom .3s ease,opacity .4s}
.screen.fs-idle .retro-fs{opacity:0!important;pointer-events:none}
.screen.strip-on .retro-fs{bottom:calc(5vh + 126px);opacity:1!important}
/* "Maximize for the best experience" under the TV */
.maximize{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 4px;border:0;background:none;
  color:var(--muted);font:500 .92rem/1 var(--body);cursor:pointer}
.maximize:hover{color:var(--marigold)}
.cc[aria-pressed="false"]{color:rgba(255,255,255,.55);text-decoration:line-through;text-decoration-thickness:2px}
.screen:fullscreen .cc,.screen.pseudo-fs .cc{opacity:.35}.screen:fullscreen .cc:hover,.screen.pseudo-fs .cc:hover{opacity:1}
.screen:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;max-width:none;border-radius:0}
.screen:-webkit-full-screen{aspect-ratio:auto;width:100vw;height:100vh;max-width:none;border-radius:0}
.screen.pseudo-fs{position:fixed;inset:0;z-index:40;aspect-ratio:auto;max-width:none;border-radius:0}
.screen:fullscreen .fs,.screen.pseudo-fs .fs{opacity:.35}.screen:fullscreen .fs:hover,.screen.pseudo-fs .fs:hover{opacity:1}
/* Full-screen TV mode: channel banner, channel strip, big number entry; controls and cursor hide when idle */
.screen .bug{display:none} /* the corner watermark is a full-screen thing; normal view stays clean */
.screen:fullscreen .bug,.screen:-webkit-full-screen .bug,.screen.pseudo-fs .bug{display:flex}
.fs-catch,.fs-ui{display:none}
.screen:fullscreen .fs-catch,.screen:-webkit-full-screen .fs-catch,.screen.pseudo-fs .fs-catch{display:block;position:absolute;inset:0;z-index:2}
.screen:fullscreen .fs-ui,.screen:-webkit-full-screen .fs-ui,.screen.pseudo-fs .fs-ui{display:block}
.screen.fs-idle .fs-catch{cursor:none}
.screen:fullscreen.fs-idle .fs,.screen:fullscreen.fs-idle .cc,.screen:fullscreen.fs-idle .sound,
.screen:-webkit-full-screen.fs-idle .fs,.screen:-webkit-full-screen.fs-idle .cc,.screen:-webkit-full-screen.fs-idle .sound,
.screen.pseudo-fs.fs-idle .fs,.screen.pseudo-fs.fs-idle .cc,.screen.pseudo-fs.fs-idle .sound{opacity:0!important;pointer-events:none;transition:opacity .4s} /* full screen only */
/* Full screen, subtitles and sound stay usable above the channel strip */
.screen:fullscreen .fs,.screen:fullscreen .cc,.screen:fullscreen .sound,.screen:-webkit-full-screen .fs,.screen:-webkit-full-screen .cc,.screen:-webkit-full-screen .sound,
.screen.pseudo-fs .fs,.screen.pseudo-fs .cc,.screen.pseudo-fs .sound{z-index:6;transition:bottom .3s ease,opacity .4s}
.screen.strip-on .fs,.screen.strip-on .cc,.screen.strip-on .sound{bottom:calc(5vh + 126px);opacity:1!important}
.fs-ui{position:absolute;inset:0;z-index:5;pointer-events:none}
.banner{position:absolute;left:4vw;bottom:max(6vh,82px);display:flex;gap:24px;align-items:center;max-width:min(72vw,940px);padding:18px 28px 18px 20px;border-radius:22px;
  background:rgba(14,12,20,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.5);
  opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .35s ease,bottom .35s ease}
.screen.banner-on .banner{opacity:1;transform:none}
.screen.strip-on .banner{bottom:calc(5vh + 190px)} /* above the buttons, which sit above the strip */
.bn-n{font:700 clamp(2.6rem,5vw,4.4rem)/1 "Unbounded",var(--body);letter-spacing:-.04em;color:var(--marigold);min-width:1.5em;text-align:center}
.bn-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.bn-name{font-weight:700;font-size:clamp(1.1rem,2vw,1.45rem);color:#fff}
.bn-name em{font-style:normal;font-weight:500;color:var(--muted);margin-left:8px;font-size:.8em}
.bn-title{font-size:clamp(1rem,1.7vw,1.25rem);color:#f4f2ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-meta{font-size:clamp(.85rem,1.3vw,1rem);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip{position:absolute;left:0;right:0;bottom:0;display:flex;gap:14px;overflow-x:auto;padding:70px 4vw 5vh;scroll-snap-type:x proximity;scrollbar-width:none;
  background:linear-gradient(transparent,rgba(8,7,12,.94) 50%);opacity:0;transform:translateY(34px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.strip::-webkit-scrollbar{display:none}
.screen.strip-on .strip{opacity:1;transform:none}
.screen.strip-on .sc{pointer-events:auto} /* only the cards catch clicks; the rest of the video closes the strip */
.sc{flex:none;width:236px;scroll-snap-align:center;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;text-align:left;padding:14px 16px;border-radius:16px;
  border:1px solid rgba(255,255,255,.1);background:rgba(30,26,41,.88);color:#fff;font:inherit;cursor:pointer;transition:transform .2s ease,border-color .2s,background .2s}
.sc-n{grid-row:1/3;align-self:center;font:700 1.9rem/1 "Unbounded",var(--body);letter-spacing:-.04em;color:var(--marigold)}
.sc-name{font-weight:700;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-now{font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-bar{grid-column:1/3;height:4px;margin-top:8px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.sc-bar i{display:block;height:100%;background:var(--marigold)}
.sc.on{border-color:var(--marigold);background:rgba(58,40,20,.9)}
.sc.focus,.sc:hover{transform:translateY(-8px) scale(1.04);border-color:#fff;background:rgba(48,42,64,.96)}
.sc:focus-visible{outline:3px solid #fff;outline-offset:3px}
.digits{position:absolute;top:5vh;right:4vw;font:700 clamp(3rem,7vw,6rem)/1 "Unbounded",var(--body);letter-spacing:-.04em;color:#fff;
  text-shadow:0 6px 30px rgba(0,0,0,.6);opacity:0;transition:opacity .2s}
.screen.digits-on .digits{opacity:1}
@media (prefers-reduced-motion:reduce){.banner,.strip,.sc{transition:none}}
/* LIVE badge on live channels */
.livedot{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.08em;background:var(--sindoor);color:#fff;border-radius:3px;padding:1px 4px;margin-right:5px;vertical-align:1px}
/* NEW badge: uploaded in the last 30 days */
.new{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.08em;background:var(--marigold);color:var(--marigold-ink);
  border-radius:3px;padding:1px 4px;margin-right:5px;vertical-align:1px}
.prog .new{font-size:0;padding:0;width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px;vertical-align:1px}
/* HBO-style intro static while a channel tunes in: bright fine snow, logo resolving out of it */
.static{position:absolute;inset:0;z-index:1;background:#777;overflow:hidden;display:grid;place-items:center}
.static canvas{position:absolute;inset:0;width:100%;height:100%;display:block;filter:contrast(1.15)}
.static::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 50% 50%,transparent 55%,rgba(0,0,0,.35))}
.static .ident{position:relative;z-index:1;font-size:clamp(2.2rem,8vw,4.6rem);filter:drop-shadow(0 0 1px rgba(255,255,255,.5));animation:resolve 1.1s steps(1,end) .2s both}
@keyframes resolve{0%{opacity:0}18%{opacity:.85}26%{opacity:.15}40%{opacity:1}52%{opacity:.55}62%,100%{opacity:1}} /* signal locking on */
.static .ident .logo,.static .ident .logo-mark{color:#0b0a0f} /* the primary logo's black-on-light version */
.bug{position:absolute;top:12px;left:14px;display:flex;gap:8px;align-items:center;pointer-events:none;z-index:3}
.bug-mark{width:40px;height:32px;color:var(--marigold);filter:drop-shadow(0 1px 4px rgba(0,0,0,.7))} /* channel watermark */
.chanbug{font-family:var(--display);font-weight:700;font-size:1.05rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.sound{position:absolute;right:14px;bottom:14px;z-index:4;background:var(--marigold);color:var(--marigold-ink);border:0;border-radius:999px;
  padding:12px 20px;font-weight:700;font-size:1.05rem;min-height:48px;box-shadow:0 6px 20px rgba(0,0,0,.5)}
[hidden]{display:none!important}
.card{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:12px;
  padding:6% 8%;background:radial-gradient(120% 90% at 20% 10%,#3a2a4f 0%,#1a1424 55%,#0e0b14 100%)}
.card .kicker{color:var(--marigold);font-weight:700;letter-spacing:.14em;font-size:.8rem;text-transform:uppercase}
.card h2{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.4rem);line-height:1.15;margin:0;text-wrap:balance}
.card p{margin:0;color:var(--muted);max-width:52ch}
.card a.watch{align-self:flex-start;background:var(--marigold);color:var(--marigold-ink);text-decoration:none;font-weight:700;
  padding:12px 20px;border-radius:999px;min-height:48px;display:inline-flex;align-items:center}
.card .count{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:700}

.now{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.now-row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;justify-content:space-between}
.now h3{margin:0;font-size:1.3rem;line-height:1.25;text-wrap:balance;min-width:0}
.meta{color:var(--muted);font-size:.95rem;font-variant-numeric:tabular-nums}
.bar{height:8px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--marigold);width:0}
.why{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.92rem;color:var(--muted)}
.chip{border:1px solid var(--peacock);color:var(--peacock);border-radius:999px;padding:2px 10px;font-size:.85rem;font-weight:500}
.next{font-size:.98rem}
.next b{color:var(--marigold);font-weight:700}

/* remote / channel list */
.remote{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:4px}
#chlist{overflow-y:auto;max-height:min(68vh,560px);scrollbar-width:thin}
/* Group headings in the channel list and the full-screen strip */
.ch-group{margin:14px 8px 4px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--marigold);font-weight:700}
.sc-group{flex:none;align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--marigold);font-weight:700;margin:0 -2px}
.remote h4{margin:6px 8px 6px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ch{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;text-align:left;background:transparent;
  border:0;border-radius:10px;padding:10px 10px;min-height:64px}
.ch:hover{background:var(--panel-2)}
.ch[aria-current="true"]{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--marigold)}
.ch .num{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.3rem;color:var(--marigold);text-align:center}
.ch .nm{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ch .nm strong{font-family:var(--display);font-weight:700;font-size:1.1rem}
.ch .nm em{font-style:normal;color:var(--muted);font-size:.85rem}
.ch .on{display:block;color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint{color:var(--muted);font-size:.85rem;margin:6px 8px 4px}
kbd{font-family:var(--body);border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:.8rem}

/* guide */
.guide{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 0 10px}
.guide-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:0 18px 10px}
.guide-head h4{margin:0;font-family:var(--display);font-weight:700;font-size:1.35rem}
.guide-head span{color:var(--muted);font-size:.9rem}
.gscroll{overflow-x:auto;position:relative}
.grid{position:relative;padding:0 18px}
.trow{display:flex;height:30px;position:relative;margin-left:120px}
.tick{position:absolute;top:6px;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;transform:translateX(-50%)}
.grow{display:flex;align-items:stretch;height:58px;margin-bottom:6px}
.glabel{width:112px;flex:none;margin-right:8px;display:flex;align-items:center;font-family:var(--display);font-weight:700;font-size:1rem;
  position:sticky;left:0;background:var(--panel);z-index:2;padding-left:2px}
.glane{position:relative;flex:none}
.prog{position:absolute;top:0;bottom:0;border-radius:8px;background:var(--panel-2);border:1px solid var(--line);
  padding:6px 9px;overflow:hidden;font-size:.86rem;line-height:1.25;text-align:left;min-width:0}
.prog b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog small{color:var(--muted);font-variant-numeric:tabular-nums}
.prog.nowp{border-color:var(--marigold)}
.nowline{position:absolute;top:0;bottom:0;width:2px;background:var(--sindoor);z-index:1;pointer-events:none}

.note{color:var(--muted);font-size:.92rem;max-width:80ch}
.note strong{color:var(--ink)}
/* About, at the very bottom */
.about{border-top:1px solid var(--line);margin-top:12px;padding:28px 2px 40px;display:flex;flex-direction:column;gap:20px}
.about-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.about-head h2{margin:0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.about-logo{font-size:1.3rem;opacity:.9}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px 32px}
.about h3{margin:0 0 6px;font-size:1.02rem;color:var(--ink);font-weight:700}
.about p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55;max-width:60ch}
.about a{color:var(--marigold)}.about a:hover{color:#ffc27a}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}