@charset "utf-8";
/* ==========================================================================
   SE7EN — 7raleigh.com
   Static rebuild. Design tokens recovered from wp-content/themes/se7en/style.css
   (child of Thematic). Geometry preserved: 800px shell, 680px content panel
   floated right, 120px logo gutter, 36px sprite nav bar.
   ========================================================================== */

:root{
  --ink:            #000;
  --panel:          #191408;   /* content panel ground */
  --panel-edge:     #250002;   /* menu bar rule */
  --text:           #f4efe4;
  --text-dim:       #b9ae97;
  --gold:           #ffe796;
  --gold-deep:      #c9a94e;
  --red-head:       #b9241d;   /* h1/h2 */
  --red-accent:     #e51818;   /* .red_18 */

  /* Fluid, but capped so the room photography still frames the panel rather
     than being squeezed to a border. */
  --shell:          min(1200px, 90vw);
  --panel-w:        100%;    /* flush with the menu bar */
  --rope-inset:     27px;    /* bell-pull rope, measured in from the right edge */
  --measure:        72ch;    /* readable line length inside a wide panel */

  --serif:  Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:   "Trebuchet MS", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--ink); }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; border:0; }

a{ color:var(--gold); }
a:hover,a:focus-visible{ color:#fff; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

.skip-link{
  position:absolute; left:8px; top:-48px; z-index:400;
  background:var(--panel); color:var(--gold);
  padding:10px 16px; border:1px solid var(--gold-deep);
  transition:top .15s var(--ease);
}
.skip-link:focus{ top:8px; }

/* ==========================================================================
   Background carousel — full-bleed, fixed, advances one step per navigation
   ========================================================================== */

.bg{
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  background:var(--ink);
}
.bg::after{                       /* keep the shell legible over bright rooms */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.15) 62%, rgba(0,0,0,.72) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 100%);
}
.bg-strip{
  position:absolute; top:0; left:0; height:100%;
  display:flex; z-index:1;
  will-change:transform;
  transform:translate3d(0,0,0);
  transition:transform 1400ms var(--ease);
}
.bg-strip.is-instant{ transition:none; }
.bg-strip picture{
  flex:0 0 100vw; width:100vw; height:100%; display:block;
}
.bg-strip img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 45%;
  display:block;
}

@media (prefers-reduced-motion:reduce){
  .bg-strip{ transition:none; }
}

/* ==========================================================================
   Shell
   ========================================================================== */

.shell{
  position:relative; z-index:10;
  width:var(--shell); margin:0 auto;
  padding:0 0 40px;
}

/* --- masthead ------------------------------------------------------------ */

/* The original let the logo overlap the menu bar (z-index 110 over 100). At the
   original's sprite widths the shield lands on top of "About", so the logo gets
   its own band here and keeps only the horizontal slide. */
.masthead{ position:relative; height:214px; }

.brand{
  position:absolute; left:85px; top:22px; z-index:110;
  display:block; width:187px; height:131px;
  background:url("../img/chrome/logo.png") no-repeat 0 0;
  background-size:187px 131px;
  text-indent:-9999em; overflow:hidden;
  transition:left 750ms var(--ease);
}
@media (prefers-reduced-motion:reduce){ .brand{ transition:none; } }

/* --- nav ----------------------------------------------------------------- */

.nav{
  position:absolute; left:0; bottom:0; z-index:100;
  width:var(--shell); height:36px;
  background:url("../img/chrome/menu/menu_bg.jpg") repeat-x 0 0;
  border-top:5px solid var(--panel-edge);
  border-bottom:5px solid var(--panel-edge);
}
.nav ul{
  margin:0; padding:0 2.5%; list-style:none;
  /* Spread evenly across the bar rather than bunched to one end. */
  display:flex; justify-content:space-evenly; align-items:center; height:100%;
}
/* Live text rather than the original sprite PNGs. The sprites were fixed
   images of six specific words — no seventh item could be added and none
   could be renamed without the original display face, which did not survive
   with the theme. This keeps the gold-gradient-and-red-shadow treatment and
   stays sharp on retina, where the 24px sprites were always soft. */
