/* Direction A — The Board.
   A warm paper pinboard the family made. Everything is a real object:
   paper stock, tape, pins, shadow. Christmas arrives through the light
   string and the greens, never through a slogan. */

:root{
  --paper:#E7F2EC;
  --paper-hi:#FFFFFF;
  --card:#FFFFFF;
  --card-2:#F6FAF9;
  --ink:#0A1214;
  --ink-2:#425257;
  --ink-3:#7C8C91;
  --pine:#0A6B41;
  --pine-2:#0E8F57;
  --pine-3:#6FCCA2;
  --brick:#E01B2E;
  --gold:#F2B32C;
  --line:#E3EBE9;
  --line-2:#D0DCD9;
  --lift:
    0 1px 2px rgba(10,18,20,.05),
    0 4px 10px -4px rgba(10,18,20,.12),
    0 16px 30px -20px rgba(10,18,20,.28);
  --lift-2:
    0 1px 2px rgba(10,18,20,.06),
    0 8px 18px -8px rgba(10,18,20,.16),
    0 28px 50px -28px rgba(10,18,20,.34);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  color:var(--ink);
  font-family:Karla,system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  background:#FFFFFF;
}

h1,h2,h3,h4{font-family:Fraunces,Georgia,serif;margin:0;letter-spacing:-.018em}

