/* ===== THE LETTER, WEB EDITION ("the private edition"). The Order of the Tile =====
   One stylesheet for every letter page under /letters/NN/, built by letters/_build.py.
   Her design, approved 2026-09-23/24 (memory: oott-web-edition-letter-design):
   ivory paper, gold hairlines, ONE coral accent used sparingly, Playfair Display set
   light and italic, Crimson Text for reading, Lato small caps for labels. A centered
   masthead, a blush "In this letter" bar with a small coral diamond between links.
   Two columns: on the LEFT one column of notes that runs the whole length of the letter
   and scrolls with it (never sticky), notes stacked with three small coral diamonds
   between them and no tinted boxes; on the RIGHT the letter alone, about 760px, body
   18px. Drop cap on the opener. A coral diamond and a short coral rule on every section
   heading. Product pictures crisp, in a thin gold frame on a white mat. A thin coral
   reading line at the very top. "Before You Leave the Table" at the end. On phones the
   notes come after the letter.
   Everything is scoped under .lux so the site's shared.css cannot reach in, and the
   paper stays light in dark mode: it is paper. */

.lux{
  --ivory:#FBF8F2; --ink2:#221C18; --soft:#7A6E66; /* theme-ok: the letter is printed paper, light in both themes (her design) */
  --acc:#B26E5A;        /* coral, ornaments and large type only (3.8 to 1 on ivory) */ /* theme-ok: the letter is printed paper, light in both themes (her design) */
  --acc-text:#9E5A47;   /* the same coral a shade deeper for any text: 4.9 to 1 on ivory */ /* theme-ok: the letter is printed paper, light in both themes (her design) */
  --acc-deep:#6E3B2E;    /* a deeper coral, the lip under a pressed button */ /* theme-ok: the letter is printed paper, light in both themes (her design) */
  --brass:#C8B48B; --blush:#F5E6DF; --sage:#E9EFE6; --deep2:#8C4F3F; /* theme-ok: the letter is printed paper, light in both themes (her design) */
  --lx-disp:'Playfair Display',Georgia,'Times New Roman',serif;
  --lx-body:'Crimson Text',Georgia,'Times New Roman',serif;
  --lx-sans:'Lato',Helvetica,Arial,sans-serif;
  color-scheme:light;
  max-width:1280px; margin:28px auto 0; background:var(--ivory); color:var(--ink2);
  font-family:var(--lx-body); font-size:18px; line-height:1.7;
  padding-block:64px 56px; padding-inline:clamp(16px,4vw,64px);
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 24px 60px rgba(34,28,24,.10);
  overflow-wrap:break-word; text-align:left;
}
.lux *{box-sizing:border-box}
.lux a{color:inherit}
.lux img{max-width:100%;height:auto}

/* ---- reading line ---- */
.lx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:10001;pointer-events:none}
.lx-progress span{display:block;height:100%;width:0;background:#B26E5A;transition:width .1s linear} /* theme-ok: the letter is printed paper, light in both themes (her design) */

/* ---- masthead ---- */
.lx-mast{text-align:center;max-width:760px;margin:0 auto 40px}
.lx-house{font-family:var(--lx-sans);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);font-weight:700;padding-left:.14em}
.lx-rule{display:flex;align-items:center;gap:14px;max-width:340px;margin:18px auto}
.lx-rule span{flex:1;height:1px;background:var(--brass)}
.lx-rule i{font-style:normal;color:var(--acc);font-size:9px;line-height:1}
.lx-issue{font-family:var(--lx-body);font-style:italic;font-size:17px;color:var(--soft);margin:0}
.lux .lx-title{font-family:var(--lx-disp);font-weight:400;font-style:italic;font-size:clamp(38px,6.4vw,72px);line-height:1.05;margin:18px 0 14px;letter-spacing:-.005em;text-wrap:balance;color:var(--ink2)}
.lx-tag{font-family:var(--lx-sans);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-text);margin:0;line-height:1.6}

/* ---- the blush bar ---- */
.lx-bar{margin:0 calc(-1 * clamp(16px,4vw,64px)) 56px;background:var(--blush);border-top:1px solid var(--brass);border-bottom:1px solid var(--brass);
  padding:14px clamp(16px,4vw,64px);display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 22px}