.nav a{
  display:block; text-decoration:none;
  margin:0;
  font:400 21px/24px var(--serif);
  font-variant:small-caps;
  letter-spacing:.03em;
  white-space:nowrap;
  background:linear-gradient(180deg,#fff8dd 0%,#f0d488 38%,#c9a24a 72%,#a87c2c 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-stroke:.35px rgba(60,8,6,.55);
  filter:drop-shadow(0 1px 0 rgba(74,10,8,.95)) drop-shadow(0 2px 2px rgba(0,0,0,.6));
  opacity:.88; transition:opacity .2s var(--ease);
}
.nav a:hover,.nav a:focus-visible{ opacity:1; }
.nav a[aria-current="page"]{
  opacity:1;
  background:linear-gradient(180deg,#fffdf3 0%,#fbeab4 40%,#e0bf6d 72%,#c79a3c 100%);
  -webkit-background-clip:text; background-clip:text;
}

.nav-toggle{ display:none; }

/* ==========================================================================
   Content panel
   ========================================================================== */

.panel-wrap{ position:relative; }

.panel{
  width:var(--panel-w); margin-left:auto;
  background:var(--panel) url("../img/chrome/content_bg.jpg") no-repeat right bottom;
  box-shadow:0 24px 70px rgba(0,0,0,.75);
  position:relative;
}
.panel-inner{
  padding:34px 66px 40px 42px;
  /* Anchored to the right edge, so it holds wherever the fluid panel lands. */
  background-image:url("../img/chrome/bell_pull_rep.jpg");
  background-repeat:repeat-y;
  background-position:right var(--rope-inset) top;
  min-height:340px;
}

/* A 1200px panel would otherwise run prose to ~150 characters a line. Blocks
   of text keep a readable measure and centre within the wider panel. */
.panel-inner > p{ max-width:var(--measure); margin-inline:auto; }

/* Home sits tight under the menu so the film is the first thing you meet.
   The hero carries its own vertical rhythm, so the panel's own bottom padding
   is trimmed to keep the space above and below the film even. */
.panel-inner--flush{ padding-top:0; padding-bottom:16px; }

.panel.is-swapping .panel-inner{ opacity:0; }
.panel-inner{ transition:opacity 260ms var(--ease); }
@media (prefers-reduced-motion:reduce){ .panel-inner{ transition:none; } }

/* bell pull — pulls you to the next page in menu order */
.bell-pull{
  position:absolute; right:0; bottom:0; z-index:100;
  display:block; width:118px; height:122px;
  background:url("../img/chrome/bell_pull_knot.png") no-repeat right top;
  border:0; cursor:pointer; text-decoration:none;
}
/* The knot sits inside the panel's reserved right-hand strip, so it never
   overlaps text. The destination label would, so it only appears on hover —
   with a backing so it stays legible over whatever is behind it. */
.bell-pull span{
  position:absolute; right:60px; top:26px;
  white-space:nowrap;
  font:400 12px/1 var(--serif);
  text-transform:uppercase; letter-spacing:.11em;
  color:var(--gold);
  background:rgba(8,5,2,.86);
  border:1px solid rgba(201,169,78,.4);
  padding:7px 10px;
  opacity:0; transform:translateX(7px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events:none;
}
.bell-pull span::after{ content:" \203A"; }
.bell-pull:hover span,.bell-pull:focus-visible span{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .bell-pull span{ transition:none; }
}

/* --- typography inside the panel ---------------------------------------- */

.panel h1,.panel h2{
  margin:0 0 .5em;
  color:var(--red-head);
  font:400 36px/1.15 var(--serif);
  text-transform:uppercase; text-align:right;
  letter-spacing:.02em;
}
.panel h2{ font-size:26px; }
/* margin-block, not the margin shorthand — the shorthand would reset the auto
   inline margins that centre text at its readable measure in the wide panel. */
.panel p{ margin-block:0 1.15em; }
.panel p:last-child{ margin-block-end:0; }

.lead-red{
  color:var(--red-accent); font-size:19px; line-height:1.45;
  text-align:center; margin-bottom:.4em;
}
.lead-white{
  font:italic 400 21px/1.4 var(--serif);
  text-align:center; margin-bottom:1.4em;
}
.kicker{
  color:var(--red-accent); font:italic 400 19px/1.4 var(--serif);
  margin-block:0 .5em;   /* not the shorthand — see .panel p */
}
.centered{ text-align:center; }

.flourish{ display:block; margin:26px auto 22px; }
.flourish--tight{ margin:8px auto 18px; }

/* --- events table -------------------------------------------------------- */

.events-list{
  width:100%; max-width:430px; margin:0 auto 1.4em;
  border-collapse:collapse;
}
.events-list td{
  padding:.2em 1.1em; border:0; vertical-align:top;
}
.events-list td:first-child{ text-align:right; }
.events-list td:last-child{ text-align:left; }

/* --- events diary -------------------------------------------------------- */

.ev-list{ list-style:none; margin:0 auto 1.4em; padding:0; max-width:900px; }
.ev{
  display:grid; grid-template-columns:118px 1fr; gap:20px;
  padding:20px 0; align-items:start;
  border-top:1px solid rgba(201,169,78,.22);
}
.ev:first-child{ border-top:0; }
.ev[hidden]{ display:none; }

.ev-when time{ display:block; text-align:right; }
.ev-day{
  display:block; font:400 17px/1.25 var(--serif); color:var(--gold);
}
.ev-weekday{
  display:block; margin-top:3px;
  font:400 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim);
}

.ev-body h2{
  margin:0 0 .25em; text-align:left;
  font:400 22px/1.2 var(--serif); color:var(--red-head);
  text-transform:uppercase; letter-spacing:.02em;
}
.ev-act{
  margin:0 0 .5em;
  font:italic 400 17px/1.35 var(--serif); color:var(--gold);
}
.ev-blurb{ margin:0 0 .6em; }
.ev-meta{
  margin:0 0 .5em; font-size:14px; color:var(--text-dim);
  letter-spacing:.03em;
}
.ev-link a{
  font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid rgba(201,169,78,.5);
}
.ev-img{
  float:right; width:170px; height:auto; margin:0 0 12px 18px;
  border:1px solid rgba(201,169,78,.3);
}

.ev-empty{
  padding:22px 0; text-align:center; color:var(--text-dim);
}
.ev-empty[hidden]{ display:none; }

/* --- partners ------------------------------------------------------------ */

.partners{
  list-style:none; margin:0 auto 1em; padding:0;
  max-width:400px; text-align:center;
  columns:2; column-gap:2em;
}
.partners li{ padding:.24em 0; break-inside:avoid; }

/* ==========================================================================
   Home
   ========================================================================== */

/* Film left, identity right. The film is the widest thing on the page and the
   first thing below the menu; the mark and tagline sit beside it. */
.home-hero{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:34px; align-items:center;
  padding:30px 0;
  min-height:min(54vh, 480px);
}

.home-id{ text-align:center; }

/* Source PNG is 404x349 with the tagline baked in. Scanning the alpha channel
   puts "Seven…" ending at row 322 and the tagline at 328-348, with a clean
   5px gap between; 325 cuts through the middle of that gap. */
.home-mark{
  display:block; width:100%; max-width:268px;
  aspect-ratio:404/325; overflow:hidden;
  margin:0 auto 9px;
}
.home-mark img{ display:block; width:100%; height:auto; }

.home-tagline{
  margin:0 0 .95em;
  font:400 13px/1.35 var(--serif);
  text-transform:uppercase; letter-spacing:.11em;
  color:var(--gold-deep);
  text-wrap:balance;
}
/* balance keeps the two-line wrap from leaving a single orphan word */
.home-id .lead-red{ font-size:18px; margin-bottom:.45em; text-wrap:balance; }
.home-id .lead-white{ font-size:20px; margin-bottom:0; text-wrap:balance; }

.intro-card{
  margin:0; max-width:none;
  border:1px solid rgba(201,169,78,.45);
  background:rgba(0,0,0,.35);
  padding:12px 12px 14px;
  text-align:center;
}
.intro-card button{
  display:block; width:100%; padding:0; border:0; background:none; cursor:pointer;
  position:relative; line-height:0;
}
.intro-card img{ display:block; width:100%; }
.intro-card .play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.32); transition:background .2s var(--ease);
}
.intro-card button:hover .play,.intro-card button:focus-visible .play{ background:rgba(0,0,0,.12); }
.intro-card .play span{
  width:66px; height:66px; border-radius:50%;
  border:2px solid var(--gold); background:rgba(0,0,0,.55);
  display:grid; place-items:center;
}
.intro-card .play span::after{
  content:""; border-left:20px solid var(--gold);
  border-top:12px solid transparent; border-bottom:12px solid transparent;
  margin-left:5px;
}
.intro-card figcaption{
  margin-top:11px; font:italic 400 15px/1.4 var(--serif); color:var(--gold);
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.gal-nav{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin:0 0 22px; padding:0; list-style:none;
}
.gal-nav button{
  background:transparent; color:var(--text-dim);
  border:1px solid rgba(201,169,78,.35);
  font:400 13px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  padding:8px 13px; cursor:pointer;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.gal-nav button:hover{ color:var(--gold); border-color:var(--gold-deep); }
.gal-nav button[aria-pressed="true"]{ color:var(--ink); background:var(--gold-deep); border-color:var(--gold-deep); }

.gal-group{ margin:0 0 30px; }
.gal-group h2{
  font:400 20px/1.2 var(--serif); color:var(--gold);
  text-transform:uppercase; letter-spacing:.11em;
  text-align:left; margin:0 0 12px;
  border-bottom:1px solid rgba(201,169,78,.28); padding-bottom:7px;
}
.gal-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px;
  margin:0; padding:0; list-style:none;
}
.gal-grid button{
  display:block; width:100%; padding:0; border:0; background:none;
  cursor:pointer; line-height:0; position:relative;
}
.gal-grid img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:saturate(.92) brightness(.94);
  transition:filter .25s var(--ease), transform .25s var(--ease);
}
.gal-grid button:hover img,.gal-grid button:focus-visible img{
  filter:none; transform:scale(1.03);
}
.gal-grid li{ overflow:hidden; }

