/* CASA DEL PADRE STUDIO — link in bio
   Dark, minimal, cinematic. White on near-black; no gold, no colour in the
   header. Platform brand colours appear only in the link sheet, where they
   help people find their service. */

/* Playfair Display, subset to Latin — the label's display face.
   Roman only: there is no true italic in the subset, so never set
   font-style:italic on it. Faux-slanting a Didone looks wrong. */
@font-face{
  font-family:'MTL Display';
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/playfair-display-latin.woff2) format('woff2');
}

:root{
  --bg:#08080a; --bg2:#0e0e11; --line:#1e1e22;
  --fg:#f4f1ea; --muted:#8a8a90; --accent:#f4efe4;
  --display:'MTL Display',Georgia,'Times New Roman',serif;
  --r:14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100svh;
}
/* cinematic backdrop: one soft key light + fine grain, both GPU-cheap */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(125% 72% at 50% -12%, rgba(255,252,244,.085), transparent 62%),
    radial-gradient(90% 60% at 50% 105%, rgba(255,255,255,.035), transparent 70%);
}
body::after{
  content:""; position:fixed; inset:-50%; z-index:0; pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{position:relative; z-index:1; max-width:1060px; margin:0 auto; padding:0 16px calc(48px + var(--safe-b))}

/* ───────────────────────── header ───────────────────────── */
header{padding:clamp(26px,7vw,62px) 0 clamp(16px,4vw,28px); text-align:center}
/* the mark carries the name, so the <h1> is for screen readers only */
.logo{width:clamp(112px,29vw,140px);margin:0 auto}
.logo img{width:100%;height:auto;display:block;border-radius:4px}
.logo.avatar img{border-radius:50%;aspect-ratio:1/1;object-fit:cover}
header h1.name{
  margin:16px 0 0;font-family:var(--display);
  font-size:clamp(22px,4.6vw,30px);font-weight:500;letter-spacing:.03em;
}
.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}
.contact-links{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.contact-links .sep{color:var(--muted)}
.handle{margin:20px 0 0;color:var(--muted);font-size:13px;letter-spacing:.09em}
.tagline{margin:10px auto 0;max-width:30ch;color:#a8a49c;
         font-family:var(--display);font-size:16.5px;line-height:1.4}
.rule{height:1px;margin:22px auto 0;max-width:180px;
      background:linear-gradient(90deg,transparent,var(--line) 25%,var(--line) 75%,transparent)}

/* socials — icon only: keeps the header monochrome and fits five platforms on
   one line. Brand colours still appear in the link sheet, where they do work. */
.socials{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:20px}
.social{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.028);
  color:#d8d5ce;text-decoration:none;
  transition:border-color .2s, background .2s, color .2s, transform .12s;
}
.social svg{width:17px;height:17px;flex:none}
.social:active{transform:scale(.94)}

/* ───────────────────────── nav ─────────────────────────
   A hamburger is the whole navigation, so it has to be findable without
   shouting: a small hairline square that only fills in on hover. */
