/* ---------------------------------------------------------------------------
   /learn/ - MAIL CLUB, the front door.

   Not an issue. This is the shelf the issues sit on, so it deliberately does
   NOT take a season: no coastal palette, no harvest, no night. It dresses as
   the club's own stationery instead - manila, twine, rubber stamp - and lets
   each issue show its own colours on its own tile. That is the one place all
   three palettes are allowed in the same view.

   FONTS: only the three cross-issue constants - Lora, Courier Prime, Caveat.
   There is deliberately no fourth display face; Courier Prime does the
   heading work as stamped labels, because borrowing Permanent Marker, Baloo 2
   or Fredoka would make the shelf look like one of the issues on it.

   Standalone, like every other stylesheet here. Nothing in this file can
   reach reference.css, issue-02.css or issue-03.css.
--------------------------------------------------------------------------- */

:root{
  --ground:#F5F1E8;     /* neutral cream, between all three issue papers   */
  --manila:#E8DCC1;     /* envelope / folder tab                           */
  --manila-2:#DFD0AF;
  --card:#FCFAF4;
  --ink:#33323B;        /* neutral near-black - belongs to no season       */
  --ink-soft:#5E5B66;
  --ink-faint:#6E6A76;
  --twine:#A8927A;      /* string, rules                                   */
  --rule:#DCD3C2;
  --rule-firm:#C4B79F;
  --shadow:rgba(51,50,59,.15);

  /* each issue's own accent, used ONLY on that issue's tile */
  --i01:#6C8EA0;  --i01-paper:#F6F1E7;
  --i02:#B23A32;  --i02-paper:#FBF3E9;
  --i03:#2E3454;  --i03-paper:#F6F3ED;
  --i04:#4A6741;  --i04-paper:#F5EFE0;
  --i05:#7A4A5E;  --i05-paper:#F5EFE0;   /* camp pair, but 05 leads in plum */
  --i06:#6A4A85;  --i06-paper:#F7F2E8;   /* the brunch post's derived lilac lead */
  --i07:#2670A6;  --i07-paper:#F4F6F1;   /* the winter post - the first cool paper */
  --i08:#1F3350;  --i08-paper:#F7F4EC;   /* the clubhouse post - navy, deep not bright */
  --i09:#AA5829;  --i09-paper:#F8F0E4;   /* the evening post - marigold leads the PAGE; this is its text-safe warm */

  --body:"Lora",Georgia,"Times New Roman",serif;
  --code:"Courier Prime","Courier New",monospace;
  --hand:"Caveat","Bradley Hand",cursive;
  --r:8px;

  /* kraft paper tooth - a faint fibre speckle, not a pattern */
  --tooth:
    radial-gradient(circle .8px at 11px 9px,rgba(168,146,122,.22) .8px,transparent 1.2px),
    radial-gradient(circle .6px at 31px 24px,rgba(168,146,122,.18) .6px,transparent 1px),
    radial-gradient(circle .7px at 19px 37px,rgba(168,146,122,.20) .7px,transparent 1.1px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{transition:none!important;}}

body{
  margin:0;background-color:var(--ground);
  background-image:var(--tooth);background-size:46px 46px;
  background-attachment:fixed;
  color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.wrap{max-width:880px;margin:0 auto;padding:0 22px 80px;}
a{color:var(--ink);text-underline-offset:3px;}
:focus-visible{outline:2.5px solid var(--twine);outline-offset:3px;border-radius:3px;}

/* --- the rubber stamp header --------------------------------------------- */
.office{text-align:center;padding:46px 0 8px;}
.rubber{
  display:inline-block;font-family:var(--code);font-weight:700;
  font-size:11.5px;letter-spacing:4px;text-transform:uppercase;
  color:var(--twine);border:2.5px solid var(--twine);border-radius:4px;
  padding:6px 16px;transform:rotate(-1.6deg);opacity:.9;
}
.office h1{
  font-family:var(--body);font-weight:700;
  font-size:clamp(28px,5vw,42px);line-height:1.15;margin:16px 0 8px;
}
.office .sub{
  font-family:var(--hand);font-size:21px;color:var(--ink-soft);
  margin:0 auto;max-width:36ch;line-height:1.4;
}

/* --- the shelf ------------------------------------------------------------ */
.shelf{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));margin:34px 0 12px;}
.tile{
  display:flex;flex-direction:column;gap:10px;
  background:var(--card);border:1.5px solid var(--rule-firm);border-radius:var(--r);
  padding:20px 20px 18px;text-decoration:none;color:var(--ink);
  position:relative;overflow:hidden;
  transition:transform .13s,box-shadow .13s;
}
.tile:hover{transform:translateY(-3px);box-shadow:0 6px 14px var(--shadow);}
/* a colour band along the top edge - the only place the issue's accent shows
   at full strength, so three tiles side by side read as a set, not a clash */
