:root{
    --ink:#26221c; --soft:#5c554b; --stone:#8f867a; --bg:#eee9e0; --bg2:#e4ded3;
    --paper:#fbf9f5; --paper2:#f4f1ea; --gold:#9a7b3f; --gold-dk:#7d6231;
    --line:rgba(0,0,0,.13); --hair:rgba(0,0,0,.08); --shadow:rgba(60,52,40,.26);
    --serif:Georgia,'Times New Roman',serif; --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
    --hd:58px; --ft:74px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;height:100%;}
  body{font-family:var(--sans);color:var(--ink);
    background:radial-gradient(120% 90% at 50% -10%, #a8987f 0%, var(--bg) 48%, var(--bg2) 100%);
    min-height:100%;overflow:hidden;}

  /* visible keyboard focus everywhere (was absent before) */
  :focus-visible{outline:2px solid var(--gold-dk);outline-offset:2px;border-radius:4px;}
  .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .skip{position:fixed;left:-999px;top:8px;z-index:100;background:#fff;color:var(--ink);padding:10px 16px;border-radius:999px;
    border:1px solid var(--gold);font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;}
  .skip:focus{left:12px;}

  header{position:fixed;top:0;left:0;right:0;height:calc(var(--hd) + env(safe-area-inset-top));z-index:40;display:flex;align-items:center;justify-content:space-between;
    padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
    background:rgba(74,63,51,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.12);}
  .brand{display:flex;flex-direction:column;line-height:1;}
  .brand .name{font-size:14px;letter-spacing:.42em;text-transform:uppercase;font-weight:600;padding-left:.42em;color:#f3ede3;}
  .brand .sub{font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-lt);margin-top:5px;padding-left:.34em;}
  /* the edition tag drops off narrow screens so the brand never crowds the buttons */
  @media(max-width:720px){ .brand .sub .ed{display:none;} }
  .tools{display:flex;align-items:center;gap:6px;}
  .btn{appearance:none;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#f3ede3;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;padding:9px 13px;border-radius:999px;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
  .btn:hover{border-color:var(--gold-lt);color:var(--gold-lt);}
  .btn[aria-expanded="true"]{border-color:var(--gold);color:var(--gold-dk);background:#fff;}
  .btn svg{width:14px;height:14px;display:block;} .btn.icon{padding:9px;}
  @media(max-width:720px){ .btn .lbl{display:none;} .btn{padding:9px;} }

  #menu{position:fixed;top:calc(var(--hd) + env(safe-area-inset-top));left:0;right:0;z-index:39;background:rgba(251,249,245,.98);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);box-shadow:0 18px 40px -24px var(--shadow);max-height:0;overflow:hidden;transition:max-height .35s ease;}
  #menu.open{max-height:72vh;overflow:auto;}
  .menu-inner{max-width:820px;margin:0 auto;padding:22px 24px 28px;}
  .menu-inner h3{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-dk);margin:0 0 14px;font-weight:600;}
  .menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
  .menu-item{text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:14px 16px;cursor:pointer;
    transition:.18s;display:flex;align-items:baseline;gap:12px;font:inherit;color:var(--ink);}
  .menu-item:hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:0 10px 24px -16px var(--shadow);}
  .menu-item .pg{font-size:11px;color:var(--gold-dk);font-weight:700;min-width:22px;}
  .menu-item .ti b{font-size:14px;font-weight:600;display:block;}
  .menu-item .ti span{font-size:11px;color:var(--stone);}

  #stage{position:absolute;top:calc(var(--hd) + env(safe-area-inset-top));left:0;right:0;bottom:calc(var(--ft) + env(safe-area-inset-bottom));
    display:flex;align-items:center;justify-content:center;padding:26px;}
  #book-wrap{position:relative;height:100%;width:100%;display:flex;align-items:center;justify-content:center;}
  #book{position:relative;perspective:2600px;}
  #spread{position:relative;display:flex;height:100%;box-shadow:0 34px 70px -30px var(--shadow);}
  .page-face{height:100%;position:relative;overflow:hidden;background:var(--paper);}
  #leftPage{box-shadow:inset -24px 0 40px -30px rgba(0,0,0,.32);}
  #rightPage{box-shadow:inset 24px 0 40px -30px rgba(0,0,0,.32);}
  #spine{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);z-index:6;pointer-events:none;
    background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,0) 44%,rgba(0,0,0,0) 56%,rgba(0,0,0,.18));}

  #flip{position:absolute;top:0;height:100%;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.62,.28,1);z-index:20;pointer-events:none;display:none;}
  #flip .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:var(--paper);}
  #flip .front{box-shadow:inset 24px 0 40px -30px rgba(0,0,0,.28);}
  #flip .back{transform:rotateY(180deg);box-shadow:inset -24px 0 40px -30px rgba(0,0,0,.28);}
  #flip .shade{position:absolute;inset:0;pointer-events:none;transition:opacity .72s;}
  .holder{position:absolute;inset:0;}

  /* Each page is authored at a fixed 1275x1651 design size and scaled to fit as one
     unit. That keeps every page a true miniature of the print page at any screen
     size, instead of type and photos resizing independently and overflowing. */
  .pagebox{position:absolute;top:0;left:0;width:1275px;height:1651px;transform-origin:0 0;transform:scale(var(--s,1));}

  /* Seasonal motif. Sized in page design units (1275-wide canvas), so these px
     are NOT part of the scaled block below. Swapped in for the plain rule. */
  .motif{display:block;height:auto;}
  .cov .motif{width:360px;margin:26px auto;color:var(--gold);opacity:.8;}
  .opener .motif{width:260px;margin:20px 0 26px;color:var(--accent,var(--gold));opacity:.9;}

  /*SCALE-START*/
  /* ============ PAGE COMPONENTS ============ */
  .pg{height:100%;width:100%;position:relative;overflow:hidden;background:var(--paper);color:var(--ink);}
  .pnum{position:absolute;top:5.4%;font:600 21.6667px/1 var(--sans);letter-spacing:.22em;color:var(--stone);z-index:5;}
  .pnum.l{left:8%;} .pnum.r{right:8%;}
  .web{position:absolute;bottom:4.2%;left:0;right:0;text-align:center;font:600 18.4167px/1 var(--sans);letter-spacing:.24em;text-transform:lowercase;color:var(--stone);z-index:5;}
  .web.d{color:rgba(255,255,255,.82);text-shadow:0 2.1667px 8.6667px rgba(0,0,0,.85);}

  /* full-bleed photo page */
  .fp{position:absolute;inset:0;}
  .fp .bg{position:absolute;inset:0;background-size:cover;background-position:center;}
  .fp .scr{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.45) 20%,rgba(0,0,0,.12) 40%,transparent 58%);}
  .fp .cap{position:absolute;left:8%;right:8%;bottom:7.5%;z-index:4;font:600 22.75px/1.6 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#fff;text-shadow:0 2.1667px 6.5px rgba(0,0,0,.95),0 4.3333px 39px rgba(0,0,0,.8);}
  .fp .cap b{display:block;font-weight:700;color:var(--gold-lt);margin-bottom:10.8333px;font-size:20.5833px;text-shadow:0 2.1667px 6.5px rgba(0,0,0,.95);}
  .fp .cap.r{text-align:right;}
  .fp .pnum{color:rgba(255,255,255,.8);text-shadow:0 2.1667px 8.6667px rgba(0,0,0,.8);}

  /* editorial feature page (light) */
  .feat{position:absolute;inset:0;padding:12% 9% 10%;display:flex;flex-direction:column;}
  .eyebrow{font:600 21.6667px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--gold-dk);}
  .feat h2{font-family:var(--serif);font-weight:400;font-size:86.6667px;line-height:1.1;letter-spacing:.01em;margin:30.3333px 0 0;color:var(--ink);}
  .feat .copy{font:300 30.3333px/1.85 var(--sans);color:var(--soft);margin-top:30.3333px;max-width:36ch;}
  .feat .photo{flex:1;margin-top:43.3333px;background-size:cover;background-position:center;border-radius:4.3333px;box-shadow:0 34.6667px 73.6667px -47.6667px var(--shadow);}
  .feat .itemno{margin-top:30.3333px;font:600 20.5833px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--stone);}

  /* opener page (light, tinted accent) */
  .opener{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:12% 10%;}
  .opener .no{font:600 23.8333px/1 var(--sans);letter-spacing:.3em;color:var(--accent,#9a7b3f);}
  .opener h1{font-family:var(--serif);font-weight:400;font-size:117px;line-height:1.04;margin:39px 0 0;letter-spacing:.01em;}
  .opener .eyebrow2{margin-top:34.6667px;font:600 21.6667px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--accent,#9a7b3f);}
  .opener .rule{width:117px;height:4.3333px;background:var(--accent,#9a7b3f);margin:47.6667px 0;}
  .opener .copy{font:300 32.5px/1.9 var(--sans);color:var(--soft);max-width:34ch;}
  .opener .logo{width:min(52%,520px);margin-bottom:47.6667px;}

  /* spec page (light) */
  .spec{position:absolute;inset:0;padding:11% 9% 9%;display:flex;flex-direction:column;}
  .spec .hd{display:flex;align-items:baseline;justify-content:space-between;gap:21.6667px;}
  .spec h3{font-family:var(--serif);font-weight:400;font-size:65px;margin:0;letter-spacing:.01em;}
  .spec .sub{font:600 19.5px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dk);}
  .spec .photo{margin-top:34.6667px;height:34%;background-size:cover;background-position:center;border-radius:4.3333px;box-shadow:0 30.3333px 65px -47.6667px var(--shadow);}
  .swlbl{margin-top:43.3333px;font:600 19.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--stone);}
  .sws{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;}
  .sw{text-align:center;width:95.3333px;}
  .sw i{display:block;width:73.6667px;height:73.6667px;margin:0 auto;border-radius:8.6667px;border:2.1667px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 2.1667px rgba(255,255,255,.25);}
  .sw span{display:block;font:600 16.25px/1.2 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:var(--stone);margin-top:13px;}
  table.tbl{width:100%;border-collapse:collapse;margin-top:43.3333px;}
  table.tbl th{text-align:left;font:600 18.4167px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dk);
    padding:0 13px 19.5px 0;border-bottom:3.25px solid rgba(0,0,0,.32);}
  table.tbl td{font:400 24.9167px/1.35 var(--sans);color:var(--ink);padding:17.3333px 13px 17.3333px 0;border-bottom:2.1667px solid var(--hair);vertical-align:top;}
  table.tbl td.i{font-weight:600;letter-spacing:.02em;white-space:nowrap;}
  table.tbl tr:last-child td{border-bottom:none;}

  /* clickable table of contents */
  .toc{position:relative;z-index:16;margin-top:47.6667px;}
  .tocrow{display:flex;align-items:baseline;gap:26px;width:100%;text-align:left;background:none;border:none;
    font:inherit;color:var(--ink);cursor:pointer;padding:28.1667px 8.6667px;border-bottom:2.1667px solid var(--hair);transition:.16s;}
  .tocrow:first-child{border-top:2.1667px solid var(--hair);}
  .tocrow:hover{color:var(--gold-dk);padding-left:17.3333px;}
  .tocrow .i{font-family:var(--serif);font-size:43.3333px;min-width:8.5em;}
  .tocrow .d{flex:1;font:300 27.0833px/1.4 var(--sans);color:var(--soft);}
  .tocrow:hover .d{color:var(--gold-dk);}
  .tocrow .p{font:600 23.8333px/1 var(--sans);letter-spacing:.14em;color:var(--gold-dk);}

  /* cover / back (soft) */
  .cov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:9%;
    background:radial-gradient(120% 80% at 50% 16%, #fdfcf9 0%, var(--paper) 52%, var(--paper2) 100%);}
  .cov .frame{position:absolute;inset:34.6667px;border:2.1667px solid var(--gold-soft);pointer-events:none;}
  .cov .mono{font:600 23.8333px/1 var(--sans);letter-spacing:.48em;text-transform:uppercase;color:var(--gold-dk);}
  .cov h1{font-family:var(--serif);font-weight:400;font-size:130px;letter-spacing:.14em;text-transform:uppercase;margin:52px 0 0;line-height:1.02;color:var(--ink);}
  .cov .rule{width:130px;height:2.1667px;background:var(--gold);margin:52px 0;}
  .cov .eyebrow2{font:400 32.5px/1 var(--sans);letter-spacing:.4em;text-transform:uppercase;color:var(--soft);}
  .cov .yr{margin-top:65px;font:400 28.1667px/1 var(--sans);letter-spacing:.42em;color:var(--gold-dk);}
  .cov .foot{position:absolute;bottom:8.5%;left:0;right:0;font:600 19.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--stone);}

  #leftPage .fp .cap, #flip .back .fp .cap{text-align:left;}
  #rightPage .fp .cap, #flip .front .fp .cap{text-align:right;}
  #leftPage .pnum, #flip .back .pnum{left:8%;right:auto;}
  #rightPage .pnum, #flip .front .pnum{right:8%;left:auto;}

  .hot{position:absolute;transform:translate(-50%,-50%);z-index:8;display:block;text-decoration:none;cursor:pointer;}
  .hot-dot{display:block;width:32.5px;height:32.5px;border-radius:50%;background:rgba(255,255,255,.92);border:4.3333px solid var(--gold);position:relative;}
  .hot-dot::before{content:'';position:absolute;left:50%;top:50%;width:100%;height:100%;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 0 var(--gold-soft);animation:hotPulse 2.2s infinite;}
  @keyframes hotPulse{0%{box-shadow:0 0 0 0 var(--gold-soft);}70%{box-shadow:0 0 0 28.1667px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
  .hot-pop{position:absolute;bottom:165%;left:50%;transform:translate(-50%,13px);opacity:0;pointer-events:none;white-space:nowrap;background:rgba(28,24,18,.94);color:#fff;font:600 19.5px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:17.3333px 23.8333px;border-radius:15.1667px;transition:.2s;box-shadow:0 21.6667px 52px -21.6667px rgba(0,0,0,.7);z-index:9;}
  .hot-pop em{display:block;margin-top:6.5px;font-style:normal;color:var(--gold);font-size:17.3333px;letter-spacing:.12em;}
  .hot-pop::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:10.8333px solid transparent;border-top-color:rgba(28,24,18,.94);}
  .hot:hover .hot-pop, .hot:focus-visible .hot-pop, .hot.armed .hot-pop{opacity:1;transform:translate(-50%,0);}
  .hot:focus-visible .hot-dot{box-shadow:0 0 0 6.5px var(--gold-dk);}
  .hot.armed .hot-dot{background:var(--gold);}
  .sws.tight{gap:13px 10px;}
  .sws.tight .sw{width:119px;}
  .sws.tight .sw span{font-size:14.9167px;letter-spacing:0;margin-top:10.8333px;}
  a.sku{color:inherit;text-decoration:none;border-bottom:2.1667px solid var(--gold-soft);transition:.15s;}
  a.sku:hover{color:var(--gold-dk);border-bottom-color:var(--gold-dk);}
  a.site{color:inherit;text-decoration:none;transition:.15s;}
  a.site:hover{color:var(--gold-dk);}
  /*SCALE-END*/

  footer{position:fixed;left:0;right:0;bottom:0;height:calc(var(--ft) + env(safe-area-inset-bottom));z-index:40;
    display:flex;align-items:center;justify-content:center;gap:20px;padding-bottom:env(safe-area-inset-bottom);
    background:rgba(74,63,51,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.12);}
  .nav-btn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:.18s;color:#f3ede3;}
  .nav-btn:hover{border-color:var(--gold-lt);color:var(--gold-lt);}
  .nav-btn:disabled{opacity:.3;cursor:default;}
  .nav-btn svg{width:19px;height:19px;}
  .counter{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:150px;}
  .counter .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#cfc4b4;}
  .counter .lbl{display:flex;align-items:center;gap:6px;}
  #pgNow{width:3.2ch;padding:3px 4px;border:1px solid rgba(255,255,255,.22);border-radius:4px;background:rgba(255,255,255,.08);
    color:#f3ede3;font:600 12px/1 var(--sans);letter-spacing:.04em;text-align:center;transition:.15s;}
  #pgNow:hover{border-color:var(--gold-lt);}
  #pgNow:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.16);}
  .progress{width:150px;height:3px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden;}
  .progress i{display:block;height:100%;width:0;background:var(--gold);transition:width .4s;}
  .zone{position:absolute;top:0;bottom:0;width:12%;z-index:15;cursor:pointer;pointer-events:none;} .zone.left{left:0;} .zone.right{right:0;}

  #thumbs{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(38,34,28,.96);backdrop-filter:blur(8px);
    transform:translateY(100%);transition:transform .35s ease;padding:16px 18px calc(22px + env(safe-area-inset-bottom));max-height:48vh;overflow:auto;}
  #thumbs.open{transform:translateY(0);}
  #thumbs .th-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
  #thumbs .th-head span{color:#e9e2d4;font-size:10px;letter-spacing:.3em;text-transform:uppercase;}
  #thumbs .th-close{color:#e9e2d4;background:none;border:none;cursor:pointer;font-size:22px;line-height:1;padding:0 6px;}
  .th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;}
  .th{border:2px solid transparent;border-radius:5px;overflow:hidden;cursor:pointer;background:#e9e4da;position:relative;aspect-ratio:1275/1651;padding:0;}
  .th .mini{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.94;transition:.15s;}
  .th:hover .mini{opacity:1;} .th.active{border-color:var(--gold);}
  .th .n{position:absolute;bottom:2px;right:4px;font-size:9px;color:#3a352c;background:rgba(255,255,255,.7);padding:0 3px;border-radius:2px;z-index:2;}

  #hint{position:fixed;bottom:calc(var(--ft) + 12px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:30;background:rgba(38,34,28,.85);color:#f6f1e7;
    font-size:11px;letter-spacing:.08em;padding:9px 16px;border-radius:999px;pointer-events:none;transition:opacity .5s;}

  @media(max-width:720px){ :root{--hd:52px;--ft:66px;} #stage{padding:8px;} footer{gap:12px;}
    .counter,.progress{min-width:110px;width:110px;} }

  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
    .hot-dot::before{animation:none;}
  }