/* Tina Morgan portfolio v3 — built from Figma "New Website Again", frame "Rough Wire" (27:62). */
/* Fonts are self-hosted (DM Sans, DM Serif Display; SIL Open Font License) so no visitor data goes to Google. */
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/dm-sans-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/dm-sans-italic-latin.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:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/dm-sans-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/dm-sans-normal-latin.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:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/dm-serif-display-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/dm-serif-display-italic-latin.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:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/dm-serif-display-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/dm-serif-display-normal-latin.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}

:root{
  --ink:#1a1a1a;
  --text-2:#4a4a4a;
  --muted:#6b6b6b;          /* Figma's #8a8a8a fails 4.5:1 on the light grounds */
  --paper:#faf8f5;
  --paper-2:#f5f3f0;
  --field-border:#8a8a8a;   /* 3.3:1 on paper — enough for a control edge */
  --night:#000;
  --caption:#8a8a8a;        /* on black: 6.1:1 */

  --band:#e8eaf4;
  --band-muted:#4a4a4a;     /* 5.3:1 on pink */

  --serif:'DM Serif Display', Georgia, serif;
  --sans:'DM Sans', system-ui, sans-serif;

  --gutter:80px;
  --section-y:120px;

  /* Type: Figma sizes, adjusted so the hero outranks section statements
     and the small text is readable. */
  --fs-hero:72px;
  --fs-section:52px;
  --track-section:-1px;
  --fs-title:36px;
  --fs-label:20px;
  --fs-body:17px;
  --fs-small:15px;
  --fs-eyebrow:13px;
  --fs-caption:12px;
  --fs-phone-name:26px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.nowrap{white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- type ---- */
.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fs-section);
  line-height:1.05;
  letter-spacing:var(--track-section);
  margin:0;
}
.display-hero{font-size:var(--fs-hero);letter-spacing:0;line-height:1.1;max-width:14.5em}
.hero-today{display:block;margin-top:1.1em}
.eyebrow{
  margin:0 0 12px;
  font-size:var(--fs-eyebrow);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--muted);
}
.band .eyebrow{color:var(--band-muted)}

/* ---- top bar + menu ---- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:24px var(--gutter);
  background:var(--paper);
}
.wordmark{font-family:var(--serif);font-size:24px;line-height:1}
.menu-button{
  display:grid;place-items:center;
  width:48px;height:48px;margin-right:-12px;
  background:none;border:0;border-radius:4px;cursor:pointer;color:var(--ink);
}
.menu-bars,.menu-bars::before,.menu-bars::after{
  display:block;width:24px;height:2px;background:currentColor;border-radius:1px;
}
.menu-bars{position:relative}
.menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0}
.menu-bars::before{top:-7px}
.menu-bars::after{top:7px}

/* Menu: a white panel from the right; full width on phones. */
.menu{
  width:min(420px,100%);height:100%;max-width:none;max-height:none;
  margin:0 0 0 auto;padding:24px 48px;border:0;
  background:var(--paper);color:var(--ink);
  box-shadow:-8px 0 40px rgba(0,0,0,.12);
}
.menu::backdrop{background:rgba(0,0,0,.35)}
.menu:focus{outline:none}
.menu[open]{display:flex;flex-direction:column}
@media (prefers-reduced-motion:no-preference){.menu[open]{animation:menu-in .25s ease-out}}
@keyframes menu-in{from{transform:translateX(40px);opacity:0}}
.menu-top{display:flex;justify-content:flex-end;align-items:center;min-height:48px}
.menu-close{
  font:600 var(--fs-small)/1 var(--sans);color:var(--ink);
  background:none;border:0;padding:0 4px;min-height:48px;cursor:pointer;
}
.menu-nav{display:flex;flex-direction:column;gap:12px;margin:48px 0 auto}
.menu-nav a{font-family:var(--serif);font-size:var(--fs-section);line-height:1.1}
.menu-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}

/* ---- bands ---- */
.band{background:var(--band)}
.hero{padding:var(--section-y) var(--gutter)}
/* Home hero sits tight on the artwork so the answer to "Today, she is excited about:" is on the first screen. */
.hero-home{padding-top:24px;padding-bottom:56px}
/* Home: the top bar is part of the pink hero and carries no wordmark — the headline names her. */
.home .topbar{background:var(--band);justify-content:flex-end}