.lx-bar-k{font-family:var(--lx-sans);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--deep2);font-weight:700;width:100%;text-align:center}
.lx-bar a{font-family:var(--lx-disp);font-style:italic;font-size:17px;color:var(--ink2);text-decoration:none;white-space:nowrap}
.lx-bar a + a::before{content:"\25C6";color:var(--acc);font-style:normal;font-size:7px;vertical-align:middle;margin:0 16px 0 -6px;display:inline-block}
.lx-bar a:hover,.lx-bar a:focus-visible{color:var(--acc-text);outline:none}
@media (min-width:1101px){.lx-bar-k{width:auto}}

/* ---- the grid: notes left, letter right ---- */
.lx-grid{display:grid;grid-template-columns:260px minmax(0,760px);justify-content:center;gap:64px;align-items:stretch}
.lx-main{min-width:0;order:2}
/* Notes stack from the top, three small diamonds between them, spaced as in the
   approved sample (34px above the diamonds, 30px below). The column reaches the
   bottom of the letter because there are enough notes, never because of gaps. */
.lx-margin{order:1;display:flex;flex-direction:column;justify-content:flex-start;padding:6px 40px 6px 0;border-right:1px solid var(--brass)}
.lx-sep{text-align:center;color:var(--acc);font-size:8px;line-height:1;letter-spacing:.2em;margin:34px 0 30px}
.lx-sep::before{content:"\25C6\2003\25C6\2003\25C6"}

/* ---- the notes ---- */
.lx-mh{font-family:var(--lx-sans);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);padding-bottom:10px;border-bottom:1px solid var(--brass);margin-bottom:22px}
.lx-k{display:block;font-family:var(--lx-sans);font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-text);margin-bottom:8px;line-height:1.5}
.lux .lx-note h4{font-family:var(--lx-disp);font-weight:400;font-style:italic;font-size:21px;line-height:1.2;margin:0 0 8px;color:var(--ink2)}
.lux .lx-note p{font-size:15px;line-height:1.55;margin:0 0 10px;color:var(--ink2)}
.lx-quote{font-style:italic}
.lx-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:4px}
.lux .lx-go{font-family:var(--lx-sans);font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:2px;line-height:1.5}
.lux .lx-go:hover,.lux .lx-go:focus-visible{color:var(--acc-text);border-color:var(--acc);outline:none}
.lx-initial{width:52px;height:52px;border-radius:50%;border:1px solid var(--brass);color:var(--acc);display:grid;place-items:center;font-family:var(--lx-disp);font-style:italic;font-size:26px;margin:4px 0 12px}
.lux .lx-btn-s{display:inline-block;font-family:var(--lx-sans);font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--acc-text);text-decoration:none;padding:11px 18px;margin-top:4px} /* theme-ok: the letter is printed paper, light in both themes (her design) */
.lux .lx-btn-s:hover{background:var(--ink2)}
.lux .lx-royal{font-size:15px;font-style:italic;color:var(--soft);margin-top:14px}
.lx-royal a{color:var(--acc-text);text-decoration:none;border-bottom:1px solid var(--brass)}
.lx-frame{display:block;width:100%;border:1px solid var(--brass);padding:6px;background:#fff;margin:0 0 14px} /* theme-ok: the letter is printed paper, light in both themes (her design) */
.lx-frame img{display:block;width:100%;height:auto;image-rendering:auto}
.lx-pic{display:block;width:100%;height:auto;border-radius:3px;margin:0 0 12px}

/* ---- the letter ---- */
.lux .lx-main p{font-size:18px;line-height:1.7;margin:0 0 18px;color:var(--ink2)}
.lux .lx-salute{font-family:var(--lx-disp);font-style:italic;font-size:21px}
.lux .lx-first::first-letter{float:left;font-family:var(--lx-disp);font-size:70px;line-height:.82;padding:8px 10px 0 0;color:var(--acc)}
.lux .lx-sig{text-align:right;font-family:var(--lx-disp);font-style:italic;font-size:19px}
.lx-sec{margin-top:56px;scroll-margin-top:80px}
.lx-orn{text-align:center;color:var(--acc);font-size:10px;line-height:1;margin-bottom:22px}
.lux .lx-sec h2{font-family:var(--lx-disp);font-weight:400;font-size:clamp(24px,3.2vw,30px);letter-spacing:.14em;text-transform:uppercase;text-align:center;margin:0;color:var(--ink2);text-wrap:balance;line-height:1.25}
.lx-sec h2::after{content:"";display:block;width:44px;height:2px;background:var(--acc);margin:14px auto 0}
.lux .lx-sub{font-style:italic;text-align:center;color:var(--acc-text);font-size:18px;margin:12px 0 26px;text-wrap:balance}
.lux .lx-lead{font-family:var(--lx-disp);font-style:italic;font-size:22px;line-height:1.35;margin:30px 0 14px}
.lux .lx-lead,.lux .lx-lead strong{font-weight:700}  /* in section subheads: bold italic (her ask) */
.lux .lx-label{font-family:var(--lx-sans);font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-text);margin:26px 0 8px}
.lux .lx-label strong{font-weight:700}
.lx-main a{color:var(--acc-text);text-decoration:none;border-bottom:1px solid var(--brass)}
.lx-main a:hover,.lx-main a:focus-visible{border-color:var(--acc);outline:none}

