/* ============================================================
   Random Art & Kindness — shared styles for every page
   ------------------------------------------------------------
   Matched to the landing page on 2 September 2026.
   Fraunces for headings, Karla for reading, Courier Prime for
   labels and numbers — same as index.html.

   A note on the two greens. --teal is pale: on cream it only
   reaches 2.3:1, which is too faint to read at small sizes. So
   every piece of TEXT uses --teal-dark (6.4:1). --teal is for
   large shapes only. --gold is 3.2:1, so it is used for rules
   and borders and never for words.
   ============================================================ */

:root{
  --paper:#F4EFE4;        /* page background — cream */
  --paper-deep:#EAE1CF;   /* a shade down, for bands */
  --card:#FBF8F1;         /* raised surfaces: tiles, the detail panel */
  --mint:#DCEEE6;         /* the header band green */
  --ink:#17150F;
  --ink-soft:#4A443A;
  --teal:#57ADA6;         /* large shapes only, never small text */
  --teal-dark:#1D5F5C;    /* all links and coloured text */
  --gold:#AC7F24;         /* rules and borders only */
  --rule:rgba(23,21,15,.18);

  --display:"Fraunces",Georgia,serif;
  --body:"Karla",system-ui,sans-serif;
  --util:"Courier Prime",ui-monospace,monospace;

  --gut:clamp(20px,5vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(17px,1.15vw,19px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--teal-dark)}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:900px}

.eyebrow{
  font-family:var(--util);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 1.1rem;
}

/* highlight for things you still need to fill in */
.tofill{background:linear-gradient(transparent 68%,rgba(227,166,42,.55) 68%);padding:0 .1em}

/* ---------- masthead ---------- */
.masthead{
  border-bottom:1px solid rgba(23,21,15,.16);
  background:var(--paper);position:sticky;top:0;z-index:20;
  backdrop-filter:blur(6px);
}
.masthead .wrap{display:flex;align-items:baseline;gap:.9rem;padding:.85rem var(--gut);flex-wrap:wrap}
.mark{font-family:var(--display);font-weight:800;font-size:clamp(.95rem,1.6vw,1.1rem);letter-spacing:-.015em;margin:0}
.mark a{color:inherit;text-decoration:none}
.mark .amp{color:var(--teal-dark)}
.sub{font-family:var(--util);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.masthead nav{margin-left:auto;display:flex;gap:1.25rem}
.masthead nav a{
  font-family:var(--util);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-soft);
}
.masthead nav a:hover,.masthead nav a:focus-visible,.masthead nav a[aria-current="page"]{color:var(--teal-dark)}

/* ---------- headings ---------- */
h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.03;
  letter-spacing:-.03em;margin:.2rem 0 1.4rem;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--teal-dark)}
h2{
  font-family:var(--display);font-weight:600;letter-spacing:-.022em;
  font-size:clamp(1.5rem,3vw,2.1rem);margin:0 0 .6rem;
}
h3{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2.3vw,1.4rem);letter-spacing:-.015em;margin:2.6rem 0 1rem;color:var(--teal-dark)}
.lede{font-size:1.08em;max-width:48ch;margin:0 0 1.1rem}
.lede-2{color:var(--ink-soft);max-width:48ch;margin:0 0 1.8rem;font-size:.97em}
.pagehead{padding:clamp(2.6rem,6vw,4.2rem) 0 clamp(1.6rem,3vw,2.4rem)}