.gal-credit{
  margin-top:20px; font-size:13px; color:var(--text-dim); text-align:center;
}

/* --- lightbox ------------------------------------------------------------ */

.lb[hidden]{ display:none; }
.lb{
  position:fixed; inset:0; z-index:500;
  background:rgba(4,2,0,.94);
  display:grid; grid-template-rows:1fr auto; place-items:center;
  padding:26px;
}
.lb img{
  max-width:min(1200px,92vw); max-height:78vh;
  width:auto; height:auto; object-fit:contain;
  box-shadow:0 20px 80px rgba(0,0,0,.8);
}
.lb figcaption{
  margin-top:14px; text-align:center;
  font:400 15px/1.5 var(--serif); color:var(--gold);
}
.lb figcaption small{ display:block; color:var(--text-dim); font-size:12px; margin-top:5px; }
.lb-close,.lb-prev,.lb-next{
  position:absolute; background:rgba(0,0,0,.5); color:var(--gold);
  border:1px solid rgba(201,169,78,.4); cursor:pointer;
  width:52px; height:52px; font-size:24px; line-height:1;
  display:grid; place-items:center;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ background:var(--gold-deep); color:var(--ink); }
/* display:grid above beats the [hidden] attribute's UA display:none, so the
   arrows need this to actually disappear when the film is playing. */
