/* ==========================================================================
   Shubhada Varadkar - shubhadavaradkar.com
   Design tokens taken verbatim from the approved Claude Design artifact
   "Shubhadas website home page directions", which follows
   SHUBHADA Design Guidelines rev 2:
     palette "Dusk at Konark", type Playfair Display + Inter,
     full-bleed imagery with no radius/shadow, 8px spacing scale.
   ========================================================================== */

:root{
  --ivory:#FFFFF0;
  --ink:#2B2118;
  --soft:#5B5044;
  --alta:#C9321C;
  --gold:#8A5B0B;      /* OBS-30: was #B87A10 = 3.57:1 on ivory, failed AA at 12px. Now 5.81:1. */
  --peacock:#1B6B7A;
  --rule:#E7DDC6;
  /* OBS-32: --rule is decoration (hairlines between rows) and is exempt from
     WCAG 1.4.11. A form field's border is not - it identifies the control -
     and #E7DDC6 on white measured 1.35:1 against a 3:1 requirement. This is a
     separate token so darkening the field does not coarsen every divider. */
  --field-rule:#9E8B6B; /* 3.30:1 on #fff */
  /* One reading measure, shared by the press page and the production pages so
     their text columns are identical rather than merely similar. The press
     feed's date gutter sits OUTSIDE this - see .has-gutter - which is what
     makes the two match exactly instead of the feed losing 164px to it. */
  --measure:880px;
  --gutter:164px;      /* 140px date column + 24px gap */
  --pad:56px;
  --gap:96px;

  /* Motion. Odissi is curvilinear where Bharatanatyam is linear, and it
     alternates flowing movement with held, sculptural stillness. So: nothing
     travels in a straight line, nothing bounces, and nothing loops forever.
     Two curves and two durations - everything on the site uses only these. */
  --ease-tribhanga:cubic-bezier(.34,.07,.16,1); /* slow lean, quick settle */
  --ease-chowk:cubic-bezier(.4,0,.2,1);         /* grounded, no overshoot */
  --t-quick:160ms;                              /* press, colour */
  --t-settle:420ms;                             /* arrivals, reveals */
}

*{box-sizing:border-box}
/* OBS-36: the header is sticky and ~66-78px tall, so without this the skip
   link's own target - and anything tabbed to just below the fold - lands
   underneath it. Also covers WCAG 2.2 SC 2.4.11 Focus Not Obscured. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  margin:0 auto;
  max-width:1440px;
  background:var(--ivory);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.7;
}
img{max-width:100%;display:block}
a{color:var(--alta);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--alta);outline-offset:2px}
/* Visually hidden but announced. Used for the "(opens in a new tab)" note
   on external links (OBS-29) - WCAG 3.2.5 wants the context change stated,
   and an icon-only link has no text to carry it. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--ink);color:var(--ivory);padding:10px 14px}

/* ---------------------------------------------------------------- header */
.hdr{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad);
  background:var(--ivory);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand span{font-family:'Playfair Display',serif;font-weight:600;font-size:20px}
.brand.small span{font-size:17px}
.nav{display:flex;gap:32px;font-size:15px;font-weight:500;flex-wrap:wrap}
.nav a{color:var(--ink)}
.nav a.on{color:var(--alta);font-weight:600}
.hdr-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn{display:inline-block;padding:11px 24px;background:var(--alta);color:var(--ivory);
     font-size:14px;font-weight:600}
.btn:hover{background:#A82814;text-decoration:none}
/* OBS-33: 44px, up from 38px. The burger is the only route to navigation below
   1100px, so a mis-tap here strands the visitor entirely. */
.burger{display:none;width:44px;height:44px;padding:0;flex-shrink:0;cursor:pointer;
        align-items:center;justify-content:center;
        border:1px solid var(--rule);border-radius:8px;background:none}
.mnav{display:none;flex-direction:column;padding:6px 24px 22px;border-top:1px solid var(--rule)}
.mnav a{padding:14px 0;font-size:16px;font-weight:500;color:var(--ink);
        border-bottom:1px solid var(--rule)}
.mnav a.on{color:var(--alta);font-weight:600}
.mnav a:last-child{border-bottom:0}
.mnav[hidden]{display:none}

/* ------------------------------------------------------------------ type */
h1,h2,h3{font-family:'Playfair Display',serif;font-weight:600;margin:0}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
         color:var(--gold);margin:0 0 16px}