/* ---------- buttons + forms ---------- */
.btn{
  display:inline-block;font-family:var(--util);font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:.85rem 1.4rem;border:0;border-radius:2px;cursor:pointer;
  background:var(--teal-dark);color:var(--card);transition:background .18s ease;
}
.btn:hover{background:#164846}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--teal-dark);border:1px solid rgba(29,95,92,.5)}
.btn.ghost:hover{background:rgba(29,95,92,.08)}

label{
  display:block;font-family:var(--util);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem;
}
input[type=text],input[type=email],textarea,select{
  font-family:var(--body);font-size:1rem;width:100%;
  padding:.7rem .85rem;border:1px solid rgba(23,21,15,.35);
  border-radius:2px;background:var(--card);color:var(--ink);
}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--teal-dark);outline-offset:2px}
textarea{min-height:120px;resize:vertical}
.field{margin-bottom:1.1rem}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.1rem}
.formcard{
  background:var(--card);border-radius:3px;padding:clamp(1.4rem,3vw,2.2rem);
  box-shadow:0 12px 30px -20px rgba(23,21,15,.4);max-width:640px;
}
.formnote{font-size:.88em;color:var(--ink-soft);margin:.2rem 0 1.4rem;max-width:52ch}

/* ---------- sections ---------- */
.band{background:var(--mint);border-top:1px solid rgba(23,21,15,.12);border-bottom:1px solid rgba(23,21,15,.12)}
.band .wrap,.section .wrap{padding-top:clamp(2.8rem,6vw,4.4rem);padding-bottom:clamp(2.8rem,6vw,4.4rem)}
.paperband{background:var(--card);border-top:1px solid rgba(23,21,15,.12)}