/* quote cards: square, a keepsake on the page */
.lx-qc{margin:34px auto 30px;max-width:650px}  /* 650 so the smallest line on a card shows at 15px on a wide screen */
.lx-qc img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 12px 34px rgba(34,28,24,.16)}

/* the event board */
.lx-board{list-style:none;margin:6px 0 24px;padding:0;border-top:1px solid var(--brass)}
.lx-board li{padding:14px 0;border-bottom:1px solid var(--brass)}
.lux .lx-board .lx-k{margin-bottom:4px}
.lx-board span:last-child{display:block;font-size:17px;line-height:1.55}

/* the Weekly Challenge */
/* drill one wears the Keepsake card's double frame, drawn on the outside edge:
   a bold outer line, a gap, then a thin inner line (her ask, 2026-09-24) */
.lx-drill{background:var(--sage);border-radius:6px;padding:30px 24px;text-align:center;margin:18px 12px 32px;
  outline:4px solid var(--acc);outline-offset:9px;box-shadow:0 0 0 1.5px var(--acc)}
.lux .lx-drill .lx-k{color:var(--deep2)}
.lx-rack{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:14px 0 18px}
.lx-rack img{width:34px;height:auto;display:block}
.lux .lx-drill .lx-q{font-style:italic;font-size:18px}
.lx-drill ol{display:table;text-align:left;margin:0 auto 18px;padding-left:28px;font-size:17px;line-height:1.6}
.lx-drill li{margin:0 0 6px}
.lux .lx-drill .lx-note-s{font-size:16px;color:var(--ink2)}
.lux .lx-btn{display:table;margin:6px auto 0;font-family:var(--lx-sans);font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--acc-text);text-decoration:none;padding:14px 30px;border:0} /* theme-ok: the letter is printed paper, light in both themes (her design) */
.lux .lx-btn:hover{background:var(--ink2)}

/* the closing */
.lux .lx-chant{text-align:center;font-style:italic;color:var(--soft);font-size:17px;margin:34px auto 0;max-width:34em}
.lux .lx-sign{text-align:center;font-style:italic;margin-top:28px}
.lx-sign span{display:block;font-family:var(--lx-disp);font-size:24px;margin-top:6px}
.lux .lx-fwd{text-align:center;font-size:16px;color:var(--soft)}
.lx-ask{text-align:center;margin:8px 0 0}

/* Prim Shows Her Work */
.lux .lx-src-intro{font-style:italic;color:var(--soft);font-size:16px;text-align:center}
.lx-src{list-style:none;margin:0;padding:0;counter-reset:src}
.lx-src li{font-size:15.5px;line-height:1.55;padding:9px 0 9px 34px;border-bottom:1px solid rgba(200,180,139,.55);position:relative;counter-increment:src}
.lx-src li::before{content:counter(src);position:absolute;left:0;top:10px;font-family:var(--lx-sans);font-size:15px;font-weight:700;color:var(--acc-text);letter-spacing:.1em}
.lux .lx-src a{color:var(--ink2);border-bottom:1px solid var(--brass)}