.eyebrow a{color:var(--gold)}
/* Used where an eyebrow sits in a .row beside a link, so it aligns on the
   baseline instead of carrying its own bottom margin. Replaces the inline
   style="margin:0" the home page was using - OBS-17 needs those gone. */
.eyebrow.flush{margin:0}
.eyebrow.light{color:var(--ivory);opacity:.85}
.ptitle{font-size:48px;line-height:1.1;margin:0 0 16px}
.lede{font-size:19px;line-height:1.6;color:var(--soft);margin:0;max-width:62ch}
.dtitle{font-size:36px;line-height:1.15;margin:0 0 16px}
.dtitle.light{color:var(--ivory)}
.soft{color:var(--soft)}
.small{font-size:14px}
.muted{font-size:14px;line-height:1.6;color:var(--soft);max-width:36ch;margin:0 0 16px}
.more{font-size:15px;font-weight:600;white-space:nowrap}

/* ---------------------------------------------------------------- layout */
.pad{padding:var(--gap) var(--pad)}
.narrow{max-width:var(--measure);margin-left:auto;margin-right:auto}
/* Same text measure, plus room for the date gutter beside it. */
.narrow.has-gutter{max-width:calc(var(--measure) + var(--gutter))}
/* OBS-02: was 480px, roughly 55 characters - narrower than .narrow (720px)
   and visibly cramped for the artist write-up on the home page. 660px puts
   it at a comfortable 70-75 characters and lines it up with the rest. */
.col{max-width:660px;margin:var(--gap) auto 0;padding:0 24px}
.pagehead{padding:72px var(--pad) 40px;max-width:900px}
/* wrap: the prev/next pair on production pages carries two nowrap titles that
   will not sit side by side on a phone */
.row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
     gap:24px;margin-bottom:36px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
/* Mirror of the teach band: the picture runs off the left edge of the page
   instead of sitting inset with a margin, and is capped so a tall portrait
   does not tower over the short text block beside it. */
.split.bleed-l{align-items:stretch;grid-template-columns:.9fr 1.1fr}
.split.bleed-l > div{align-self:center}
.split.bleed-l > .ph{aspect-ratio:auto;min-height:520px;border:0;
                     margin-left:calc(-1 * var(--pad))}
/* The box is landscape but the subject stands in the upper half, so bias the
   cover crop upward rather than letting it cut across the face. */
.split.bleed-l > .ph img{object-position:50% 28%}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:40px 32px}

/* ------------------------------------------------------------------ rails */
/* OBS-09. A scroll-snap rail rather than a JS carousel.
   Every card stays an ordinary <a> in source order, so it is still crawlable,
   still keyboard-reachable by Tab, and still readable with JS off - none of
   which is true of a slider that hides slides behind buttons.
   The container is focusable and labelled for the same reason the performances
   table is (OBS-34): a scrollable region that only responds to a mouse wheel or
   a swipe is unusable from the keyboard. */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(215px,245px);
      gap:32px;overflow-x:auto;overscroll-behavior-x:contain;
      scroll-snap-type:x proximity;padding:4px 4px 14px;margin:0 -4px}
.rail > .card{scroll-snap-align:start}
/* Snapping and a per-frame scrollLeft nudge fight each other, so snap yields
   while the rail is drifting. Reduced-motion users never get .is-auto and
   keep the snap. */
.js .rail.is-auto{scroll-snap-type:none}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--rule)}
.rail::-webkit-scrollbar-track{background:transparent}
/* The rail is the one place a card's hover shift could cause a scroll jump,
   so the frame holds and only the image moves - as everywhere else. */