.navbtn{
  position:fixed;z-index:61;top:calc(10px + env(safe-area-inset-top,0px));right:12px;
  width:44px;height:44px;
  background:rgba(8,8,10,.55);border:1px solid var(--line);border-radius:12px;
  cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s ease,border-color .2s ease;
}
.navbtn:hover{background:rgba(255,255,255,.07);border-color:#3a3941}
.navbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Both bars are pinned to the exact centre and offset from there, so the open
   state is just "drop the offset and rotate" — a flow layout leaves the two
   halves a few pixels apart and you get a chevron instead of an ×. */
.navbtn span{
  position:absolute;left:50%;top:50%;
  width:17px;height:1.5px;background:var(--fg);border-radius:2px;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.navbtn span:nth-child(1){transform:translate(-50%,-50%) translateY(-3.25px)}
.navbtn span:nth-child(2){transform:translate(-50%,-50%) translateY(3.25px)}
.navbtn.on span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.navbtn.on span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}

.navpanel{
  position:fixed;inset:0;z-index:60;
  background:rgba(6,6,8,.88);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s ease,visibility 0s linear .26s;
}
.navpanel.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .26s ease}
.navpanel a.nav{
  font-family:var(--display);font-size:clamp(30px,9vw,44px);line-height:1.25;
  color:#cfccc5;text-decoration:none;padding:6px 18px;
  transition:color .2s ease,transform .2s ease;
}
.navpanel a.nav:hover{color:#fff}
.navpanel a.nav.here{color:var(--accent)}
.navpanel a.nav.here::after{
  content:"";display:block;height:1px;margin:6px auto 0;width:26px;background:var(--accent);opacity:.7;
}
.navpanel .navfoot{margin-top:26px;display:flex;gap:11px}
.navpanel .navhandle{margin-top:22px;color:#5c5c65;font-size:12px;letter-spacing:.16em}
@media(prefers-reduced-motion:reduce){.navpanel,.navbtn span{transition:none}}

/* ───────────────────────── search ───────────────────────── */
/* Quiet by default — a thin outline that only warms up on focus, so it reads as
   part of the page rather than a form. */
.search{position:relative;max-width:380px;margin:30px auto 0}
.search input{
  width:100%;box-sizing:border-box;
  background:rgba(255,255,255,.028);
  border:1px solid var(--line);border-radius:999px;
  color:var(--fg);font:inherit;font-size:15px;line-height:1.2;
  padding:12px 42px 12px 44px;
  -webkit-appearance:none;appearance:none;outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.search input::placeholder{color:#61616a}
.search input:focus{border-color:#3a3941;background:rgba(255,255,255,.05)}
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.search .mag{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;pointer-events:none;
  fill:none;stroke:#61616a;stroke-width:1.7;stroke-linecap:round;
  transition:stroke .2s ease;
}
.search input:focus ~ .mag{stroke:var(--accent)}
.search .qx{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:0;border-radius:50%;
  background:transparent;color:#7a7a83;font-size:20px;line-height:1;
  cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent;
}
.search .qx:hover{color:var(--fg)}
.search input:focus-visible{outline:none}

/* ───────────────────── listen everywhere ─────────────────────
   The whole catalogue on each service, for someone who'd rather follow the
   artist than pick one song. Brand colour lives in the little icon tile only —
   the row still has to read as one quiet line, not seven logos. */
.listen{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin:26px auto 0;max-width:660px;
}
.lbtn{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px 7px 7px;border-radius:999px;
  background:rgba(255,255,255,.035);border:1px solid var(--line);
  color:#cfccc5;text-decoration:none;
  font-size:13px;line-height:1;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease;
}
.lbtn .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.lbtn .ic svg{width:13px;height:13px}
.lbtn:active{transform:scale(.97)}
@media(hover:hover){.lbtn:hover{background:rgba(255,255,255,.075);border-color:#3a3941;color:#fff}}
.lbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:520px){
  .listen{gap:7px;margin-top:22px}
  .lbtn{font-size:12.5px;padding:6px 11px 6px 6px}
  .lbtn .ic{width:20px;height:20px}
}

/* ───────────────────────── grid ───────────────────────── */
.sec{display:flex;align-items:center;gap:14px;margin:26px 0 13px}
.sec h2{margin:0;font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sec i{flex:1;height:1px;background:var(--line)}
.found{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#55555d;white-space:nowrap}

.grid{display:grid;gap:9px;grid-template-columns:repeat(2,1fr)}
@media(min-width:520px){.grid{grid-template-columns:repeat(3,1fr);gap:11px}}
@media(min-width:860px){.grid{grid-template-columns:repeat(4,1fr);gap:13px}}

/* Square, to match the release artwork. Covers are stored 720×720. */
.tile{
  position:relative;display:block;width:100%;padding:0;
  aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  background:var(--bg2); cursor:pointer;
  border:1px solid var(--line);
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease, border-color .2s ease;
  content-visibility:auto; contain-intrinsic-size:auto 190px;
}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0; transition:opacity .45s ease;
}
.tile img.on{opacity:1}
.tile .scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.30) 34%,rgba(0,0,0,0) 62%);
}
.tile .cap{
  position:absolute;left:10px;right:10px;bottom:9px;text-align:left;
  font-family:var(--display);font-size:13.5px;line-height:1.25;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.tile .dot{
  position:absolute;top:9px;right:9px;width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px rgba(244,239,228,.14);
}
.tile:active{transform:scale(.975)}
@media(hover:hover){
  .tile:hover{transform:translateY(-3px);border-color:#33323a}
  .tile:hover img{opacity:.86}
  .social:hover{border-color:#3a3941;background:rgba(255,255,255,.06);color:#fff}
}
.tile:focus-visible,.social:focus-visible,.pbtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── a release that isn't out yet ──
   The artwork stays the hero; the countdown sits on a scrim over it so the
   cover still reads. Dimmed a little so it's clearly not one of the live ones. */
.tile.soon img{opacity:.88}
.tile.soon .scrim{
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.22) 38%,
                             rgba(0,0,0,.06) 68%,rgba(0,0,0,0) 100%);
}
@media(hover:hover){.tile.soon:hover img{opacity:.95}}
.soonbox{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0 10px 15px;
}
.soonlabel{
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.clock{
  font-family:var(--display);font-size:clamp(19px,5.6vw,24px);line-height:1;
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.clock.out{
  font-size:clamp(15px,4.4vw,18px);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);
}
/* on a tile there is only ~170px to play with, so "Coming soon" has to fit on
   one line or it collides with the title printed on the artwork */
.tile .clock.out{font-size:clamp(11.5px,3.3vw,14px);letter-spacing:.14em;white-space:nowrap}
/* the same clock, in the sheet */
.soonnote{border-style:solid;border-color:#2f2d27;background:rgba(244,239,228,.04);color:#b9b6ae}
.soonnote .clock{display:block;margin-bottom:8px;font-size:26px}
.soonnote .clock[data-at]{margin:8px 0 0}

.sk{background:linear-gradient(100deg,#101014 30%,#191920 50%,#101014 70%);
    background-size:220% 100%;animation:sh 1.25s linear infinite}
@keyframes sh{to{background-position:-220% 0}}

/* ───────────────────────── sheet ───────────────────────── */
.scrimbg{
  position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.66);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .26s ease;
}
.scrimbg.on{opacity:1;pointer-events:auto}

/* A closed sheet must be inert, not merely invisible. On desktop it is centred
   and faded to opacity:0 — without this it still sits over the middle of the
   grid, showing its link targets in the status bar on hover and swallowing
   clicks meant for the tiles underneath. */
.sheet{
  position:fixed;z-index:41;left:0;right:0;bottom:0;
  background:#111115;border-top:1px solid #232329;
  border-radius:22px 22px 0 0;
  padding:10px 18px calc(22px + var(--safe-b));
  max-height:88svh;overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(101%);
  visibility:hidden;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s;
  box-shadow:0 -24px 60px rgba(0,0,0,.7);
}
.sheet.on{
  transform:translateY(0);
  visibility:visible;pointer-events:auto;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
@media(min-width:720px){
  .sheet{
    left:50%;bottom:auto;top:50%;right:auto;width:min(460px,92vw);
    border-radius:20px;border:1px solid #232329;
    transform:translate(-50%,-46%) scale(.97);opacity:0;
    /* the visibility delay must outlast the fade, or the sheet vanishes
       instantly instead of easing out */
    transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s linear .26s;
    max-height:86svh;padding-bottom:22px;
  }
  .sheet.on{
    transform:translate(-50%,-50%) scale(1);opacity:1;
    transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .2s ease;
  }
  .grab{display:none}
}
.grab{width:38px;height:4px;border-radius:9px;background:#33333c;margin:2px auto 14px}

.shead{display:flex;gap:13px;align-items:center;margin-bottom:6px}
.shead .cv{width:74px;height:74px;border-radius:9px;object-fit:cover;flex:none;background:#0b0b0d;border:1px solid var(--line)}
.shead .tt{min-width:0}
.shead .k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.shead h3{margin:0;font-family:var(--display);font-size:21px;font-weight:500;line-height:1.24;
          display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.plist{display:flex;flex-direction:column;gap:8px;margin-top:17px}
.pbtn{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:12px;text-decoration:none;
  background:rgba(255,255,255,.045);border:1px solid #232329;color:var(--fg);
  font-size:14.5px;font-weight:500;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s,border-color .18s,transform .12s;
}
.pbtn:active{transform:scale(.985)}
@media(hover:hover){.pbtn:hover{background:rgba(255,255,255,.085);border-color:#35343d}}
.pbtn .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.pbtn .ic svg{width:17px;height:17px}
.pbtn .go{margin-left:auto;color:#5f5f68;font-size:17px;line-height:1}

.ghost{background:transparent;border-color:#26262d;color:var(--muted);justify-content:center;font-size:13.5px;cursor:pointer;font-family:inherit}
.empty{margin:18px 0 4px;padding:16px;border:1px dashed #2a2a31;border-radius:12px;
       color:var(--muted);font-size:13.5px;text-align:center}

/* ───────────────────────── inner pages ───────────────────────── */
.page{max-width:600px;margin:8px auto 0;font-size:16.5px;line-height:1.72;color:#b9b6ae}
.page p{margin:0 0 20px}
.page em{font-style:normal;color:#d8d5ce}   /* the display face has no italic */
.page a{color:#cfccc5;text-decoration:none;border-bottom:1px solid #33333c}
.page a:hover{color:#fff;border-color:var(--accent)}
.lede{
  font-family:var(--display);font-size:clamp(21px,5.2vw,27px);line-height:1.35;
  color:var(--fg);margin:0 0 26px !important;text-align:center;
}
.page .soft{color:#8f8c86;font-size:15px}
.page .centre{text-align:center}
.page b{color:var(--fg);font-weight:600}

/* Section breaks on a long read: the display face rather than tracked-out
   capitals, because the page is prose and wants to stay warm. */
.page h2{
  margin:52px 0 22px;text-align:center;font-weight:500;
  font-family:var(--display);font-size:clamp(19px,4.8vw,23px);
  color:var(--fg);line-height:1.3;
}
.page h2::before{
  content:"";display:block;width:34px;height:1px;background:var(--line);
  margin:0 auto 26px;
}

/* Lines the writer set as verse — kept as lines, never re-flowed as prose. */
.stanza{
  font-family:var(--display);
  font-size:clamp(17.5px,4.5vw,22px);line-height:1.72;
  color:#e6e3dc;text-align:center;
  margin:30px 0 !important;
  /* a written line that's too long for the screen should split evenly rather
     than drop one orphaned word onto its own line */
  text-wrap:balance;
}
.stanza.sm{font-size:clamp(17px,4.2vw,19.5px);color:#d5d2cb}
.stanza.benediction{
  font-size:clamp(23px,6.2vw,30px);line-height:1.5;color:var(--fg);
  margin:26px 0 40px !important;
}

/* one line lifted out of the prose, quietly */
.pull{
  font-family:var(--display);font-size:clamp(19px,4.9vw,23px);line-height:1.5;
  color:var(--fg);text-align:center;
  margin:34px 0 !important;padding:24px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}

/* The opening verse — an epigraph, not a pull quote. Two plain paragraphs
   rather than a blockquote, so every block on the page is a <p> or an <h2> and
   the editor only ever has to swap a class. */
.versequote{
  font-family:var(--display);font-size:clamp(23px,6vw,31px);line-height:1.34;
  color:var(--fg);text-align:center;margin:6px 0 0 !important;text-wrap:balance;
}
/* small caps for the divine name, the way most printed bibles set it */
.page .sc{font-variant-caps:small-caps;letter-spacing:.03em}
.versecite{
  text-align:center;margin:16px 0 30px !important;
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:#5c5c65;
}
.versecite::before{
  content:"";display:block;width:26px;height:1px;background:var(--line);margin:0 auto 14px;
}

.stats{
  display:flex;justify-content:center;gap:clamp(20px,7vw,52px);
  margin:34px 0;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stats div{text-align:center}
.stats b{display:block;font-family:var(--display);font-size:clamp(26px,7vw,34px);
  font-weight:500;color:var(--fg);line-height:1}
.stats span{display:block;margin-top:7px;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#5c5c65}

/* Said once, quietly, at the bottom — it's a fact worth being straight about,
   not the subject of the page. */
.note-ai{
  margin:30px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.65;color:#6f6c67;text-align:center;
}

/* A photograph inside the prose. It breaks a little wider than the text column
   on a big screen — enough to read as a picture rather than an illustration —
   and its bottom edge is faded so it settles into the page instead of sitting
   on it as a hard rectangle. */
.figure{
  margin:38px 0;padding:0;
  /* the viewport, not the 600px text column — otherwise "100%" is the column
     and the picture never breaks out of it */
  width:min(calc(100vw - 32px),760px);
  margin-left:50%;transform:translateX(-50%);
}
.figure img{
  display:block;width:100%;height:auto;
  border-radius:var(--r);
  -webkit-mask-image:linear-gradient(#000 88%,rgba(0,0,0,.35));
  mask-image:linear-gradient(#000 88%,rgba(0,0,0,.35));
}
.figure figcaption{
  margin-top:12px;text-align:center;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#55555d;
}
@media(max-width:680px){
  .figure{margin:30px 0;width:100%;margin-left:0;transform:none}
}

/* the placeholder block — obvious on the page, easy to delete */
.draft{
  border:1px dashed #33333c;border-radius:12px;padding:16px 18px;margin:30px 0;
  background:rgba(255,255,255,.02);
}
.draft p{margin:0;font-size:14.5px;color:#8f8c86}
.draft b{color:var(--accent);font-weight:600}

.page .socials{margin-top:34px}
a.logo{display:block}

.foot{margin-top:44px;text-align:center;color:#55555d;font-size:11.5px;letter-spacing:.05em}
.foot a{color:#6d6d76}
.msg{text-align:center;color:var(--muted);padding:48px 12px;font-size:14px}
.msg button{margin-top:14px;background:transparent;border:1px solid var(--line);color:var(--fg);
            padding:9px 18px;border-radius:999px;font-size:13px;cursor:pointer}

/* ── contact ──
   One address, made unmissable, with a copy button for the phones where
   tapping a mailto: opens an app nobody uses. */
.mailcard{
  margin:6px 0 30px;padding:26px 18px 22px;text-align:center;
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(244,239,228,.045),rgba(244,239,228,.015));
}
.page .mailk{
  margin:0 0 10px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:#7b7a80;
}
.page a.mailto{
  display:inline-block;font-family:var(--display);
  font-size:clamp(19px,5.4vw,27px);line-height:1.25;color:var(--fg);
  border-bottom:1px solid #3a3941;padding-bottom:2px;word-break:break-word;
}
.page a.mailto:hover{color:#fff;border-color:var(--accent)}
.page .mailact{margin:16px 0 0}
.copybtn{
  font:inherit;font-size:12.5px;letter-spacing:.04em;color:#a9a6a0;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;
  padding:8px 17px;transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.copybtn:hover{color:#fff;border-color:#33323a;background:rgba(255,255,255,.07)}
.copybtn.done{color:var(--accent);border-color:rgba(244,239,228,.35)}
.copybtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}