/* Contact Sheet, Story: a sample design from Brad's mockup library, rewritten by
   scripts/import-designs.py. Do not edit; re-run that instead. */

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/big-shoulders-display-normal-33a50f8a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/big-shoulders-display-normal-33a50f8a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/big-shoulders-display-normal-33a50f8a.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-01c04f4d.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-normal-5778b1a2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-normal-1cb706d6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-normal-1cb706d6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-normal-1cb706d6.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
h1, h2, h3 { text-wrap:balance; margin:0; font-weight:inherit; }
p { text-wrap:pretty; margin:0; }
ul, ol { margin:0; padding:0; list-style:none; }
figure { margin:0; }
dl, dd { margin:0; }
button { font:inherit; color:inherit; cursor:pointer; }
fieldset { border:0; margin:0; padding:0; min-width:0; }
[hidden] { display:none !important; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Headers placed over a photo sit within .page, not the window, so anything a host adds above
   the page (the Shift & Shine sample bar) pushes them down instead of hiding under them. */
.page { position:relative; overflow-x:clip; }
.skip { position:absolute; left:12px; top:12px; z-index:100; padding:10px 14px; background:#fff; color:#111; }
.skip:not(:focus) { width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.js-reveal [data-reveal]:not(.in) { opacity:0; transform:translateY(28px); }
[data-reveal] { transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; }
.demo-form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.demo-form .field { display:grid; gap:6px; min-width:0; }
.demo-form .wide { grid-column:1 / -1; }
.demo-form input, .demo-form select, .demo-form textarea { font:inherit; width:100%; min-width:0; }
@media (max-width:640px) { .demo-form { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

:root { --paper:#F3F1EC; --ink:#121212; --muted:#55514B; --red:#C42419; --dark:#141414; --edge:#F2B33D; --line:#D9D5CD; }
body { background:var(--paper); color:var(--ink); font:400 16.5px/1.6 "IBM Plex Sans", system-ui, sans-serif; }
.mono { font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.hd { position:absolute; top:0; left:0; right:0; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px clamp(16px, 3vw, 36px); border-bottom:1px solid var(--line); background:rgba(243,241,236,.9); }
.nm { font:800 21px/1 "Big Shoulders Display", sans-serif; letter-spacing:.06em; text-decoration:none; }
.hd ul { display:flex; gap:clamp(12px, 2vw, 28px); }
.hd nav a { text-decoration:none; font-size:14.5px; }
.hd nav a:hover { color:var(--red); }
.avail { display:flex; align-items:center; gap:8px; font-size:13.5px; }
.avail span { width:9px; height:9px; border-radius:50%; background:var(--red); }
.hero { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr) 120px; gap:clamp(20px, 3vw, 40px); padding:96px clamp(16px, 3vw, 36px) 48px; min-height:min(100svh, 940px); align-items:stretch; }
.hero-name { display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.hero h1 { font:900 clamp(60px, 6.3vw, 116px)/.86 "Big Shoulders Display", sans-serif; text-transform:uppercase; letter-spacing:-.01em; }
.hero h1 span { display:block; }
.hero h1 span + span { color:var(--red); }
.role { font-weight:500; font-size:19px; margin-top:16px; }
.meta { display:grid; gap:4px; color:var(--muted); }
.intro { color:var(--muted); max-width:30em; }
.reveal { position:relative; overflow:hidden; background:#ccc; min-height:460px; touch-action:pan-y; }
.reveal .base { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08); transition:filter 1s ease; }
.reveal.color .base { filter:none; }
.reveal canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.reveal figcaption { position:absolute; left:0; right:0; bottom:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:14px 16px; background:linear-gradient(transparent, rgba(0,0,0,.72)); color:#fff; }
.reveal .hint { font-size:14px; flex:1; min-width:12em; }
.colorbtn { border:1px solid rgba(255,255,255,.7); background:rgba(0,0,0,.35); color:#fff; padding:9px 14px; font-size:14px; }
.colorbtn[aria-pressed="true"] { background:#fff; color:var(--ink); }
.stats { display:flex; flex-direction:column; justify-content:flex-end; gap:22px; border-left:1px solid var(--line); padding-left:18px; }
.stats dt { color:var(--muted); }
.stats dd { font:900 54px/1 "Big Shoulders Display", sans-serif; letter-spacing:0; }
section { padding:clamp(72px, 9vw, 120px) clamp(16px, 3vw, 36px); }
.sec-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:8px 24px; align-items:end; border-top:3px solid var(--ink); padding-top:18px; margin-bottom:40px; }
.sec-head .kicker { grid-row:1; color:var(--red); }
.sec-head h2 { grid-column:1 / -1; font:900 clamp(44px, 6.4vw, 104px)/.9 "Big Shoulders Display", sans-serif; text-transform:uppercase; }
.sec-head .sub { grid-column:2; color:var(--muted); max-width:34em; }
.route-wrap { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); gap:clamp(20px, 3vw, 40px); align-items:start; }
.map { position:relative; background:#ECE9E2; border:1px solid var(--line); }
.map svg { display:block; width:100%; height:auto; }
.grat line { stroke:#CFCAC0; stroke-width:1; stroke-dasharray:2 5; }
.lat text { font:11px "IBM Plex Mono", monospace; fill:#5A564E; }
.trail { fill:none; stroke:#C9C3B7; stroke-width:2; stroke-dasharray:3 7; }
.line { fill:none; stroke:var(--red); stroke-width:3; stroke-linecap:round; }
.pt { fill:var(--paper); stroke:var(--red); stroke-width:3; transition:fill .3s; }
.pt.on { fill:var(--red); }
.home { fill:var(--ink); }
.lbl { font:600 15px "IBM Plex Sans", sans-serif; fill:var(--ink); }
.stop { position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%); transform:translate(-50%, -150%); border:0; background:var(--ink); color:var(--paper); font:500 12px "IBM Plex Mono", monospace; padding:5px 7px; min-width:34px; min-height:28px; opacity:0; transition:opacity .4s, background .2s; }
.stop.lit { opacity:1; }
.stop.at-left { transform:translate(-125%, -125%); }
.stop.at-below { transform:translate(40%, -50%); }
.stop[aria-pressed="true"], .stop:hover { background:var(--red); }
.stoplist { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.stoplist button { border:1px solid var(--ink); background:transparent; padding:8px 12px; font-size:14.5px; }
.stoplist button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.stoplist .mono { font-size:11.5px; }
.pane { display:grid; gap:14px; }
.pane img { aspect-ratio:3/2; width:100%; object-fit:cover; }
.pane h3 { font:800 34px/1 "Big Shoulders Display", sans-serif; text-transform:uppercase; margin-top:6px; }
.pane .mono { color:var(--red); }
.pane a { display:inline-block; margin-top:8px; font-weight:500; }
.again { margin-top:18px; border:0; background:none; text-decoration:underline; padding:8px 0; color:var(--muted); }
.stack { display:grid; gap:40px; }
.story { position:sticky; }
.story:nth-child(1) { top:calc(76px + 0px); }
.story:nth-child(2) { top:calc(76px + 14px); }
.story:nth-child(3) { top:calc(76px + 28px); }
.story:nth-child(4) { top:calc(76px + 42px); }
.story:nth-child(5) { top:calc(76px + 56px); }
.story:nth-child(6) { top:calc(76px + 70px); }

.story article { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); background:var(--paper); border:1px solid var(--ink); box-shadow:0 -18px 40px rgba(0,0,0,.08); min-height:min(76vh, 640px); }
.story figure { overflow:hidden; }
.story img { width:100%; height:100%; object-fit:cover; }
.st-txt { padding:clamp(20px, 3vw, 40px); display:flex; flex-direction:column; gap:14px; }
.big-no { font:900 clamp(80px, 10vw, 150px)/.8 "Big Shoulders Display", sans-serif; color:var(--red); }
.st-txt h3 { font:800 clamp(32px, 3.4vw, 50px)/.95 "Big Shoulders Display", sans-serif; text-transform:uppercase; }
.where { color:var(--muted); }
.story-link { font-weight:600; color:var(--red); width:max-content; }
.fcount { margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.sheet { background:var(--dark); color:#EDEAE4; }
.sheet .sec-head { border-color:#EDEAE4; }
.sheet .sec-head .kicker { color:var(--edge); }
.sheet .sec-head .sub { color:#B9B4AB; }
.frames { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:26px 14px; padding:18px; background:#0B0B0B; }
.fr { position:relative; display:block; width:100%; padding:0; border:0; background:none; }
.fr img { aspect-ratio:3/2; width:100%; object-fit:cover; transition:filter .3s, transform .3s; }
.fr:hover img, .fr:focus-visible img { transform:scale(1.02); }
.edge { position:absolute; left:4px; bottom:-21px; color:var(--edge); font-size:11px; letter-spacing:.1em; }
.grease { position:absolute; inset:-14% -10%; width:120%; height:128%; fill:none; stroke:#E5281E; stroke-width:2.4; stroke-linecap:round; pointer-events:none; }
.plist { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
.plist li { display:grid; gap:8px; align-content:start; }
.mat { background:#fff; padding:14px; border:1px solid var(--line); box-shadow:0 10px 30px rgba(0,0,0,.08); }
.mat img { aspect-ratio:4/5; width:100%; object-fit:cover; }
.plist h3 { font:800 26px/1 "Big Shoulders Display", sans-serif; text-transform:uppercase; margin-top:8px; }
.plist .mono { color:var(--muted); }
.price { font-weight:600; }
.ask { font-weight:500; }
.about { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(24px, 4vw, 64px); align-items:end; border-top:3px solid var(--ink); }
.about h2 { font:900 clamp(48px, 6.8vw, 110px)/.88 "Big Shoulders Display", sans-serif; text-transform:uppercase; }
.about p { font-size:19px; }
.about p.clients { margin-top:20px; color:var(--muted); font-size:12.5px; }
.contact .sub a { color:var(--red); font-size:20px; font-weight:500; }
.demo-form { max-width:980px; }
.demo-form label { font-size:14px; font-weight:500; }
.demo-form input, .demo-form select, .demo-form textarea { padding:13px; border:1px solid var(--ink); border-radius:0; background:#fff; color:var(--ink); }
.demo-form button { justify-self:start; padding:15px 26px; border:0; background:var(--red); color:#fff; font-weight:600; font-size:16px; }
.form-out { color:var(--red); min-height:1.4em; }
.lb { border:0; padding:0; background:transparent; max-width:min(1200px, 94vw); width:100%; color:#fff; }
.lb::backdrop { background:rgba(10,10,10,.92); }
.lb img { max-height:78vh; width:auto; max-width:100%; margin:0 auto; }
.lb figcaption { text-align:center; margin-top:12px; color:#D8D4CC; }
.lb-ctl { display:flex; justify-content:center; gap:10px; margin-top:16px; }
.lb-ctl button { border:1px solid rgba(255,255,255,.5); background:transparent; color:#fff; padding:10px 16px; }
.ft { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:24px clamp(16px, 3vw, 36px); border-top:1px solid var(--line); color:var(--muted); }
@media (max-width:1100px) { .hd nav { display:none; } }
@media (max-width:980px) {
  .hero { grid-template-columns:1fr; }
  .reveal { min-height:0; aspect-ratio:4/3; }
  .stats { flex-direction:row; border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:16px; justify-content:flex-start; gap:36px; }
  .route-wrap { grid-template-columns:1fr; }
  .plist { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .frames { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:720px) {
  .story { position:static; }
  .story article { grid-template-columns:1fr; min-height:0; }
  .story figure { aspect-ratio:4/3; }
  .sec-head { grid-template-columns:1fr; } .sec-head .sub { grid-column:1; }
  .about { grid-template-columns:1fr; }
  .avail { font-size:12px; }
  .stop { display:none; }
}
@media (max-width:520px) {
  .frames { grid-template-columns:repeat(2, minmax(0,1fr)); padding:12px; }
  .plist { grid-template-columns:1fr; }
  .avail { display:none; }
}

.st-hero { position:relative; min-height:min(92svh, 860px); display:flex; align-items:flex-end; padding:0; }
.st-hero figure { position:absolute; inset:0; }
.st-hero img { width:100%; height:100%; object-fit:cover; }
.st-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(0,0,0,.7)); }
.st-title { position:relative; z-index:1; padding:0 clamp(16px, 3vw, 36px) clamp(28px, 4vw, 48px); color:#fff; display:grid; gap:12px; }
.st-title h1 { font:900 clamp(56px, 9vw, 150px)/.86 "Big Shoulders Display", sans-serif; text-transform:uppercase; max-width:12ch; }
.st-title .kicker { color:#FFD7D2; }
.back { color:#fff; text-decoration:none; }
.back:hover { text-decoration:underline; }
.standfirst { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(24px, 4vw, 64px); align-items:start; }
.standfirst .big { font-size:clamp(22px, 2.4vw, 34px); line-height:1.3; }
.st-meta { display:grid; gap:0; border-top:3px solid var(--ink); }
.st-meta div { display:grid; grid-template-columns:110px 1fr; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.st-meta dt { color:var(--muted); }
.essay-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px; border-top:3px solid var(--ink); padding-top:18px; margin-bottom:32px; }
.essay-head h2 { font:900 clamp(40px, 5vw, 80px)/.9 "Big Shoulders Display", sans-serif; text-transform:uppercase; }
.views { display:inline-flex; border:1px solid var(--ink); }
.views button { border:0; background:transparent; padding:10px 16px; font-size:14.5px; }
.views button + button { border-left:1px solid var(--ink); }
.views button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.seq { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:clamp(20px, 3vw, 48px); align-items:start; }
.cap { position:sticky; top:calc(var(--ssd-bar, 0px) + 96px); display:grid; gap:12px; padding-top:6px; }
.cap .mono:first-child { color:var(--red); }
.cap-t { font-size:20px; line-height:1.4; }
.cap-m { color:var(--muted); }
.photos { display:grid; gap:clamp(40px, 8vh, 90px); }
.photos figure { display:grid; gap:10px; }
.photos img { width:100%; transition:filter .5s; }
.photos figcaption { display:none; font-size:15px; color:var(--muted); }
.photos li:not(.on) img { filter:grayscale(.6) brightness(.95); }
.essay.as-sheet .seq { grid-template-columns:1fr; }
.essay.as-sheet .cap { display:none; }
.essay.as-sheet .photos { grid-template-columns:repeat(3, minmax(0,1fr)); gap:26px 14px; background:var(--dark); padding:18px; }
.essay.as-sheet .photos img { aspect-ratio:3/2; object-fit:cover; filter:none; }
.essay.as-sheet .photos figcaption { display:block; color:#B9B4AB; font-size:13px; }
.essay.as-sheet .photos figcaption .mono { color:var(--edge); }
.nlist { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.nlist h3 { font:800 30px/1 "Big Shoulders Display", sans-serif; text-transform:uppercase; margin-bottom:10px; }
.nlist p { color:var(--muted); }
.print-cta { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; padding-block:36px; border-block:1px solid var(--line); margin-inline:clamp(16px, 3vw, 36px); padding-inline:0; font-size:19px; }
.next { padding:clamp(56px, 7vw, 100px) clamp(16px, 3vw, 36px); }
.next a { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; text-decoration:none; border-top:3px solid var(--ink); padding-top:18px; }
.next span { font:500 12.5px "IBM Plex Mono", monospace; text-transform:uppercase; letter-spacing:.04em; color:var(--red); }
.next b { font:900 clamp(44px, 7vw, 110px)/.9 "Big Shoulders Display", sans-serif; text-transform:uppercase; }
.next .arr { width:clamp(28px, 4vw, 54px); height:clamp(28px, 4vw, 54px); fill:none; stroke:currentColor; stroke-width:2; align-self:center; }
.next a:hover b { color:var(--red); }
@media (max-width:860px) {
  .standfirst, .seq { grid-template-columns:1fr; }
  .cap { display:none; }
  .photos figcaption { display:block; }
  .photos li:not(.on) img { filter:none; }
  .nlist { grid-template-columns:1fr; }
  .essay.as-sheet .photos { grid-template-columns:repeat(2, minmax(0,1fr)); }
}


/* ---------- Shift & Shine sample bar (scripts/import-designs.py) ---------- */
@font-face { font-family: "SSD Geist"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); }
:root { --ssd-bar: 53px; scroll-padding-top: var(--ssd-bar); }
.ssd-bar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 8px 14px; margin: 0; padding: 8px clamp(14px, 3vw, 28px); background: #0F1B1B; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.86); font: 400 13.5px/20px "SSD Geist", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-align: left; text-transform: none; }
.ssd-bar .ssd-bar-text { flex: 1; margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: 0; max-width: none; }
.ssd-bar a { color: #FFFFFF; text-decoration: none; }
.ssd-bar .ssd-bar-home { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 -8px 0 -10px; border-radius: 6px; }
.ssd-bar .ssd-bar-home svg { display: block; width: 15px; height: 16px; }
.ssd-bar .ssd-bar-back { display: inline-flex; flex: none; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; font: 500 13.5px/1 "SSD Geist", "Helvetica Neue", Arial, sans-serif; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.ssd-bar .ssd-bar-back:hover { background: #FFFFFF; color: #0F1B1B; }
.ssd-bar a:focus-visible { outline: 3px solid #5AD7D7; outline-offset: 2px; }
/* Fingers get the full 44px. */
@media (pointer: coarse) { .ssd-bar .ssd-bar-back { min-height: 44px; } .ssd-bar .ssd-bar-home { width: 44px; height: 44px; margin: 0 -12px 0 -14px; } }
/* Line heights in whole pixels, so the bar is too, and the sample under it
   doesn't land on half pixels. */
@media (max-width: 520px) { :root { --ssd-bar: 71px; } .ssd-bar { font-size: 12.5px; line-height: 18px; } }