/* ---- artwork of the day ---- */
.artwork{
  background:var(--night);
  padding:48px var(--gutter) 80px;
  display:flex;justify-content:center;
}
.artwork-figure{margin:0;width:min(828px,100%);display:flex;flex-direction:column;align-items:center}
/* Fixed box so portrait and landscape works take the same space. */
.artwork-frame{display:block;width:100%;height:min(561px,58vh)}
.artwork-frame:hover{text-decoration:none}
.artwork-frame img{width:100%;height:100%;object-fit:contain}
.caption{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding-top:24px;
  font-size:var(--fs-caption);font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--caption);
  text-align:center;
}
.caption [hidden]{display:none}

/* ---- sections ---- */
.section{padding:var(--section-y) var(--gutter)}
.section-head{margin-bottom:64px}

/* ---- work cards ---- */
.row-label{font-size:var(--fs-label);font-weight:600;line-height:1.3}
.row-text{color:var(--text-2)}
.cards{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
}
.card-link{display:flex;flex-direction:column;gap:6px}
.card-link:hover{text-decoration:none}
.card-link:hover .row-label{text-decoration:underline;text-underline-offset:3px}
.card-thumb{
  aspect-ratio:4/3;overflow:hidden;border-radius:4px;
  background:var(--paper-2);
  margin-bottom:14px;
}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card-link:hover .card-thumb img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.card-thumb img{transition:none}}

/* ---- phones ---- */
.phones{display:flex;justify-content:center;gap:48px;flex-wrap:wrap}
.phone{margin:0;width:300px}
.phone-screen{
  background:var(--ink);
  padding:10px;
  border-radius:40px;
  filter:drop-shadow(0 16px 20px rgba(30,30,30,.09));
}
.phone-screen img,.phone-screen video{
  display:block;width:100%;aspect-ratio:419/910;object-fit:cover;
  border-radius:30px;
}
.phone-screen{position:relative}
.phone-screen video{cursor:pointer}
/* Play button over the still frame; hidden while the video plays. */
.phone-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:72px;height:72px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(26,26,26,.78);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
  transition:background .2s ease,transform .2s ease;
}
.phone-play:hover{background:rgba(26,26,26,.92);transform:translate(-50%,-50%) scale(1.05)}
.phone-play span{
  width:0;height:0;margin-left:5px;
  border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent currentColor;
}
.phone-screen.is-playing .phone-play{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.phone-play{transition:none}}
.phone figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:20px;text-align:center}
.phone-name{font-family:var(--serif);font-size:var(--fs-phone-name);line-height:1.2}
.phone-note{font-size:var(--fs-small);color:var(--band-muted)}
.phone-link{margin-top:10px;font-size:var(--fs-small)}
.phone-screen-link{display:block;transition:transform .2s ease}
.phone-screen-link:hover{text-decoration:none;transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.phone-screen-link{transition:none}.phone-screen-link:hover{transform:none}}

/* ---- contact ---- */
.contact-actions{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;text-decoration:none}
.button{
  font:600 var(--fs-body)/1 var(--sans);
  color:var(--paper);background:var(--ink);
  border:0;border-radius:999px;
  padding:0 28px;min-height:48px;cursor:pointer;
}
.button:hover{background:#333;text-decoration:none}

/* ---- case studies page ---- */
.case-intro .display{max-width:1152px}
/* Head and text columns hold Figma's 442 / 646 split. Once the content area is
   wider than 1152 they stop growing and the gap takes the rest, so the rows span
   the same 1280 as the home page and sit centred on wide screens. */
.case{
  display:grid;grid-template-columns:minmax(0,442fr) minmax(0,646fr);gap:64px;
  padding:var(--section-y) var(--gutter);
  scroll-margin-top:0;
}
@media (min-width:1312px){
  .case{grid-template-columns:442px 646px;justify-content:space-between}
}
.case:nth-of-type(even){background:var(--paper-2)}
.case-head{align-self:start;position:sticky;top:32px}
.case-title{font-family:var(--serif);font-weight:400;font-size:var(--fs-title);line-height:1.1;margin:0 0 28px}
.case-thumb{aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--paper-2)}
.case-thumb img{width:100%;height:100%;object-fit:cover}
.case-title-italic{font-style:italic}
/* Writing page: excerpts are short, so the text starts level with the picture
   instead of the small label above the title. */