.rail-hint{font-size:13px;color:var(--soft);margin:10px 0 0}
@media (max-width:1100px){
  .rail{grid-auto-columns:minmax(180px,205px);gap:18px}
}

/* ----------------------------------------------------------- image slots */
/* Each slot shows a labelled placeholder until its photo is uploaded to
   /images/ under the exact filename. No markup change is needed later. */
.ph{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;
    background:#F6EFE0;border:1px dashed var(--rule)}
.ph.bleed{border:0}
.ph.r45{aspect-ratio:4/5}
.ph.r219{aspect-ratio:21/9}
.ph picture{position:absolute;inset:0;z-index:1;display:block}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph img.missing{display:none}

/* Typographic stand-in for a work with no artwork in the archive - the five
   books have no cover scan. Styled as a deliberate card, not a gap. */
.ph.titlecard{background:#F1E7D4;border:1px solid var(--rule);display:flex;
              align-items:center;justify-content:center;text-align:center}
.tc-inner{display:flex;flex-direction:column;align-items:center;gap:14px;
          padding:28px 26px;max-width:88%}
.tc-title{font-family:'Playfair Display',serif;font-weight:600;
          font-size:clamp(18px,2.4vw,26px);line-height:1.25;color:var(--ink)}
.tc-rule{width:38px;height:1px;background:var(--rule);display:block}
.tc-meta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
         line-height:1.7;color:#6F6049}  /* OBS-31: was #9C8A70 = 2.73:1 */
.ph-note{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
         justify-content:center;padding:24px;text-align:center;
         font-size:12px;line-height:1.6;color:#6F6049}  /* OBS-31 */
.ph-note em{font-style:italic;opacity:.85}

/* ------------------------------------------------------------------ hero */
.hero,.quote-band{position:relative}
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(20,12,8,.82) 0%,rgba(20,12,8,.35) 45%,rgba(20,12,8,0) 70%)}
.hero-copy{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:var(--pad)}
.hero-copy h1{font-size:64px;line-height:1.05;color:var(--ivory);max-width:16ch}

/* ------------------------------------------------------------ award band */
.award-band{margin:var(--gap) 0 0;padding:64px var(--pad);
            background:var(--ink);color:var(--ivory);text-align:center}
.award-band.tall{margin:0}
.award-line{font-family:'Playfair Display',serif;font-style:italic;font-weight:500;
            font-size:38px;line-height:1.35;max-width:26ch;margin:0 auto}
.award-sub{margin:20px 0 0;font-size:14px;opacity:.7}
/* OBS-08: the awards link sits on the dark band. A class rather than an
   inline style, because OBS-17 cannot add a CSP until the inline styles are
   gone - fixing one item should not deepen another. */
.more.on-dark{color:var(--ivory)}
.more.on-dark{background-image:linear-gradient(var(--ivory),var(--ivory))}

/* ------------------------------------------------------------ quote band */
.quote-band{margin-top:var(--gap)}
.quote-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,12,8,.78) 0%,rgba(20,12,8,.3) 55%,rgba(20,12,8,0) 80%)}
.quote-copy{position:absolute;z-index:3;left:var(--pad);top:50%;transform:translateY(-50%);
            max-width:520px}
.quote-copy blockquote{margin:0;font-family:'Playfair Display',serif;font-style:italic;
  font-weight:500;font-size:26px;line-height:1.5;color:var(--ivory)}
.cite{margin:16px 0 0;font-size:13px;font-weight:600;letter-spacing:1px;
      text-transform:uppercase;color:var(--ivory);opacity:.75}

/* ------------------------------------------------------------- news feed */
.feed-row{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:20px 0;
          border-bottom:1px solid var(--rule);font-size:16px;line-height:1.6}
.feed-row:last-child{border-bottom:0}
.feed-date{font-size:14px;color:var(--soft)}