/* ---- before you leave ---- */
.lx-stay{max-width:980px;margin:72px auto 0;text-align:center}
.lux .lx-stay h3{font-family:var(--lx-disp);font-weight:400;font-style:italic;font-size:30px;margin:6px 0 30px;color:var(--ink2)}
.lx-stay-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.lux .lx-stay-item{display:grid;gap:4px;align-content:start;padding:6px 26px;text-decoration:none;color:var(--ink2);border-left:1px solid var(--brass)}
.lx-stay-item:first-child{border-left:0}
.lx-stay-item em{font-family:var(--lx-disp);font-size:22px;line-height:1.25}
.lx-stay-item span:last-child{font-size:16px;line-height:1.5;color:var(--soft)}
.lx-stay-item:hover em,.lx-stay-item:focus-visible em{color:var(--acc-text)}
.lx-stay-item:focus-visible{outline:1px solid var(--brass);outline-offset:4px}
.lx-foot{margin-top:56px;padding-top:22px;border-top:1px solid var(--brass);display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;font-family:var(--lx-sans);font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.lux .lx-foot a{color:var(--soft);text-decoration:none}
.lux .lx-foot a:hover,.lux .lx-foot a:focus-visible{color:var(--acc-text);outline:none}
.lx-foot i{color:var(--acc);font-style:normal;font-size:7px;align-self:center}

/* ---- narrower ---- */
@media (max-width:1100px){.lx-grid{grid-template-columns:220px minmax(0,1fr);gap:44px}.lx-margin{padding-right:28px}}
@media (max-width:860px){
  .lux{margin-top:12px;padding-block:44px 40px}
  .lx-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .lx-margin{order:3;display:block;border-right:0;border-top:1px solid var(--brass);padding:40px 0 0;margin-top:56px}
  .lx-stay-row{grid-template-columns:1fr}
  .lux .lx-stay-item{border-left:0;border-top:1px solid var(--brass);padding:18px 0}
  .lx-stay-item:first-child{border-top:0}
  .lux .lx-first::first-letter{font-size:60px}
  .lx-bar{gap:4px 16px}
  .lx-bar a + a::before{margin:0 12px 0 -4px}
  .lx-margin .lx-frame,.lx-margin .lx-pic,.lx-margin .lx-ad{max-width:270px}  /* every note picture stays at 2x or better */
}
@media (max-width:480px){.lux .lx-main p{font-size:17.5px}.lx-drill{padding:24px 14px}.lx-rack img{width:26px}.lx-rack{gap:3px}}
@media print{.lx-progress,nav,footer{display:none}.lux{box-shadow:none;margin:0}}

/* ---- ad pictures drawn for the column (letters/_ads.py) ---- */
.lx-ad{display:block;width:100%;height:auto;border-radius:6px;margin:0 0 14px}

/* ---- the Weekly Challenge teaser, in real type ---- */
.lux .lx-teaser{display:grid;gap:10px;justify-items:center;text-align:center;text-decoration:none;color:var(--ink2);
  background:var(--ivory);border:1px solid var(--acc);outline:3px solid var(--acc);outline-offset:5px;border-radius:4px;
  padding:26px 16px 22px;margin:8px 8px 18px}
.lx-t1{font-family:var(--lx-sans);font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--acc-text)}
.lx-t2{font-family:var(--lx-disp);font-size:28px;line-height:1.15;color:var(--ink2)}
.lx-t3{font-family:var(--lx-body);font-style:italic;font-size:19px;line-height:1.35}
.lx-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%;max-width:230px;margin:6px 0}
.lx-tiles img{width:100%;height:auto;display:block}
.lx-t4{font-family:var(--lx-body);font-style:italic;font-size:16px;color:var(--acc-text)}
.lx-teaser:hover .lx-t2,.lx-teaser:focus-visible .lx-t2{color:var(--acc-text)}

/* ---- Prim Shows Her Work, a toggle, closed by default ---- */
.lx-srcbox summary{list-style:none;cursor:pointer;display:table;margin:4px auto 22px;font-family:var(--lx-sans);font-size:15px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--acc-text);border:1px solid var(--brass);border-radius:999px;padding:12px 24px}
.lx-srcbox summary::-webkit-details-marker{display:none}
.lx-srcbox summary::after{content:"\25BE";margin-left:10px;display:inline-block;transition:transform .2s}
.lx-srcbox[open] summary::after{transform:rotate(180deg)}
.lx-srcbox summary:hover,.lx-srcbox summary:focus-visible{border-color:var(--acc);outline:none;background:var(--blush)}
.lx-srcbox .lx-hide,.lx-srcbox[open] .lx-show{display:none}
.lx-srcbox[open] .lx-hide{display:inline}

/* ---- buttons, her rule (2026-09-24): rounded corners, a hint of a shadow so you
   know you can press it, a pressed state that sinks it, a visible focus ring.
   Every button styled element on the page; the small cap text links stay links. ---- */
.lux .lx-btn,.lux .lx-btn-s,.lx-srcbox summary{border-radius:8px;
  box-shadow:0 2px 0 var(--acc-deep),0 4px 10px rgba(34,28,24,.18);
  transition:transform .08s ease,box-shadow .08s ease,background .15s}
