:root{
    --paper:#f4dcd6; --card:#fcf6e8; --ink:#2d2a24; --ink-soft:#645c4d;
    --line:#2d2a24; --line-soft:#b9ad99;
    --pink:#efc3bc; --pink-deep:#9c4a42;
    --mustard:#e7b54a; --mustard-pale:#f4dfac; --mustard-deep:#7a5c10;
    --teal:#9bc4bc; --teal-pale:#d9e8e4; --teal-deep:#22635b;
    --blue:#aec9d8; --blue-deep:#33607e;
    --red:#b5473b; --on-red:#fdf7ea;
    --font-serif:"Iowan Old Style","Palatino","Book Antiqua",Georgia,serif;
    --font-ui:"Futura","Jost","Avenir Next","Century Gothic",sans-serif;
    --font-hand:"Caveat","Bradley Hand","Segoe Script",cursive;
    --plate:0 2px 0 var(--ink), 0 22px 40px -24px rgba(45,42,36,.5);
    --cell:40px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-serif);font-size:17px;line-height:1.55}

  .rule{max-width:1100px;margin:0 auto;border-top:1px dashed var(--line-soft)}

  .wrap{max-width:1100px;margin:0 auto;padding:0 20px}
  .eyebrow{font-family:var(--font-ui);font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin:0}
  h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.12;margin:.5em 0 0;font-weight:600}
  h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:.2em 0 .3em;font-weight:600}
  h3{font-size:1.05rem;margin:0 0 .3em;font-weight:600}
  .lede{color:var(--ink-soft);max-width:46ch}

  /* ---------- nav ---------- */
  nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 92%,transparent);
      backdrop-filter:blur(6px);border-bottom:1px solid color-mix(in srgb,var(--line) 18%,transparent)}
  nav .in{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px}
  .logo{width:30px;height:30px;display:block;flex:0 0 auto}
  .letterhead{width:26px;height:26px;display:block;margin:0 auto 8px}
  .wordmark{font-family:var(--font-serif);font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
  nav .home{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit}
  nav .links a{color:inherit;text-decoration:none}
  nav .links a:hover{color:var(--pink-deep)}
  nav .links{margin-left:auto;display:flex;gap:24px;font-family:var(--font-ui);font-size:.82rem;
             letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

  /* ---------- hero: the crossing on the hanging plate ---------- */
  /* Copy sits on solid paper. The painting is a full bleed band of its own,
     with the day's plate hung into it on chains. Text never over art. */
  .hero{background:var(--paper);padding:52px 0 0}
  .hero-copy{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
  .hero-fig{margin:0}
  .hero-fig img{width:100%;display:block;border:2px solid var(--ink);border-radius:14px;
    box-shadow:0 2px 0 var(--ink),0 26px 44px -26px rgba(45,42,36,.55)}
  .hero-fig figcaption{font-family:var(--font-serif);font-style:italic;font-size:1.15rem;
    color:var(--ink-soft);margin-top:14px;text-align:center;letter-spacing:0}
  @media(max-width:900px){.hero-copy{grid-template-columns:1fr;gap:32px}}
  .hero-copy .lede{margin-top:18px}
  .hero-foot{padding-top:26px;padding-bottom:44px}

  .band{position:relative;margin-top:40px;overflow:hidden;
        border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
        min-height:600px;padding:0 0 46px}
  .band-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
  .band::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:
    linear-gradient(180deg, color-mix(in srgb,var(--ink) 26%,transparent) 0%, transparent 22%)}
  .band-plate{position:relative;z-index:2;width:min(360px,42vw);
              margin:0 8% 0 auto;padding-top:0}
  @media(max-width:900px){
    .hero{padding-top:34px}
    .band{min-height:0;padding-bottom:34px}
    .band-plate{margin:0 auto;width:min(340px,86vw)}
  }

  .chains{display:flex;justify-content:center;gap:150px;height:46px}
  .chains i{width:3px;background:repeating-linear-gradient(180deg,var(--ink) 0 7px,transparent 7px 11px)}
  /* bottom padding reserves the corner marks' zone (9px mark inset 14px,
     ~27px once rotated) so the last row inside never sits on top of them */
  .plate{background:var(--card);border:2.5px solid var(--line);border-radius:16px;padding:18px 16px 34px;
         box-shadow:var(--plate);position:relative;transform-origin:top center;animation:sway 9s ease-in-out infinite}
  @keyframes sway{0%,100%{transform:rotate(-.5deg)}50%{transform:rotate(.5deg)}}
  .plate .corner{position:absolute;width:9px;height:9px;background:var(--red);rotate:45deg}
  .plate .corner.tl{top:14px;left:14px}.plate .corner.tr{top:14px;right:14px}
  .plate .corner.bl{bottom:14px;left:14px}.plate .corner.br{bottom:14px;right:14px}
  .howto{font-family:var(--font-serif);font-size:.95rem;color:var(--ink-soft);
    text-align:center;margin:0 0 14px;line-height:1.4}
  .kicker{font-family:var(--font-ui);font-size:.76rem;font-weight:700;letter-spacing:.2em;
          text-transform:uppercase;color:var(--red);text-align:center;margin:0 0 12px}

  .xb{display:grid;grid-template-columns:repeat(3,var(--cell));grid-auto-rows:var(--cell);
      gap:7px;justify-content:center;margin:2px 0 14px}
  .c{position:relative;border:2.5px solid var(--line);border-radius:10px;background:var(--card);
     display:flex;align-items:center;justify-content:center;font-weight:600;font-size:calc(var(--cell)*.5);text-transform:uppercase}
  .c .bn{position:absolute;top:2px;left:5px;font-family:var(--font-ui);font-size:.6rem;font-weight:700;color:var(--ink-soft)}
  .c.cur::after{content:'';position:absolute;left:20%;right:20%;bottom:14%;border-bottom:3px solid var(--red)}
  .p1{grid-area:1/2}.p2a{grid-area:2/1}.p2b{grid-area:2/2}.p2c{grid-area:2/3}
  .p3{grid-area:3/2}.p4{grid-area:4/2}.p5{grid-area:5/2}
  .pdiv{display:flex;align-items:center;gap:10px;justify-content:center;margin:0 auto 12px;width:180px}
  .pdiv b{flex:1;height:1px;background:var(--line-soft)}
  .pdiv i{width:7px;height:7px;background:var(--mustard);rotate:45deg;border:1.2px solid var(--line)}
  .clue{display:flex;gap:9px;align-items:flex-start;margin:0 0 9px;opacity:.55}
  .clue.on{opacity:1}
  .tag{flex:0 0 auto;width:23px;height:23px;border-radius:7px;border:1.5px solid var(--line);background:var(--card);
       display:grid;place-items:center;font-family:var(--font-ui);font-size:.72rem;font-weight:700}
  .clue.on .tag{background:var(--mustard)}
  .len{color:var(--ink-soft)}
  .btn{display:inline-block;font-family:var(--font-ui);font-size:.84rem;letter-spacing:.1em;text-transform:uppercase;
       padding:11px 18px;border-radius:10px;border:1.8px solid var(--line);background:var(--card);
       box-shadow:0 2px 0 var(--ink);cursor:pointer}
  .btn.primary{background:var(--red);color:var(--on-red);border-color:var(--red);box-shadow:0 2px 0 #7e3229}
  .row{display:flex;gap:9px;justify-content:center;margin-top:4px}

  .badges{display:flex;gap:12px;align-items:center;margin-top:10px}
  .subscribe-action{margin:18px 0 0}
  .subscribe-note{margin:10px 0 0;font-size:1rem;color:var(--ink-soft)}
  .xstatus{font-size:.95rem;line-height:1.45;margin:12px 0 0;color:var(--ink-soft)}
  .xstatus:empty{margin:0}
  .xnext{font-size:1rem;margin:18px 0 10px}
  #get-app,#crossing{scroll-margin-top:130px}