/* ---------------------------------------------------------- teach band */
/* The photograph runs to the right edge of the page. Previously the band's
   64px padding left a teal strip down the right of the picture, which read as
   an unintended border rather than a frame. */
.teach-band{margin:0 0 var(--gap) var(--pad);padding:64px 0 64px 64px;
            background:var(--peacock);color:var(--ivory);grid-template-columns:1fr 1fr;
            align-items:stretch;gap:64px;overflow:hidden}
.teach-band > div{align-self:center}
/* Negative vertical margin cancels the band's 64px padding on the picture
   side only, so the photograph sits flush to the top, right and bottom of the
   band and the teal survives just as the panel behind the text. */
.teach-band > .ph{aspect-ratio:auto;min-height:520px;border:0;margin:-64px 0}
.teach-band > .ph img{object-position:50% 32%}
.on-teal{opacity:.92;margin:0 0 24px}
.teach-band .btn{padding:13px 26px}

/* ----------------------------------------------------------------- cards */
.card{display:block;color:var(--ink)}
.card:hover{text-decoration:none}
.card:hover .ctitle{color:var(--alta)}
.ctitle{font-size:22px;line-height:1.25;margin:16px 0 6px}
.cmeta{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
       color:var(--gold);margin:0 0 8px}
.card .soft{font-size:15px;margin:0}

/* ---------------------------------------------------------- beats + meta */
.beat{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:24px 0;
      border-bottom:1px solid var(--rule)}
.beat:last-child{border-bottom:0}
.beat-yr{font-size:14px;color:var(--soft)}
.beat-h{font-size:21px;margin:0 0 8px}
.meta{margin:32px 0 0;padding:0;border-top:1px solid var(--rule)}
.mrow{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:14px 0;
      border-bottom:1px solid var(--rule);font-size:15px}
.mrow dt{margin:0;font-weight:600;color:var(--soft)}
.mrow dd{margin:0}