.lx-srcbox summary{border-radius:999px;box-shadow:0 2px 0 var(--brass),0 4px 10px rgba(34,28,24,.12)}
.lux .lx-btn:active,.lux .lx-btn-s:active,.lx-srcbox summary:active{transform:translateY(2px);
  box-shadow:0 0 0 var(--acc-deep),0 1px 3px rgba(34,28,24,.18)}
.lux .lx-btn:focus-visible,.lux .lx-btn-s:focus-visible,.lx-srcbox summary:focus-visible{outline:3px solid var(--ink2);outline-offset:3px}
.lux .lx-btn-s{margin-top:8px}

/* button labels sit dead center, both ways: flex centering, and the letter spacing
   the last letter carries is given back on the left so the word is not pushed left */
.lux .lx-btn,.lux .lx-btn-s{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;min-height:44px}
.lux .lx-btn-s{display:inline-flex;padding:11px 18px 11px calc(18px + .16em)}
.lux .lx-btn{width:max-content;margin-left:auto;margin-right:auto;padding:14px 30px 14px calc(30px + .14em)}
.lx-srcbox summary{padding-left:calc(28px + .12em)}  /* the caret on the right is balanced on the left */

/* ---- a button label stays on one line (her note, 2026-09-24): "Nominate someone"
   wrapped to two lines in the notes column. The column is 219px wide above 1100px
   and 191px from 861px to 1100px; measured at 15px Lato bold, the label is 182px at
   .1em spacing and 172px at .06em, so 8px each side fits. The spacing the last letter carries is given back
   on the left, so the word stays centered. ---- */
.lux .lx-btn,.lux .lx-btn-s{white-space:nowrap}
.lux .lx-btn-s{letter-spacing:.1em;padding:11px 16px 11px calc(16px + .1em)}
@media (max-width:1100px) and (min-width:861px){.lux .lx-btn-s{letter-spacing:.06em;padding:11px 8px 11px calc(8px + .06em)}}

/* ---- The dressing (2026-09-29). Her note on Letter 27: bring the design she loved on the dressed
   emails of Letters 29 to 31 onto the page ("smaller quote cards, more imagery, pullout quotes and
   boxes"). Recipe and her rules: letters/DRESSING.md. Everything takes the letter's own colour. ---- */
.lx-dressed .lx-qc{max-width:500px}   /* halfway between full and half, as on the emails */
.lx-step{display:grid;grid-template-columns:44px 1fr;align-items:start;margin:30px 0 14px}
.lx-num{width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-family:var(--lx-disp);font-weight:700;font-size:18px;line-height:1;margin-top:2px} /* theme-ok: the letter is printed paper, light in both themes (her design) */
.lux .lx-main .lx-step .lx-lead{margin:0}
.lx-callout{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;background:#fff;border:1px solid var(--acc-line,var(--brass));border-radius:10px;padding:20px 22px;margin:8px 0 26px;box-shadow:0 6px 18px rgba(34,28,24,.06)} /* theme-ok: the letter is printed paper, light in both themes (her design) */
.lx-callout img{display:block;width:44px;height:auto;margin-top:4px}
.lux .lx-main .lx-callout p{margin:0}
.lux .lx-main .lx-pull,.lux .lx-main .lx-pull strong{font-weight:400}
.lux .lx-main .lx-pull{font-family:var(--lx-disp);font-style:italic;font-size:23px;line-height:1.5;color:var(--acc-text);border-left:3px solid var(--acc);padding:4px 0 4px 22px;margin:8px 0 26px}
.lx-welcome{border-top:1px solid var(--acc-line,var(--brass));border-bottom:1px solid var(--acc-line,var(--brass));text-align:center;padding:22px 12px;margin:8px 0 26px}
.lux .lx-main .lx-welcome p{font-style:italic;margin:0}
.lx-quiet{text-align:center;margin:28px 24px}
.lx-quiet img{display:inline-block;width:34px;height:auto;margin-bottom:10px}
.lux .lx-main .lx-quiet p{font-style:italic;margin:0}
.lx-pic{margin:10px auto 30px;max-width:520px;text-align:center}
.lx-pic .lx-frame{margin:0}
.lx-pic figcaption{font-family:var(--lx-disp);font-style:italic;font-size:16px;color:var(--soft);margin-top:10px}
.lux .lx-main .lx-pic a{border:0}
.lx-main .lx-ask + .lx-ask{margin-top:18px}