.lb-prev[hidden],.lb-next[hidden]{ display:none; }

/* Shown only if a browser refuses to start the film, or forces it to mute.
   Styled to match the site so the fallback never brings back native chrome. */
.lb-resume{
  position:absolute; inset:0; z-index:20;
  display:grid; place-items:center; gap:14px;
  grid-auto-flow:row;
  background:rgba(4,2,0,.35);
  border:0; cursor:pointer; width:100%; height:100%;
  color:var(--gold); font:400 15px/1.3 var(--serif); font-style:italic;
}
.lb-resume[hidden]{ display:none; }
.lb-resume span{
  width:74px; height:74px; border-radius:50%;
  border:2px solid var(--gold); background:rgba(0,0,0,.55);
  display:grid; place-items:center;
}
.lb-resume span::after{
  content:""; border-left:22px solid var(--gold);
  border-top:13px solid transparent; border-bottom:13px solid transparent;
  margin-left:6px;
}
.lb-resume.is-sound span::after{
  content:"\1F50A"; border:0; margin:0; font-size:30px; line-height:1;
}
.lb-close{ top:18px; right:18px; }
.lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.lb-next{ right:18px; top:50%; transform:translateY(-50%); }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-cols{ display:grid; grid-template-columns:1fr 300px; gap:40px;
               align-items:start; max-width:920px; margin-inline:auto; }

.form-row{ margin:0 0 14px; }
.form-row label{
  display:block; margin-bottom:5px;
  font:italic 400 15px/1.3 var(--serif); color:var(--gold);
}
.form-row input,.form-row textarea{
  width:100%; padding:9px 11px;
  background:rgba(0,0,0,.42); color:var(--text);
  border:1px solid rgba(201,169,78,.42);
  font:400 15px/1.5 var(--sans);
}
.form-row input:focus,.form-row textarea:focus{
  outline:0; border-color:var(--gold); background:rgba(0,0,0,.62);
}
.form-row textarea{ min-height:132px; resize:vertical; }
.hp{ position:absolute; left:-9999px; }