/* ----------------------------------------------------------------- table */
.twrap{overflow-x:auto}
.perf{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.perf th{text-align:left;font-size:12px;font-weight:600;letter-spacing:1.5px;
         text-transform:uppercase;color:var(--soft);
         padding:12px 16px 12px 0;border-bottom:1px solid var(--rule)}
.perf td{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.perf .fest{font-weight:500}
.perf .yr{white-space:nowrap;color:var(--soft)}

/* -------------------------------------------------------------- faq/form */
.faq{border-bottom:1px solid var(--rule);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:17px}
.faq p{margin:12px 0 0}
.form{display:flex;flex-direction:column;gap:8px;max-width:560px}
.form label{margin-top:12px;font-size:14px;font-weight:600}
.form .opt{font-weight:400;color:var(--soft)}
.form input,.form select,.form textarea{
  width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:0;
  border:1px solid var(--field-rule);background:#fff;color:var(--ink)}
.form button{margin-top:20px;align-self:flex-start;border:0;cursor:pointer}
.hp{position:absolute;left:-9999px}

/* ---------------------------------------------------------------- footer */
.ftr{padding:var(--pad);border-top:1px solid var(--rule);
     display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.fh{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:1.5px;
    text-transform:uppercase;color:var(--soft);margin:0 0 14px}
.fcol{display:flex;flex-direction:column;gap:10px;font-size:14px}
.fcol a,.ftr .muted a{color:var(--ink)}
.u{text-decoration:underline}
.social{display:flex;gap:14px}
/* OBS-33: the visible ring stays 34px; the tappable box is 44px. Both passed
   WCAG 2.5.8 (24px) already - this is Apple HIG / Material sizing, and it
   matters most for adjacent targets like this row of five. */
.social a{position:relative;width:44px;height:44px;flex-shrink:0;
          display:flex;align-items:center;justify-content:center}
.social a::before{content:"";position:absolute;width:34px;height:34px;
          border:1px solid var(--rule);border-radius:50%}
.social a svg{position:relative}
.credit{padding:20px var(--pad);border-top:1px solid var(--rule);text-align:center;
        font-size:12px;letter-spacing:1px;color:var(--soft)}
.credit a{color:var(--gold);font-weight:600}

/* ---------------------------------------------------------------- motion */
/* Everything below is opt-in through the `js` class that site.js puts on
   <html>. Without JavaScript nothing is hidden and nothing animates, so the
   page can never end up with invisible content. */

/* -- 1. image arrival ------------------------------------------------------
   Lazy images used to snap in from an empty frame. They now resolve: a fade
   with a slight scale-down settling to rest, like a pose arriving at stillness.
   Applied to <picture>, never to <img>, so it cannot collide with the hover
   transform below. The hero is excluded in site.js - it is the LCP image. */
.js .ph picture{opacity:0;transform:scale(1.015);transform-origin:50% 45%}
.js .ph picture.in{opacity:1;transform:none;
     transition:opacity 600ms var(--ease-chowk),
                transform 600ms var(--ease-tribhanga)}

/* -- 2. card hover: the abhanga shift --------------------------------------
   The frame holds still and the figure inside shifts its weight sideways.
   That is what a dancer does in abhanga, and unlike a lift-and-shadow it
   moves nothing in the layout. */
.ph img{transition:transform var(--t-settle) var(--ease-tribhanga)}
.card:hover .ph img,
.card:focus-visible .ph img{transform:translateX(8px) scale(1.03)}
.card .ctitle{transition:color var(--t-quick) var(--ease-chowk)}

/* -- 3. press: grounding ---------------------------------------------------
   Chowk is the grounded stance - weight low. Presses settle down, never pop. */
.card,.btn,.more{transition:transform var(--t-quick) var(--ease-chowk),
                            background-color var(--t-quick) var(--ease-chowk),
                            background-size var(--t-settle) var(--ease-tribhanga)}
.card:active,.btn:active{transform:scale(.985)}
.more:active{transform:scale(.985) translateX(2px)}

/* -- 4. the "more" link ----------------------------------------------------
   Leans into its own direction of travel, and the rule draws in from the left
   rather than appearing all at once. Prose links keep the browser underline. */
.more{display:inline-block;text-decoration:none;
      background-image:linear-gradient(var(--alta),var(--alta));
      background-repeat:no-repeat;background-position:0 100%;background-size:0 1px}
.more:hover{transform:translateX(3px);background-size:100% 1px;text-decoration:none}

/* -- 5. scroll reveal ------------------------------------------------------
   Rise and settle, once only, staggered across siblings. The lateral drift is
   what keeps the path a curve rather than a straight slide. */
.js .rise{opacity:0;transform:translate3d(-6px,14px,0)}
.js .rise.seen{opacity:1;transform:none;
     transition:opacity var(--t-settle) var(--ease-chowk),
                transform var(--t-settle) var(--ease-tribhanga)}

/* -- 6. busy state: ghungroo ------------------------------------------------
   Five bells sounding left to right. Used inline on the contact form while it
   submits. See .plume in the markup for the full-size peacock mark. */
.ghungroo{display:none;gap:5px;vertical-align:middle;margin-left:10px}
.is-busy .ghungroo{display:inline-flex}
.ghungroo i{width:6px;height:6px;border-radius:50%;background:currentColor;
            opacity:.35;display:block}
.is-busy .ghungroo i{animation:bell 1100ms var(--ease-tribhanga) infinite}
.ghungroo i:nth-child(2){animation-delay:90ms}
.ghungroo i:nth-child(3){animation-delay:180ms}
.ghungroo i:nth-child(4){animation-delay:270ms}
.ghungroo i:nth-child(5){animation-delay:360ms}
@keyframes bell{0%,70%,100%{opacity:.35;transform:none}
                25%{opacity:1;transform:translateY(-4px)}}

/* -- 7. the peacock plume: image loading -----------------------------------
   Her memoir is Mayurpankh, its translation The Celestial Plume, and the
   documentary about her is Peacock Plume - the feather is already her emblem
   across her published work, so this is drawn from it rather than invented.

   It marks the one loading moment a static site actually has: a lazy image
   that has not arrived yet. Drawn as a background on the frame's own ::after,
   so it costs no markup in any of the 37 slots, and it sways rather than
   spins - a spinner would read as software, not as dance. It is removed the
   moment the picture arrives. */
.js .ph::after{content:"";position:absolute;z-index:0;left:50%;top:50%;
    width:52px;height:58px;margin:-29px 0 0 -26px;opacity:.55;
    transform-origin:50% 88%;
    background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26' fill='none' stroke='%23B87A10' stroke-width='1' stroke-linecap='round'%3E%3Cellipse cx='12' cy='7.6' rx='5.2' ry='6.9'/%3E%3Cellipse cx='12' cy='7' rx='2.6' ry='3.6' fill='%23B87A10' fill-opacity='.22'/%3E%3Ccircle cx='12' cy='7' r='1.1' fill='%23B87A10'/%3E%3Cpath d='M12 14.5V25'/%3E%3Cpath d='M12 17.2c-2.1-.5-3.5-1.4-4.5-2.5M12 20.4c-2.3-.5-3.9-1.3-5-2.4M12 17.2c2.1-.5 3.5-1.4 4.5-2.5M12 20.4c2.3-.5 3.9-1.3 5-2.4'/%3E%3C/svg%3E");
    animation:plume-sway 3.4s var(--ease-tribhanga) infinite}
/* Bigger in a full-bleed band, where a small mark would just look lost. */
.js .ph.bleed::after{width:76px;height:84px;margin:-42px 0 0 -38px}
/* Gone once the photograph is in, and never shown over a typographic card.
   Driven by a class rather than :has() so behaviour is identical in older
   browsers - with :has() unsupported the plume would simply never clear. */
.js .ph.loaded::after,.js .ph.titlecard::after{content:none}
@keyframes plume-sway{0%,100%{transform:rotate(-7deg) translateY(1px)}
                      50%{transform:rotate(7deg) translateY(-1px)}}

/* ----------------------------------------------------------- responsive */
@media (max-width:1100px){
  :root{--pad:24px;--gap:64px}
  .nav{display:none}
  .burger{display:flex}
  .mnav{display:flex}
  .split,.ftr{grid-template-columns:1fr}
  /* Single column: both bleed edge-to-edge rather than half-bleeding, which
     would look like a mistake once the columns stack. */
  .split.bleed-l{grid-template-columns:1fr}
  .split.bleed-l > .ph{margin-left:calc(-1 * var(--pad));
                       margin-right:calc(-1 * var(--pad));min-height:0;aspect-ratio:4/5}
  .teach-band{margin:0 0 var(--gap);padding:40px 28px;gap:32px}
  .teach-band > .ph{margin:0 -28px -40px;min-height:0;aspect-ratio:4/5}
  .hero-copy{left:24px;right:24px;bottom:28px}
  .hero-copy h1{font-size:40px}
  .ptitle{font-size:34px}
  .award-line{font-size:26px}
  .quote-copy{left:24px;right:24px;max-width:none}
  .quote-copy blockquote{font-size:19px}
  .feed-row,.beat,.mrow{grid-template-columns:1fr;gap:6px}
}
/* Reduced motion. Killing transitions alone is NOT enough here: the arrival
   and reveal states start at opacity 0 and are transitioned in, so without
   these overrides a visitor with reduced motion would get a page of invisible
   images and text. Everything is forced to its resting state instead. */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .js .ph picture,.js .rise{opacity:1 !important;transform:none !important}
  .card:hover .ph img,.card:focus-visible .ph img,
  .more:hover,.card:active,.btn:active,.more:active{transform:none !important}
  .more:hover{background-size:100% 1px}
  .ghungroo i{opacity:.7}
}