/* ---------- top strip + masthead ---------- */
.tag-strip{
  background:var(--pine);color:#d8ccae;
  font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  text-align:center;padding:7px 14px;
}
.masthead{
  display:flex;align-items:center;gap:16px;
  padding:15px clamp(16px,4vw,40px);
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line-2);
  box-shadow:0 10px 24px -22px rgba(60,44,24,.8);
}
.mark{
  width:40px;height:40px;flex:none;display:grid;place-items:center;
  background:var(--pine);border-radius:4px;transform:rotate(-3.5deg);
  box-shadow:var(--lift);
}
.mark svg{width:21px;fill:#e6d7b4}
.mark-text{display:flex;flex-direction:column;line-height:1.15;margin-right:auto}
.mark-text b{font-family:Fraunces,Georgia,serif;font-size:19.5px;font-weight:600;letter-spacing:-.02em}
.mark-text span{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-top:1px}
.masthead nav{display:flex;gap:6px}
.masthead nav a{
  color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14.5px;
  padding:7px 12px;border-radius:3px;
}
.masthead nav a:hover{color:var(--ink);background:var(--card-2)}
.who{
  font:inherit;font-weight:700;font-size:14px;cursor:pointer;
  background:var(--brick);color:#fff;border:none;box-shadow:0 8px 20px rgba(224,27,46,.26);
  padding:10px 17px;border-radius:3px;transform:rotate(-1deg);
  box-shadow:var(--lift);
}
.who:hover{background:#B80F20}

/* ---------- the light string ---------- */
.lights-swag{display:block;width:100%;height:52px;margin:0 0 -10px;overflow:visible}
.lights-swag .wire{fill:none;stroke:#B9C6C3;stroke-width:2;opacity:1}
.lights-swag .glow{opacity:.3;filter:blur(3px)}

/* ---------- the board ---------- */
main{background:#fff;padding:0}
.board-wrap{background:linear-gradient(180deg,#EDF7F1,#E2EFE8);border-bottom:1px solid #CFE3D9;padding:0 clamp(14px,4vw,40px) 38px}
.shelves-wrap{background:#fff;padding:0 clamp(14px,4vw,40px) 64px}
.board{
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:22px;
  padding:8px 0 34px;
  align-items:start;
}
.col{display:flex;flex-direction:column;gap:22px}
.pair{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;align-items:stretch}
.pair > .pinned{margin:0}

.pinned{
  position:relative;background:var(--card);
  border:1px solid var(--line);border-radius:3px;
  box-shadow:var(--lift);padding:24px;
}
/* torn masking tape */
.pinned::before{
  content:"";position:absolute;top:-11px;left:50%;
  transform:translateX(-50%) rotate(-1.6deg);
  width:96px;height:24px;
  background:linear-gradient(100deg, rgba(255,255,255,.75), rgba(226,238,234,.92) 40%, rgba(255,255,255,.78));
  box-shadow:0 2px 5px -1px rgba(10,18,20,.14), inset 0 0 0 1px rgba(255,255,255,.7);
  clip-path:polygon(3% 0,97% 0,100% 22%,97% 50%,100% 78%,96% 100%,4% 100%,0 76%,3% 50%,0 24%);
}
.col > .pinned:nth-child(even)::before{transform:translateX(-50%) rotate(2deg)}

/* a couple of cards get a pin instead, so the board isn't uniform */
.pinned.pin::before{
  width:16px;height:16px;border-radius:50%;top:-8px;clip-path:none;
  background:radial-gradient(circle at 34% 30%, #FF5A45, #E01B2E 58%, #A60F1E);
  box-shadow:0 3px 7px -1px rgba(10,18,20,.34), inset 0 -1px 2px rgba(0,0,0,.28);
}

/* ---------- the trip card ---------- */
.trip-card{transform:rotate(-.4deg);box-shadow:var(--lift-2)}
.trip-card .eyebrow{
  margin:0 0 12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brick);font-weight:700;
}
.trip-card h1{
  font-size:clamp(33px,4.1vw,49px);line-height:1.04;margin:0 0 8px;font-weight:700;
}
.trip-card h1 em{font-style:normal;color:var(--pine)}
.trip-card .dates{
  font-family:Fraunces,Georgia,serif;font-size:18.5px;font-weight:400;color:var(--ink-2);
  margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line);
}

/* the eight days, right on the card */
.week{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  border:1px solid var(--line);border-radius:3px;overflow:hidden;margin:0 0 18px;
  background:var(--card-2);
}
.week .day{
  padding:9px 9px 10px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.week .day:last-child{border-right:none}
.week .day.first,.week .day.last{background:#E8F7EF}
.week .dow{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.week .day b{
  font-family:Fraunces,Georgia,serif;font-size:24px;font-weight:800;line-height:1.05;
  margin:1px 0 3px;
}
.week .note{font-size:10px;line-height:1.22;color:var(--brick);font-weight:600;min-height:24px}
.week .day.first .note,.week .day.last .note{color:var(--pine-2)}

.statuses{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;padding:7px 13px;border-radius:3px;
  background:var(--card-2);border:1px solid var(--line);color:var(--ink-2);
}
.chip b{font-weight:700;color:var(--ink)}
.chip.on{background:#E8F7EF;border-color:#B6E2CC;color:#0A6B41}
.chip.on b{color:#183a2a}
.chip.off{background:#FFF3E3;border-color:#F5DCB4;color:#8A5B12}
.chip.off b{color:#6f271d}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;font-style:normal;flex:none}

/* ---------- countdown, as a hanging tag ---------- */
.clock{
  transform:rotate(1.1deg);
  background:radial-gradient(125% 135% at 12% 0%, #14A76A 0%, #0A6B41 48%, #05391F 100%);
  background-color:#0A6B41;
  color:#fff;border-color:#0A6B41;
  text-align:center;padding:26px 22px 21px;
  box-shadow:var(--lift-2), inset 0 1px 0 rgba(255,255,255,.07);
}
.clock::before{
  background:linear-gradient(100deg, rgba(255,255,255,.8), rgba(226,238,234,.94) 40%, rgba(255,255,255,.82));
  box-shadow:0 3px 7px -1px rgba(10,18,20,.28), inset 0 0 0 1px rgba(255,255,255,.7);
}
.clock .lead{
  margin:0 0 15px;font-size:11px;letter-spacing:.19em;text-transform:uppercase;
  color:#7FE3B4;font-weight:700;
}
.digits{display:flex;align-items:flex-start;justify-content:center}
.unit{display:flex;flex-direction:column;align-items:center;min-width:70px}
.unit b{
  font-family:Fraunces,Georgia,serif;font-weight:800;font-size:clamp(37px,4.6vw,52px);
  line-height:.96;font-variant-numeric:tabular-nums;color:#fff;
}
.unit span{
  font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin-top:8px;font-weight:700;
}
.sep{
  font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(28px,3.6vw,40px);
  line-height:1.04;color:rgba(255,255,255,.35);padding:0 3px;
}
.clock .foot{
  margin:17px 0 0;padding-top:14px;
  border-top:1px solid rgba(242,230,200,.2);
  font-size:12.5px;color:#b3a37c;line-height:1.45;
}

/* ---------- small pinned notes ---------- */
.note h3{
  font-size:16.5px;font-weight:600;margin:0 0 11px;
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.note h3 small{
  font-family:Karla,system-ui,sans-serif;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;
}

.arrivals{transform:rotate(.55deg)}
.arrivals ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.arrivals li{display:flex;align-items:center;gap:12px;font-size:14.5px;padding:7px 0;border-bottom:1px solid rgba(214,200,172,.5)}
.arrivals li:last-child{border-bottom:none}
.arrivals .from{width:80px;font-weight:700;flex:none}
.dots{display:flex;gap:4px;flex:none}
.dots i{
  width:9px;height:9px;border-radius:50%;background:var(--pine-2);display:block;
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.2);
}
.arrivals .unk{margin-left:auto;font-size:12px;color:var(--ink-3);font-style:italic}
.arrivals p{
  margin:13px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5;
  border-top:1px dashed var(--line-2);padding-top:12px;
}

/* weather, with a real range bar rather than an empty box */
.weather{transform:rotate(-.7deg)}
.wx-grid{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.temps{display:flex;align-items:baseline;gap:9px}
.temps b{font-family:Fraunces,Georgia,serif;font-size:44px;font-weight:800;line-height:1}
.temps .lo{font-family:Fraunces,Georgia,serif;font-size:25px;font-weight:600;color:var(--ink-3)}
.temps small{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;align-self:flex-end;padding-bottom:5px;
}
.range{display:flex;flex-direction:column;gap:7px}
.range .bar{
  height:9px;border-radius:99px;overflow:hidden;background:#E7EDEC;
  box-shadow:inset 0 1px 2px rgba(60,44,24,.18);
}
.range .bar span{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#5f86a8,#c08c33 62%,#c9762f);
}
.range .ticks{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.weather p{margin:14px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5;border-top:1px dashed var(--line-2);padding-top:12px}

/* sticky note */
.sticky{
  background:linear-gradient(170deg,#FFFFFF,#F4FAF7);
  border:1px solid var(--line);padding:19px 20px;transform:rotate(1.3deg);
  box-shadow:var(--lift);
}
.sticky::before{
  background:linear-gradient(100deg, rgba(255,255,255,.8), rgba(226,238,234,.94) 40%, rgba(255,255,255,.82));
}
.sticky h3{font-size:16.5px;margin:0 0 9px;font-weight:600}
.sticky p{margin:0 0 10px;font-size:13.5px;line-height:1.52;color:var(--ink-2)}
.sticky p:last-child{margin:0}
.sticky p b{color:var(--ink)}

/* ---------- section heads ---------- */
.sec-head,.shelf-head{
  display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:baseline;
  border-bottom:1px solid var(--line-2);padding-bottom:12px;margin-bottom:18px;
}
.sec-head h2{font-size:clamp(23px,2.9vw,31px);font-weight:700;grid-column:1}
.sec-head p{margin:0;grid-column:1;font-size:13.5px;color:var(--ink-2);max-width:64ch;line-height:1.5}
.sec-head a,.shelf-head a{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  color:var(--brick);font-weight:700;font-size:13.5px;text-decoration:none;
  white-space:nowrap;border-bottom:2px solid rgba(164,54,42,.4);padding-bottom:2px;
}
.sec-head a:hover,.shelf-head a:hover{border-bottom-color:var(--brick)}

.strip{padding-top:8px}

/* ---------- event cards ---------- */
.rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.event{
  background:var(--card);border:1px solid var(--line);border-radius:3px;
  box-shadow:var(--lift);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.event:nth-child(3n){transform:rotate(-.45deg)}
.event:nth-child(4n){transform:rotate(.4deg)}
.event:hover{transform:translateY(-3px) rotate(0);box-shadow:var(--lift-2)}
.event .ph{
  aspect-ratio:3/2;overflow:hidden;background:#F1F5F4;
  border-bottom:1px solid rgba(150,128,94,.3);
}
.event .ph img{width:100%;height:100%;object-fit:cover;display:block}
.event .body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.event h3{font-size:17px;font-weight:600;line-height:1.16}
.event .meta{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.event .when{font-size:13px;font-weight:700;color:var(--pine-2);display:flex;align-items:center;gap:7px}
.event .when i{width:7px;height:7px;border-radius:50%;background:var(--pine-2);font-style:normal;flex:none}
.event .caveat{font-size:12.5px;color:var(--brick);font-weight:600}
.likes{
  margin-top:auto;padding-top:12px;border-top:1px dashed var(--line-2);
  display:flex;align-items:center;gap:8px;
}
.faces{display:flex}
.faces b{
  width:25px;height:25px;border-radius:50%;background:var(--pine-2);color:#fff;
  display:grid;place-items:center;font-size:11px;font-weight:700;
  border:2px solid var(--card);margin-left:-8px;
}
.faces b:first-child{margin-left:0}
.likes span{font-size:12.5px;color:var(--ink-2)}
.likes button{
  margin-left:auto;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  background:var(--card-2);border:1px solid var(--line-2);border-radius:3px;
  padding:5px 11px;color:var(--ink-2);
}
.likes button:hover{background:var(--brick);border-color:var(--brick);color:#fff}

/* ---------- shelves ---------- */
.shelves{margin-top:44px;display:grid;gap:36px}
.shelf-head h3{font-size:21px;font-weight:700;grid-column:1}
.shelf-head .count{
  grid-column:1;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;
}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.tile{
  background:var(--card);border:1px solid var(--line);border-radius:3px;
  box-shadow:var(--lift);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--lift-2)}
.tile .ph{aspect-ratio:5/4;overflow:hidden;background:#F1F5F4}
.tile .ph img{width:100%;height:100%;object-fit:cover;display:block}
.tile .body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.tile h4{margin:0;font-family:Fraunces,Georgia,serif;font-size:15px;font-weight:600;line-height:1.2}
.tile .meta{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.tile .likes{padding-top:10px}
.tile .faces b{width:22px;height:22px;font-size:10px}
.tile.house .ph{
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 9px, transparent 9px 18px),
    linear-gradient(160deg,#e6dcc2,#dccfb0);
}
.tile.house .ph span{
  font-family:Fraunces,Georgia,serif;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8b7a5b;font-weight:600;
}

footer{
  border-top:1px solid var(--line-2);margin:0 clamp(14px,4vw,40px);
  padding:22px 0 44px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-2);
}

@media (max-width:1080px){
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
  .pair{grid-template-columns:1fr}
}
@media (max-width:860px){
  main{background:#fff}
.board-wrap{background:var(--paper);border-bottom:1px solid var(--line)}
.shelves-wrap{background:#fff}
.board{grid-template-columns:1fr}
  .masthead nav{display:none}
}
@media (max-width:620px){
  /* Paper tilt is charming on a desk, not on a 390px screen. */
  .pinned,.mark,.who,.event,.tile{transform:none}
  .rail,.tiles{grid-template-columns:1fr 1fr}
  .unit{min-width:0;flex:1}
  .pinned{padding:18px}
  .week{grid-template-columns:repeat(4,minmax(0,1fr))}
  .week .day:nth-child(4n){border-right:none}
  .week .day:nth-child(-n+4){border-bottom:1px solid var(--line)}
  .masthead{gap:10px;padding:12px 14px}
  .mark-text b{font-size:16.5px}
  .mark-text span{font-size:9.5px;letter-spacing:.12em}
  .who{padding:9px 13px;font-size:13px;white-space:nowrap}
  .wx-grid{grid-template-columns:1fr;gap:14px}
  .pair{grid-template-columns:1fr}
  .sec-head,.shelf-head{grid-template-columns:1fr}
  .sec-head a,.shelf-head a{grid-column:1;grid-row:auto;white-space:normal;justify-self:start}
  .lights-swag{height:36px;margin-bottom:-8px}
  footer{flex-direction:column;gap:6px}
}
@media (max-width:400px){
  .rail,.tiles{grid-template-columns:1fr}
}