.tile::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--accent);}
.tile.i01{--accent:var(--i01);--wash:var(--i01-paper);}
.tile.i02{--accent:var(--i02);--wash:var(--i02-paper);}
.tile.i03{--accent:var(--i03);--wash:var(--i03-paper);}
.tile.i04{--accent:var(--i04);--wash:var(--i04-paper);}
.tile.i05{--accent:var(--i05);--wash:var(--i05-paper);}
.tile.i06{--accent:var(--i06);--wash:var(--i06-paper);}
.tile.i07{--accent:var(--i07);--wash:var(--i07-paper);}
.tile.i08{--accent:var(--i08);--wash:var(--i08-paper);}
.tile.i09{--accent:var(--i09);--wash:var(--i09-paper);}

.tile .seal{width:66px;height:66px;margin-top:4px;filter:drop-shadow(0 2px 3px var(--shadow));}
.tile .no{
  font-family:var(--code);font-weight:700;font-size:10.5px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--accent);
}
.tile h2{font-family:var(--body);font-weight:700;font-size:19px;line-height:1.25;margin:0;}
.tile .say{font-family:var(--hand);font-size:18px;color:var(--ink-soft);margin:0;line-height:1.35;}
.tile ul{
  margin:2px 0 0;padding:0;list-style:none;
  font-family:var(--code);font-size:11.5px;line-height:1.75;color:var(--ink-faint);
}
.tile ul li::before{content:"· ";color:var(--accent);}
.tile .go{
  margin-top:auto;padding-top:10px;
  font-family:var(--code);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--accent);
}

/* --- the index ------------------------------------------------------------ */
.lookup{
  background:var(--card);background-image:var(--tooth);background-size:46px 46px;
  border:1.5px solid var(--rule-firm);border-radius:var(--r);
  padding:24px 26px 22px;margin:30px 0 0;
}
.lookup-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-bottom:2px solid var(--manila-2);padding-bottom:10px;margin-bottom:6px;}
.lookup h2{
  font-family:var(--code);font-weight:700;font-size:12.5px;letter-spacing:3px;
  text-transform:uppercase;color:var(--ink);margin:0;
}
.lookup .hint{font-family:var(--hand);font-size:18px;color:var(--ink-soft);}

.filter{
  display:block;width:100%;margin:14px 0 4px;
  font-family:var(--code);font-size:14px;color:var(--ink);
  background:var(--ground);border:1.5px solid var(--rule-firm);border-radius:5px;
  padding:9px 13px;
}
.filter::placeholder{color:var(--ink-faint);}
.filter:focus{border-color:var(--twine);outline:none;}
.count{font-family:var(--code);font-size:11px;color:var(--ink-faint);display:block;margin:6px 0 2px;}

.groups{columns:2;column-gap:34px;margin-top:10px;}
@media (max-width:620px){.groups{columns:1;}}
.grp{break-inside:avoid;margin:0 0 14px;}
.grp .ltr{
  font-family:var(--code);font-weight:700;font-size:11px;letter-spacing:2px;
  color:var(--ground);background:var(--twine);border-radius:3px;
  padding:1px 7px;display:inline-block;margin-bottom:4px;
}
.grp ul{list-style:none;margin:0;padding:0;}
.grp li{
  display:flex;align-items:baseline;gap:8px;
  font-size:14.5px;line-height:1.5;padding:2px 0;
  border-bottom:1px dotted var(--rule);
}
.grp li a{flex:1;text-decoration:none;color:var(--ink);}
.grp li a:hover{text-decoration:underline;}
.grp .where{
  font-family:var(--code);font-size:10.5px;letter-spacing:.5px;white-space:nowrap;
  padding:1px 6px;border-radius:3px;color:#FFF;
}
.where.w01{background:var(--i01);}
.where.w02{background:var(--i02);}
.where.w03{background:var(--i03);}
.where.w04{background:var(--i04);}
.where.w05{background:var(--i05);}
.where.w06{background:var(--i06);}
.where.w07{background:var(--i07);}  /* white on it: 5.32:1 */
.where.w08{background:var(--i08);}  /* white on it: 12.75:1 */
.where.w09{background:var(--i09);}  /* white on it: 5.08:1 */
.no-hits{font-family:var(--hand);font-size:19px;color:var(--ink-soft);padding:10px 0;display:none;}

/* --- footer --------------------------------------------------------------- */
.foot{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-family:var(--code);font-size:12px;color:var(--ink-faint);
  border-top:1.5px solid var(--rule);margin-top:30px;padding-top:18px;
}
.foot a{color:var(--ink-soft);}
.foot .twine{flex:1;min-width:160px;}

/* the filter's label is for screen readers only - the placeholder is not a
   label, so the input needs a real one even though the design has no room */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}