@media (min-width:1101px){
  .writing-page .case{row-gap:0}
  .writing-page .case-head{display:contents}
  .writing-page .case-head > .eyebrow{grid-column:1;grid-row:1}
  .writing-page .case-title{grid-column:1;grid-row:2}
  .writing-page .case-thumb{grid-column:1;grid-row:3;align-self:start}
  .writing-page .case > .prose{grid-column:2;grid-row:3;align-self:start}
}
.prose{max-width:38em}
.prose p{margin:0 0 1.1em}
.quote{margin:48px 0 0}
.quote blockquote{margin:0}
.quote blockquote p{font-family:var(--serif);font-size:26px;line-height:1.3;margin:0}
.quote figcaption{margin-top:20px;font-size:var(--fs-small);color:var(--text-2)}
.quote figcaption strong{display:block;color:var(--ink);font-weight:600}

/* ---- writing reader ---- */
.reader{padding:64px var(--gutter) var(--section-y)}
.reader-head{max-width:1000px;margin:0 auto 40px}
.reader-back{display:inline-block;margin-bottom:32px;font-size:var(--fs-small);font-weight:600}
.reader-head .case-title{margin:0}
.reader-page{margin:0 auto;max-width:1000px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.06)}
.reader-page img{width:100%;height:auto}