.btn{
  display:inline-block; padding:11px 30px; cursor:pointer;
  background:transparent; color:var(--gold);
  border:1px solid var(--gold-deep);
  font:400 14px/1 var(--sans); letter-spacing:.13em; text-transform:uppercase;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.btn:hover,.btn:focus-visible{ background:var(--gold-deep); color:var(--ink); }

.map{ width:100%; aspect-ratio:248/330; border:1px solid rgba(201,169,78,.4); }

.vcard{ font-style:normal; line-height:1.8; margin:0 0 18px; }
.vcard a{ text-decoration:none; }

.form-note{ padding:12px 15px; margin:0 0 18px; border:1px solid; font-size:15px; }
.form-note--ok{ border-color:rgba(120,190,120,.6); color:#bfe6bf; background:rgba(30,70,30,.35); }
.form-note--err{ border-color:rgba(220,90,90,.6); color:#f0b8b8; background:rgba(80,20,20,.35); }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot{
  width:var(--shell); margin:0 auto; padding:18px 0 34px;
  position:relative; z-index:10;
  text-align:center;
  font:400 13px/1.9 var(--serif); color:var(--text-dim);
}
.foot a{ color:var(--gold); text-decoration:none; }
.foot a:hover{ text-decoration:underline; }
.foot .sep{ display:inline-block; margin:0 9px; vertical-align:2px; opacity:.7; }
.foot .social{ margin:0 0 10px; }
.foot .social img{ vertical-align:middle; }

/* ==========================================================================
   Tablet / mobile
   ========================================================================== */

@media (max-width:860px){
  :root{ --shell:100%; --panel-w:100%; }

  .shell{ width:100%; padding:0 0 30px; }

  .masthead{
    height:auto; display:flex; flex-wrap:wrap; align-items:center;
    justify-content:space-between; padding:14px 16px 0; gap:12px;
  }
  .brand{
    position:static; width:118px; height:83px;
    background-size:118px 83px; transition:none; flex:0 0 auto;
  }

  .nav-toggle{
    display:block; background:transparent; color:var(--gold);
    border:1px solid var(--gold-deep); cursor:pointer;
    font:400 13px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
    padding:12px 15px;
  }

  .nav{
    position:static; flex:1 0 100%; width:100%; height:auto;
    background:rgba(10,7,3,.94); border-top:3px solid var(--panel-edge);
    border-bottom:3px solid var(--panel-edge);
    margin:14px -16px 0; /* bleed to the viewport edges */
    width:calc(100% + 32px);
  }
  .nav[hidden]{ display:none; }
  .nav ul{ display:block; height:auto; }
  .nav li + li{ border-top:1px solid rgba(201,169,78,.16); }
  /* real text instead of sprites — same character, scales properly */
  .nav a{
    width:auto!important; height:auto; margin:0;
    background-image:none!important;
    text-indent:0; overflow:visible;
    padding:15px 18px; text-decoration:none;
    font:400 15px/1 var(--serif); letter-spacing:.15em; text-transform:uppercase;
    color:var(--gold); opacity:1;
  }
  .nav a[aria-current="page"]{ background:rgba(201,169,78,.15); color:#fff; }

  .panel{ box-shadow:none; background-position:right bottom; }
  .panel-inner{ padding:26px 20px 32px; background-image:none; min-height:0; }
  .panel-inner--flush{ padding-top:16px; }

  /* Stack, film first — it is still the thing to lead with on a phone. */
  .home-hero{ grid-template-columns:1fr; gap:22px; padding-top:0; }
  .home-mark{ max-width:180px; }
  .panel h1{ font-size:27px; text-align:center; }
  .panel h2{ font-size:21px; }

  .bell-pull{ display:none; }

  .lead-red{ font-size:17px; }
  .lead-white{ font-size:19px; }

  .events-list{ max-width:none; }
  .events-list td{ padding:.2em .5em; font-size:15px; }

  .ev{ grid-template-columns:1fr; gap:8px; }
  .ev-when time{ text-align:left; }
  .ev-day{ display:inline; }
  .ev-weekday{ display:inline; margin-left:8px; }
  .ev-img{ float:none; width:100%; margin:0 0 12px; }

  .gal-grid{ grid-template-columns:repeat(2,1fr); }

  .contact-cols{ grid-template-columns:1fr; gap:24px; }

  .lb{ padding:12px; }
  .lb img{ max-height:66vh; }
  .lb-prev{ left:6px; }
  .lb-next{ right:6px; }

  .foot{ width:100%; padding:16px 18px 30px; }
  .foot .sep{ margin:0 6px; }

  /* background: one image per viewport still, but shorter travel feels better */
  .bg::after{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.8) 100%);
  }
}

@media (max-width:420px){
  .gal-grid{ grid-template-columns:1fr 1fr; gap:6px; }
  .panel-inner{ padding:22px 15px 26px; }
  .panel h1{ font-size:23px; }
  body{ font-size:15px; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print{
  .bg,.nav,.nav-toggle,.bell-pull,.lb,.intro-card{ display:none!important; }
  body{ background:#fff; color:#000; }
  .panel{ background:#fff; box-shadow:none; }
  .panel h1,.panel h2{ color:#000; }
  a{ color:#000; }
}