/* ---------- postcard illustration (landing hero) ---------- */
.postcard{
  width:100%;max-width:520px;aspect-ratio:3/2;background:var(--card);border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -18px rgba(23,21,15,.45),0 2px 6px rgba(23,21,15,.12);
  display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;
  transform:rotate(-1.4deg);animation:settle .9s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes settle{from{opacity:0;transform:rotate(-5deg) translateY(18px) scale(.97)}to{opacity:1;transform:rotate(-1.4deg)}}
.postcard::after{content:"";position:absolute;left:50%;top:9%;bottom:9%;width:1px;background:rgba(23,21,15,.22)}
.pc-left,.pc-right{padding:clamp(14px,3.4%,22px);position:relative}
.pc-left{display:flex;flex-direction:column;justify-content:flex-end}
.blank-note{font-family:var(--util);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(23,21,15,.35);line-height:1.5}
.pc-no{position:absolute;left:clamp(14px,3.4%,22px);top:clamp(14px,3.4%,22px);font-family:var(--util);font-size:.7rem;letter-spacing:.08em;color:var(--teal-dark)}
.pc-right{display:flex;flex-direction:column}
.stamp-row{display:flex;justify-content:flex-end;align-items:flex-start;gap:6px;position:relative}
.stamp{
  width:clamp(52px,11%,70px);aspect-ratio:5/6;flex:none;
  background:radial-gradient(circle at 50% 62%,#E8D2A0 0 22%,transparent 22.5%),linear-gradient(160deg,var(--gold),#8A6418);
  --d:3.4px;--s:9px;
  -webkit-mask:
    radial-gradient(var(--d) at 50% 0,#0000 97%,#000) 50% 0/var(--s) 100% repeat-x,
    radial-gradient(var(--d) at 50% 100%,#0000 97%,#000) 50% 100%/var(--s) 100% repeat-x,
    radial-gradient(var(--d) at 0 50%,#0000 97%,#000) 0 50%/100% var(--s) repeat-y,
    radial-gradient(var(--d) at 100% 50%,#0000 97%,#000) 100% 50%/100% var(--s) repeat-y;
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(var(--d) at 50% 0,#0000 97%,#000) 50% 0/var(--s) 100% repeat-x,
    radial-gradient(var(--d) at 50% 100%,#0000 97%,#000) 50% 100%/var(--s) 100% repeat-x,
    radial-gradient(var(--d) at 0 50%,#0000 97%,#000) 0 50%/100% var(--s) repeat-y,
    radial-gradient(var(--d) at 100% 50%,#0000 97%,#000) 100% 50%/100% var(--s) repeat-y;
  mask-composite:intersect;
}
.postmark{
  position:absolute;right:clamp(34px,9%,58px);top:-4px;width:clamp(58px,13%,80px);aspect-ratio:1;
  border:1.5px solid rgba(29,95,92,.5);border-radius:50%;display:grid;place-content:center;text-align:center;
  transform:rotate(-11deg);color:rgba(29,95,92,.62);
  font-family:var(--util);font-size:.5rem;letter-spacing:.06em;line-height:1.35;text-transform:uppercase;
}
.postmark span{display:block}
.postmark span:nth-child(2){font-size:.58rem;font-weight:700;letter-spacing:.02em}
.addr{margin-top:auto;font-family:var(--util);font-size:clamp(.66rem,1.5vw,.82rem);line-height:2;text-transform:uppercase;letter-spacing:.06em}
.addr .to{color:var(--ink-soft);font-size:.72em;letter-spacing:.16em;display:block;margin-bottom:.2rem}
.addr .resident{color:var(--teal-dark);font-weight:700}

/* ---------- card grid (gallery + shop) ---------- */
.searchbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:.6rem}
.searchbar .field{margin:0;flex:0 0 auto}
.searchbar input{width:12ch;font-family:var(--util);font-size:1.05rem;letter-spacing:.14em}
.count{font-family:var(--util);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:.4rem 0 2rem}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(1.2rem,2.6vw,2rem)}
.tile{
  background:var(--card);border-radius:3px;overflow:hidden;text-align:left;
  border:0;padding:0;cursor:pointer;font:inherit;color:inherit;width:100%;
  box-shadow:0 10px 26px -20px rgba(23,21,15,.5);
  transition:transform .18s ease,box-shadow .18s ease;
}
.tile:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px rgba(23,21,15,.55)}
.tile:focus-visible{outline:2px solid var(--teal-dark);outline-offset:3px}
.tile .art{aspect-ratio:3/2;background:var(--mint);object-fit:cover;width:100%}
.tile .meta{padding:.8rem 1rem 1.1rem}
.tile .no{font-family:var(--util);font-size:.72rem;letter-spacing:.12em;color:var(--teal-dark);display:block}
.tile .ttl{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.01em;margin:.25rem 0 0}
.tile .price{font-family:var(--util);font-size:.78rem;color:var(--ink-soft);margin-top:.35rem;display:block}
.empty{font-family:var(--util);font-size:.85rem;color:var(--ink-soft);padding:2rem 0}

/* ---------- card detail ---------- */
.detail{background:var(--card);border-radius:3px;overflow:hidden;box-shadow:0 18px 44px -26px rgba(23,21,15,.5);margin-bottom:2.4rem}
.detail .art{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--mint)}
.detail .body{padding:clamp(1.3rem,3vw,2.2rem)}
.detail .no{font-family:var(--util);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dark)}
.detail h2{margin:.3rem 0 .7rem}
.detail .note{max-width:56ch;margin:0 0 1.2rem}
.backlink{font-family:var(--util);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;background:none;border:0;color:var(--ink-soft);cursor:pointer;padding:0;margin-bottom:1.4rem}
.backlink:hover{color:var(--teal-dark)}

.comments{border-top:1px solid rgba(23,21,15,.15);padding-top:1.4rem;margin-top:1.6rem}
.comments h3{margin:0 0 1rem;font-size:1.05rem;color:var(--ink)}
.comment{border-left:3px solid var(--gold);padding:.2rem 0 .2rem 1rem;margin-bottom:1.3rem;max-width:56ch}
.comment p{margin:0 0 .3rem}
.comment .who{font-family:var(--util);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
/* the invitation under "Did you receive a card?", inside the note form */
.receive-lede{color:var(--ink-soft);font-size:.97em;max-width:52ch;margin:0 0 1.4rem}

/* the deletion and moderation note, directly above Send it */
.sendnote{
  font-size:.88em;line-height:1.6;color:var(--ink-soft);
  background:var(--paper);border-left:3px solid var(--gold);
  padding:.85rem 1rem;margin:1.3rem 0 1.4rem;max-width:56ch;
}

/* ---------- steps ---------- */
.stepgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(1.5rem,3vw,2.4rem)}
.step{border-top:1px solid rgba(23,21,15,.22);padding-top:1rem}
.step .n{font-family:var(--util);font-size:.72rem;letter-spacing:.16em;color:var(--gold);display:block;margin-bottom:.5rem}
.step h4{font-family:var(--display);font-weight:600;font-size:1.05rem;margin:0 0 .45rem;letter-spacing:-.01em}
.step p{margin:0;font-size:.94em;color:var(--ink-soft);line-height:1.6}

/* ---------- pull quote ---------- */
.pull{
  font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,4.4vw,2.6rem);
  line-height:1.15;letter-spacing:-.03em;margin:2.4rem 0;
  padding-left:clamp(1rem,3vw,2rem);border-left:3px solid var(--gold);max-width:20ch;
}
.sign{font-family:var(--util);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:2.2rem}

/* ---------- footer ---------- */
footer{padding:clamp(2.6rem,5vw,3.6rem) 0 3rem}
.foot-line{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,2.6vw,1.6rem);letter-spacing:-.02em;margin:0 0 1.6rem;max-width:24ch;line-height:1.2}
.foot-meta{
  display:flex;gap:1.6rem;flex-wrap:wrap;font-family:var(--util);font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  padding-top:1.4rem;border-top:1px solid rgba(23,21,15,.18);
}
.foot-meta a{color:var(--teal-dark);text-decoration:none}
.foot-meta a:hover{text-decoration:underline}

/* ---------- hero layout ---------- */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(3rem,6vw,4.5rem)}
.card-stage{display:flex;flex-direction:column;align-items:center;gap:1rem}
.stage-caption{font-family:var(--util);font-size:.72rem;letter-spacing:.06em;color:var(--ink-soft);text-align:center;max-width:42ch;line-height:1.7}
.buyer-note{font-family:var(--util);font-size:.78rem;letter-spacing:.04em;border-left:2px solid var(--gold);padding-left:.9rem;color:var(--ink-soft)}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .card-stage{order:-1}
  .masthead nav{width:100%;margin-left:0;padding-top:.4rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .postcard{transform:rotate(-1.4deg);opacity:1}
}

/* ---------- the handwritten message ---------- */
.msgblock{
  border-left:3px solid var(--gold);padding:.1rem 0 .1rem 1rem;
  margin:0 0 1.4rem;max-width:52ch;
}
.msgblock .msglabel{
  font-family:var(--util);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:.35rem;
}
.msgblock p{margin:0;font-size:1.08em;line-height:1.6}
.backscan{
  width:100%;max-width:340px;border-radius:3px;margin:0 0 1.6rem;
  border:1px solid rgba(23,21,15,.14);
}

/* A card taller than it is wide. The frame is a landscape one, so a portrait
   card left to fill it would be cropped to a band across its middle. This sits
   it inside the frame whole instead, with the paper colour either side.
   Applied by the page itself when the image loads, so any portrait card
   photographed in future is handled without anyone remembering to do it. */
.tile .art.tall,.detail .art.tall{object-fit:contain;background:var(--paper)}

/* The typed message, folded away under a scan. Closed by default: the
   handwriting is the point, and this is only here for when the scan is hard
   to read or cut off at an edge. */
.typedout{margin:-.8rem 0 1.6rem;max-width:52ch}
.typedout summary{
  font-family:var(--util);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);cursor:pointer;
  list-style:none;display:inline-block;padding:.25rem 0;
}
.typedout summary::-webkit-details-marker{display:none}
.typedout summary::before{content:"+ ";color:var(--teal-dark)}
.typedout[open] summary::before{content:"\2212 "}
.typedout summary:hover{color:var(--teal-dark)}
.typedout p{
  margin:.5rem 0 0;font-size:1.02em;line-height:1.6;
  border-left:3px solid var(--gold);padding-left:1rem;
}

.tile .tilemsg{
  display:block;margin-top:.5rem;font-size:.88em;line-height:1.5;
  color:var(--ink-soft);font-style:italic;
}

/* ---------- did you send this card? ---------- */
.senderbox{
  background:var(--mint);border-radius:3px;
  padding:1.1rem 1.3rem;margin:1.8rem 0 0;max-width:56ch;
}
.senderbox p{margin:.3rem 0 .9rem;font-size:.97em;color:var(--ink)}
.senderrow{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.senderrow input{flex:1 1 220px;min-width:0}
.senderrow .btn{flex:0 0 auto}

/* ============================================================
   TOP BAR — lifted from the landing page so every page's header
   is identical. index.html carries the same rules inline. If one
   changes, change the other.
   ============================================================ */
.topbar{
  border-bottom:1.5px solid var(--rule);
  background:rgba(244,239,228,.9);
  position:sticky;top:0;z-index:40;backdrop-filter:blur(6px);
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;
  max-width:1080px;
}
.topbar .mark{
  font-family:var(--util);font-weight:700;
  font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--teal-dark);text-decoration:none;margin:0;
}
.topbar .mark span{display:block;color:var(--ink-soft);letter-spacing:.13em;font-weight:400}
.topbar nav{margin-left:0}
.topbar nav ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.topbar nav a{
  display:inline-block;padding:7px 13px;border-radius:999px;
  font-family:var(--body);font-size:.9rem;font-weight:500;
  letter-spacing:0;text-transform:none;
  text-decoration:none;color:var(--ink);
  border:1.5px solid transparent;
}
.topbar nav a:hover,.topbar nav a:focus-visible{border-color:var(--teal);color:var(--teal-dark)}
.topbar nav a[aria-current="page"]{background:var(--teal);color:#fff}

@media (max-width:860px){
  .topbar .navhome{display:none}
  .topbar .mark{
    color:var(--ink);
    display:block;
    width:calc(100% + (2 * var(--gut)));margin:0 calc(-1 * var(--gut));
    padding:12px var(--gut) 10px;
    background:var(--mint);
  }
  .topbar .wrap{padding-top:0;justify-content:flex-start;gap:10px}
  .topbar nav{width:100%;border-top:1.5px solid var(--rule);padding-top:10px}
  .topbar nav ul{justify-content:flex-start;gap:5px;margin-left:-10px}
  .topbar nav a{padding:6px 10px;font-size:.86rem;font-weight:700;color:var(--teal-dark)}
}
@media (max-width:400px){
  .topbar nav a{font-size:.8rem;padding:6px 8px}
  .topbar nav ul{gap:4px;margin-left:-8px}
}

/* ---------- cards still for sale, seen from the lookup page ---------- */
.tile .avail{
  font-family:var(--util);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-dark);
  border:1.5px solid var(--gold);border-radius:999px;
  padding:.15rem .5rem;margin-left:.5rem;white-space:nowrap;
}
/* Spoken for: the same badge, stepped back. Available should be the one that
   catches the eye — this one is only telling you why there is no button. */
.tile .avail.spoken{
  color:var(--ink-soft);border-color:var(--rule);border-style:dashed;
}
.availbox{
  background:var(--paper);border-left:3px solid var(--gold);
  padding:1rem 1.1rem;margin:1.2rem 0 0;max-width:52ch;
}
.availbox p{margin:0;font-size:1.02em;color:var(--ink)}
.availbox p:last-child{margin-top:1.1rem}

/* The grid is display:grid, which beats the browser's own rule for the
   hidden attribute — so hiding it in script had no visible effect and
   the whole catalogue stayed on screen underneath an opened card.
   This makes hidden mean hidden, whatever the element's display is. */
[hidden]{display:none !important}

/* ---------- a card whose front was never scanned ---------- */
.tile .frontnote{
  display:block;font-size:.82rem;line-height:1.4;
  color:var(--ink-soft);margin-top:.35rem;
}
.frontnote-detail{
  font-size:.95em;color:var(--ink-soft);
  margin:.5rem 0 0;font-style:italic;
}

/* heading above a note left by the person who received the card */
.noteshead{
  font-family:var(--display);font-weight:600;
  font-size:1.05rem;color:var(--ink);
  margin:2.2rem 0 1rem;
}