/* ---- placeholders + links ---- */
.placeholder{
  display:grid;place-items:center;
  background:var(--paper-2);
  border:1px dashed var(--field-border);
  color:var(--muted);font-size:var(--fs-small);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.case:nth-of-type(even) .placeholder{background:var(--paper)}
.text-link{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* ---- about page ---- */
.bio{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start;
  padding:var(--section-y) var(--gutter);
}
.bio-photo{aspect-ratio:4/5;border-radius:4px;overflow:hidden}
.bio-photo img{width:100%;height:100%;object-fit:cover}
.bio-text .display{margin-bottom:40px}

/* ---- footer ---- */
.footer{
  display:flex;align-items:center;gap:32px;
  background:var(--paper-2);
  padding:28px var(--gutter);
}
.footer-links{display:flex;gap:24px;font-size:var(--fs-small);color:var(--text-2)}
.footer-legal{margin:0 0 0 auto;font-size:var(--fs-caption);color:var(--muted)}

/* ---- responsive ---- */
@media (max-width:1100px){
  :root{
    --gutter:48px;--section-y:96px;
    --fs-hero:56px;--fs-section:42px;--fs-title:30px;
  }
  .cards{grid-template-columns:repeat(2,1fr)}
  .artwork-frame{height:clamp(260px,55vw,561px)}
  .case{grid-template-columns:1fr;gap:32px}
  .case-head{position:static}
  .case-thumb{max-width:420px}
  .bio{grid-template-columns:1fr;gap:40px}
  .bio-photo{max-width:420px}
}
@media (max-width:640px){
  :root{
    --gutter:16px;--section-y:64px;
    --fs-hero:38px;--fs-section:30px;--track-section:-.5px;--fs-title:28px;
    --fs-label:18px;--fs-body:16px;
  }
  .topbar{padding:12px var(--gutter)}
  .menu{padding:12px 24px}
  .wordmark{font-size:20px}
  .hero-home{padding-top:16px;padding-bottom:40px}
  .artwork{padding:32px var(--gutter) 40px}
  .artwork-frame{height:clamp(220px,90vw,420px)}
  .caption{flex-direction:column}
  .section-head{margin-bottom:40px}
  .cards{grid-template-columns:1fr 1fr;gap:28px 16px}
  .phones{gap:40px}
  .phone{width:min(260px,100%)}
  .quote blockquote p{font-size:21px}
  .footer{flex-wrap:wrap;gap:12px 24px;padding:24px var(--gutter)}
}

/* ---- wide screens: content stops at 1280px and centres ---- */
@media (min-width:1441px){
  :root{--gutter:max(80px, calc((100vw - 1440px) / 2 + 80px))}
}


/* ==========================================================================
   FINISHING — 2026-09-20
   Craft pass applied site-wide. No layout, no colour decision, no type size
   and no copy changes: shadow model · ground gradation · radius discipline ·
   display tracking · edges · states. Contrast was re-checked against both
   ends of every new gradient; the lowest pair is 5.07:1.
   ========================================================================== */

:root{
  /* Shadows are built from a tight contact shadow plus a wide soft one, and
     are tinted to the ground they fall on — a plum-black over the pink, a
     warm neutral over the paper. Pure black shadow on a coloured ground is
     what makes a page read as printed-on rather than lit. */
  --sh-plum:58,24,40;
  --sh-warm:44,36,32;
  --shadow-1:0 1px 1px rgba(var(--sh-warm),.07), 0 2px 6px rgba(var(--sh-warm),.06);
  --shadow-2:0 2px 3px rgba(var(--sh-warm),.09), 0 10px 24px rgba(var(--sh-warm),.09);
  --shadow-3:0 3px 6px rgba(var(--sh-warm),.12), 0 20px 48px rgba(var(--sh-warm),.13);
  --shadow-plum-3:0 3px 6px rgba(var(--sh-plum),.14), 0 22px 50px rgba(var(--sh-plum),.16);

  --edge:inset 0 0 0 1px rgba(26,20,22,.07);
  --edge-light:inset 0 0 0 1px rgba(255,255,255,.08);

  /* One curve and one duration for every state change on the site. */
  --ease:cubic-bezier(.2,.6,.3,1);
  --dur:240ms;

  /* Radius tracks size: small things 3px, large plates nearly square. */
  --r-sm:3px;
  --r-plate:2px;

  /* Grounds gain a 2–3% gradation. The pink starts LIGHTER than --band and
     arrives at exactly --band, so nothing on that band loses contrast. */
  --band-top:#edeff8;
  --band-bottom:#e8eaf4;
  --paper-top:#fbf9f7;
  --paper-bottom:#f7f4f0;
  --grain: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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---- type finishing: same family, same sizes ---- */
body{font-feature-settings:"kern" 1,"liga" 1}
/* DM Serif wants about -0.02em once it is over ~40px. Set in em so it holds
   at every breakpoint instead of being re-guessed at each one. */
.display{letter-spacing:-.02em}
.display-hero{letter-spacing:-.021em}
.menu-nav a{letter-spacing:-.02em}
.case-title,.reader-head .case-title{letter-spacing:-.015em}
.quote blockquote p{letter-spacing:-.01em}
.display,.display-hero,.case-intro .display,.card .row-text{text-wrap:balance}
/* Uppercase at 12–13px needs air in proportion to how small it is. */
.eyebrow{letter-spacing:.09em}
.caption{letter-spacing:.085em;line-height:1.45}
.placeholder{letter-spacing:.09em}
.row-label{letter-spacing:-.005em}

/* ---- grounds ---- */
body{background:var(--paper-bottom)}
.band{background:linear-gradient(var(--band-top),var(--band-bottom));position:relative}
.home .topbar{background:var(--band-top)}      /* the top of the same ramp, so no seam */
body:not(.home) .topbar{background:var(--paper-top)}
.section:not(.band):not(.artwork),
.bio,.reader{
  background:linear-gradient(var(--paper-top),var(--paper-bottom));
  position:relative;
}
.case{background:linear-gradient(var(--paper-top),var(--paper-bottom));position:relative}
.case:nth-of-type(even){background:linear-gradient(#f6f3f0,#f1eeea)}

/* Grain over the ground, under the content. The layer sits at z-index -1
   inside a stacking context of its own, so it paints above the section's
   background but below everything in the flow — without positioning the
   children, which would have overridden the sticky .case-head. */
.band,.section,.case,.bio,.reader,.artwork{isolation:isolate}
.band::before,
.section:not(.band):not(.artwork)::before,
.case::before,.bio::before,.reader::before,
.artwork::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:var(--grain);background-size:160px 160px;
  opacity:.035;
}

/* The black band gets depth rather than gradation: a lift behind the picture,
   so it reads as a lit space instead of a black rectangle. */
.artwork{
  background:radial-gradient(120% 90% at 50% 38%, #171717 0%, #0a0a0a 55%, #000 100%);
  position:relative;
}
.artwork::before{opacity:.05;mix-blend-mode:screen}

/* ---- the artwork, mounted ---- */
.artwork-frame{border-radius:var(--r-plate)}
.artwork-frame img{
  border-radius:var(--r-plate);
  box-shadow:
    0 2px 4px rgba(0,0,0,.5),
    0 18px 50px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.10);
}

/* ---- pictures get an edge so they stop floating ---- */
.card-thumb,.case-thumb,.bio-photo{
  border-radius:var(--r-sm);
  box-shadow:var(--shadow-1),var(--edge);
}
.card-thumb img,.case-thumb img,.bio-photo img{border-radius:var(--r-sm)}
.card-thumb{transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card-link:hover .card-thumb{box-shadow:var(--shadow-2),var(--edge);transform:translateY(-2px)}
.card-thumb img{transition:transform 600ms var(--ease)}
.card-link:hover .card-thumb img{transform:scale(1.035)}
.row-label{transition:color var(--dur) var(--ease)}
.card-link:hover .row-label{color:#000}

/* ---- phones: shadow tinted to the pink they sit on ---- */
.phone-screen{filter:none;box-shadow:var(--shadow-plum-3),var(--edge-light)}
.phone-screen-link{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.phone-screen-link:hover{box-shadow:var(--shadow-plum-3),0 30px 60px rgba(var(--sh-plum),.2)}
.phone-play{
  box-shadow:0 2px 6px rgba(0,0,0,.3),0 10px 26px rgba(0,0,0,.28);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}

/* ---- the reader page is a sheet of paper; give it real weight ---- */
.reader-page{box-shadow:var(--shadow-3),var(--edge)}

/* ---- the menu panel ---- */
.menu{box-shadow:var(--shadow-3),-1px 0 0 rgba(26,20,22,.08)}

/* ---- controls and states ---- */
.button{
  box-shadow:var(--shadow-1);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.button:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.button:active{transform:translateY(1px);box-shadow:var(--shadow-1)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.text-link{
  text-decoration-color:rgba(26,26,26,.35);
  transition:text-decoration-color var(--dur) var(--ease);
}
.text-link:hover{text-decoration-color:currentColor}

/* ---- footer gets the one edge it needs ---- */
.footer{
  background:linear-gradient(var(--paper-bottom),#f2efeb);
  box-shadow:inset 0 1px 0 rgba(26,20,22,.07);
}

@media (prefers-reduced-motion:reduce){
  .card-thumb,.card-thumb img,.button,.phone-screen-link,.phone-play,.row-label,.text-link{transition:none}
  .card-link:hover .card-thumb,.card-link:hover .card-thumb img,.button:hover{transform:none}
}

/* ---- Desk Lunch: set as text, not a screenshot (read.html#piece-desk-lunch) ---- */
.reader-page.reader-text{max-width:760px;background:#f7f3f0}
.dl{padding:56px clamp(24px,6vw,56px) 80px;max-width:none;margin:0 auto;color:#222;font:17px/1.75 Georgia,"Times New Roman",serif}
.reader-page .dl-cover{display:block;width:220px;height:auto;margin:0 auto 40px;box-shadow:0 2px 6px rgba(0,0,0,.08),0 12px 32px rgba(0,0,0,.1)}
.dl-title{margin:0 0 12px;text-align:center;font:700 clamp(28px,5vw,38px)/1.15 "Helvetica Neue",Arial,sans-serif;letter-spacing:-.01em;color:#1a1a1a}
.dl-byline{margin:0 0 48px;text-align:center;font-style:italic;font-size:15px;color:#555}
.dl-body p{margin:0 0 1.2em}
.dl-body h3{margin:1.8em 0 0;font:700 17px/1.75 Georgia,"Times New Roman",serif}
.dl-lede::first-letter{float:left;font:700 64px/.85 "Helvetica Neue",Arial,sans-serif;margin:6px 10px 0 0}

/* Museum Heist landing: no name in the top bar, bar shares the band's ground */
.topbar{background:var(--band-top)!important;justify-content:flex-end}