@font-face{
  font-family:'Apricots';
  src:url('apricots.woff2') format('woff2'),
      url('apricots.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
/* Poppins is served from this site (the fonts folder) instead of Google Fonts,
   so text can show without waiting on another server. Only the weights the
   site uses are here, Latin letters only. */
@font-face{font-family:'Poppins'; src:url('fonts/poppins-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins'; src:url('fonts/poppins-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins'; src:url('fonts/poppins-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins'; src:url('fonts/poppins-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* The Chinese characters on the original Mahj Lab tiles, trimmed to just the
   16 the tiles use (about 3 KB). Browsers only download it on pages that show them. */
@font-face{font-family:'Noto Serif SC'; src:url('fonts/noto-serif-sc-tiles.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+4E00,U+4E03,U+4E09,U+4E2D,U+4E5D,U+4E8C,U+4E94,U+516B,U+516D,U+5317,U+5357,U+56DB,U+6771,U+767C,U+842C,U+897F}
/* Highland Made Company — Highland Method theme */
:root{
  --cream:#FFFFFF;
  --cream-deep:#F3F2EA;
  --paper:#FFFFFF;
  --logo-cream:#F9F8F3;
  --wash:#E8E7DC;
  --plum:#6F796B;          /* the logo green, used for headings */
  --plum-deep:#525B4F;
  --ink:#3E463C;
  --muted:#5C6658;
  --gold:#9A7F46;          /* decorative gold: lines, diamonds, icons */
  --gold-text:#766230;     /* gold for small text, dark enough to read (WCAG AA) */
  --plum-text:#5F6A5B;     /* logo green for small text on cream and sand backgrounds */
  --gold-soft:#C5AE82;
  --sage:#6F796B;
  --sage-soft:#94957D;
  --mist:#CABEBD;
  --line:rgba(111,121,107,.26);
  --max:1120px;
  --script:'Apricots', 'Brush Script MT', cursive;
  --serif:'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --photo-placeholder:#E8E7DC;
  --sans:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:1.1875rem; line-height:1.7;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--plum)}
.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 28px}
h1,h2,h3,.serif{font-family:var(--serif); color:var(--plum); font-weight:500; line-height:1.3; letter-spacing:.012em; margin:0}
h1{font-family:var(--script); font-size:clamp(2.7rem,2rem + 3.1vw,4.3rem); font-weight:400;
  letter-spacing:.005em; line-height:1.26; padding-bottom:.14em}
h2{font-family:var(--script); font-size:clamp(1.95rem,1.6rem + 1.5vw,2.8rem); font-weight:400;
  letter-spacing:.005em; line-height:1.3; padding-bottom:.12em}
h3{font-size:1.18rem; font-weight:600; letter-spacing:.01em}
p{margin:0 0 1.1rem}
.lede{font-size:1.25rem; color:var(--muted); max-width:60ch}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:50; background:var(--paper); padding:10px 16px; border-radius:4px}
:focus-visible{outline:3px solid var(--gold-text); outline-offset:3px}

/* eyebrow + divider, taken from the card */
.eyebrow{font-size:.92rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-text); font-weight:700; margin-bottom:.9rem}
.rule{display:flex; align-items:center; justify-content:center; gap:14px; margin:1.4rem 0}
.rule::before,.rule::after{content:''; height:1px; width:76px; background:var(--gold-soft)}
.rule i{width:7px; height:7px; background:var(--gold); transform:rotate(45deg)}
.rule.left{justify-content:flex-start}
.rule.left::before{display:none}

/* header */
.site-header{background:#FFFFFF; position:relative; z-index:20}
.location-strip{background:var(--logo-cream); text-align:center; font-size:.86rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--line)}
.nav-wrap{display:flex; align-items:center; justify-content:center; gap:24px; padding:16px 28px}
.brand{display:flex; align-items:center; gap:16px; text-decoration:none; flex:none}
.brand-mark{width:62px; height:62px; flex:none; border-radius:9px}
.brand-word{display:block; height:44px; width:auto; flex:none}
.footer-word{display:block; height:56px; width:auto; margin-bottom:1rem}
.navbar{position:sticky; top:0; z-index:40; background:#FFFFFF; border-bottom:1px solid var(--line);
  box-shadow:0 6px 14px -12px rgba(60,67,58,.55)}
.mainnav{display:flex; align-items:center; justify-content:center; justify-content:safe center; gap:26px; overflow-x:auto; scrollbar-width:none; padding:2px 0}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{white-space:nowrap; font-size:1.08rem; font-weight:600; color:var(--ink); text-decoration:none;
  padding:16px 0 13px; border-bottom:3px solid transparent}
.mainnav a:hover{color:var(--plum)}
.mainnav a.active{color:var(--plum); border-bottom-color:var(--gold)}
.mainnav .nav-shop{appearance:none; background:none; border:0; border-bottom:3px solid transparent; cursor:pointer;
  font:inherit; font-size:1.08rem; font-weight:600; color:var(--plum); white-space:nowrap; padding:16px 0 13px}
.mainnav .nav-shop::after{content:' \25BE'; font-size:.8em}
.mainnav .nav-shop[aria-expanded="true"]{border-bottom-color:var(--gold)}
.shoppanel{border-top:1px solid var(--line); background:var(--logo-cream)}
.shoplinks{display:grid; grid-template-columns:repeat(4,1fr); gap:4px 26px; padding-top:18px; padding-bottom:20px}
@media (max-width:860px){ .shoplinks{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .shoplinks{grid-template-columns:1fr} }
.shoplinks a{display:block; text-decoration:none; padding:12px 0; border-top:1px solid var(--line)}
.shoplinks b{display:block; color:var(--plum-text); font-size:1.06rem}
.shoplinks span{display:block; color:var(--muted); font-size:.98rem}
.shoplinks a:hover b{text-decoration:underline; text-underline-offset:4px}
.contact-form{margin-top:1.4rem}
.contact-form .field{display:grid; gap:6px; margin-top:20px}
.contact-form label{font-weight:700}
.contact-form input, .contact-form textarea, .contact-form select{
  font:inherit; font-size:1.05rem; width:100%; padding:.7rem .85rem; border-radius:10px;
  border:1.5px solid var(--line); background:#FFFFFF; color:var(--ink)}
.contact-form textarea{min-height:150px; line-height:1.6}
.contact-form select{font:inherit; font-size:1.05rem; width:100%; padding:.65rem .8rem; border-radius:10px; border:1.5px solid var(--line); background:#FFFFFF; color:var(--ink)}
.hp{position:absolute; left:-9999px}
/* Mahj Lab suggestion box */
.suggest-form .field-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; align-items:end}
@media (max-width:620px){ .suggest-form .field-row{grid-template-columns:minmax(0,1fr)} }
.suggest-form .opt{font-weight:400; color:var(--muted)}
.suggest-form .form-actions{margin-top:24px}
.suggest-form .form-fine{font-size:.9rem; color:var(--muted); margin-top:12px}
.suggest-form .form-status{margin-top:10px; font-weight:600; color:#9A2F37}
.suggest-form .form-status:empty{display:none}
.suggest-thanks{margin-top:1.4rem; background:#FFFFFF; border:1px solid var(--line); border-left:4px solid var(--sage); border-radius:12px; padding:20px 24px}
.suggest-thanks h3{margin:0 0 .4rem}
.suggest-thanks .link-btn{appearance:none; background:none; border:0; padding:0; font:inherit; color:var(--plum); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.suggest-thanks:focus{outline:none}
.lab-hero .dev-note{margin:1rem auto 0; font-size:1rem; color:var(--muted)}
.dev-pill{display:inline-block; margin-right:6px; padding:2px 10px; border-radius:999px; background:var(--logo-cream); border:1px solid var(--line); color:var(--gold-text); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; vertical-align:2px}
.labfoot .lf-dev{flex-basis:100%; font-weight:600; color:var(--ink)}
.labfoot .lf-dev a{color:var(--plum); font-weight:700}
.emailbig{font-size:clamp(1.2rem,1rem + 1vw,1.7rem); font-weight:700; letter-spacing:.01em; word-break:break-word; margin:.4rem 0 1rem}
.emailbig a{color:var(--plum); text-decoration:none; border-bottom:2px solid var(--gold-soft); padding-bottom:3px}
.emailbig a:hover{border-bottom-color:var(--gold)}
@media (max-width:900px){ .mainnav{justify-content:flex-start; gap:22px} .mainnav a{font-size:1.04rem} }
/* phone menu: a Menu button opens the full list of pages */
.menu-button{display:none; align-items:center; justify-content:center; gap:10px; width:100%; min-height:58px; background:none; border:0; font:inherit; font-size:1.08rem; font-weight:600; letter-spacing:.04em; color:var(--plum-text); cursor:pointer; padding:0}
.menu-button svg{flex:none}
@media (max-width:760px){
  .menu-button{display:flex}
  .mainnav{display:none}
  .navbar.menu-open .mainnav{display:flex; flex-direction:column; align-items:stretch; gap:0; overflow:visible; padding:0 0 10px; border-top:1px solid var(--line)}
  .navbar.menu-open .mainnav a,.navbar.menu-open .mainnav .nav-shop{display:block; width:100%; text-align:left; padding:14px 4px; font-size:1.12rem; border-bottom:1px solid var(--line)}
  .navbar.menu-open .mainnav a.active{border-bottom-color:var(--line); box-shadow:inset 4px 0 0 var(--gold); padding-left:16px}
  .navbar.menu-open{max-height:100vh; max-height:100dvh; overflow-y:auto}
  .shoppanel .shoplinks{padding-top:6px}
}

@media (max-width:620px){
  .container{padding:0 20px}
  .nav-wrap{padding:18px 20px; gap:14px}
  .brand{gap:12px; min-width:0}
  .brand-mark{width:44px; height:44px}
  .brand-word{height:31px}
  .mobile-nav{padding:0 20px 16px}
  .location-strip{font-size:.78rem; letter-spacing:.1em; padding:10px 14px}
}

/* hero, echoing the card cover */
.hero{position:relative; background:#FFFFFF; text-align:center; padding:0}
.hero .hero-copy{position:relative; z-index:2; padding-top:42px; padding-bottom:16px}
.hero h1{margin-bottom:.2rem}
.hero .hero-sub{font-size:1.2rem; color:var(--muted); margin:0; font-weight:400}
/* which card the lab plays with (change the year on mahjlab, play, practice and puzzle.js each April) */
.hero .card-yr{display:inline-block; margin:.75rem 0 0; padding:.3rem .85rem; border:1px solid var(--line); border-radius:999px; background:#FFFFFF; font-size:.92rem; font-weight:600; color:var(--gold-text)}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:2.1rem 0 .4rem}
.hero .photo-band{display:block}
.page-hero{padding:0; text-align:center; background:#FFFFFF; position:relative}
.page-hero .lede{margin:0 auto}
.page-hero .range{margin-top:46px}

/* buttons */
.button{display:inline-block; font-family:var(--sans); font-size:1.02rem; letter-spacing:.07em; text-transform:uppercase; font-weight:700; text-decoration:none; padding:15px 32px; border-radius:2px; border:1px solid transparent; cursor:pointer; transition:background .15s,color .15s}
.button.primary{background:var(--plum); color:#FFFFFF}
.button.primary:hover{background:var(--plum-deep)}
.button.secondary{border-color:var(--plum-text); color:var(--plum-text); background:transparent}
.button.secondary:hover{background:var(--plum); color:#FFFFFF}
.button.gold{background:#836D3A; color:#FFF}
.button.gold:hover{background:var(--gold-text)}

/* sections */
.section{padding:84px 0}
.section.paper{background:var(--logo-cream)}
.section.deep{background:var(--plum); color:#E8E2EE}
.section.deep h2,.section.deep h3{color:#FBF8F1}
.section.deep .eyebrow{color:var(--gold-soft)}
.section.deep .lede{color:#C8BFD3}
.section.sand{background:var(--wash)}
.section-head{max-width:820px; margin:0 auto 54px; text-align:center}
.section-head p{color:var(--muted); font-size:1.15rem; margin:1rem 0 0}
.section-head.left{text-align:left; margin-left:0}

/* cards */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:46px; align-items:center}
@media (max-width:860px){ .grid-3,.grid-2{grid-template-columns:1fr; gap:28px} }
.card{background:var(--paper); border:1px solid var(--line); padding:40px 32px 36px; text-align:center}
.section.paper .card{background:#FFFFFF}
.card .num{font-family:var(--serif); font-size:1.1rem; letter-spacing:.22em; font-weight:600; color:var(--gold-text); display:block; margin-bottom:.8rem}
.card h3{font-size:1.3rem; margin-bottom:.8rem}
.card p{color:var(--muted); font-size:1.08rem; margin:0}
.card .status{display:inline-block; margin-top:1.3rem; font-size:.88rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); font-weight:700}
.card-link{display:inline-block; margin-top:1.3rem; font-size:1rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--plum-text); text-decoration:none; border-bottom:1.5px solid var(--gold-soft); padding-bottom:4px}

/* portrait / about block */
.photo{position:relative; overflow:hidden; background:var(--photo-placeholder)}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
.photo picture{display:block; width:100%; height:100%}
.photo::after{content:attr(data-hint); position:absolute; inset:0; display:grid; place-items:center; padding:20px; text-align:center;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:#9A9288; background:var(--photo-placeholder)}
.photo.ready::after{display:none}
.portrait{aspect-ratio:4/5; border:1px solid var(--line)}
/* The paintings at the top: show more of each one, and let the top and bottom
   melt softly into the page like a watercolor wash, so nothing looks cut off. */
.photo-band{position:relative; width:100%; aspect-ratio:5/2; max-height:250px; min-height:150px; background:transparent;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 17%, #000 78%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 17%, #000 78%, transparent 100%)}
.photo-band img{object-position:50% 42%}
.photo-band::after{background:transparent}
@media (max-width:760px){ .photo-band{aspect-ratio:5/2; max-height:none} }

/* product rows */
.products{display:grid; grid-template-columns:repeat(2,1fr); gap:34px}
@media (max-width:760px){ .products{grid-template-columns:1fr} }
.product{display:grid; grid-template-columns:104px 1fr; gap:24px; align-items:start; padding-bottom:30px; border-bottom:1px solid var(--line)}
.product .sheet{aspect-ratio:3/4; border:1px solid var(--line)}

.product .kicker{font-size:.88rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); font-weight:700}
.product h3{font-size:1.25rem; margin:.35rem 0 .5rem; color:var(--plum-text)}
.product p{font-size:1.08rem; color:var(--muted); margin:0 0 .9rem}
.text-link{font-size:1rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--plum-text); text-decoration:none; border-bottom:1.5px solid var(--gold-soft); padding-bottom:4px}

/* practice banner */
.practice-band{position:relative; isolation:isolate; background:var(--photo-placeholder)}
.practice-band .photo{position:absolute; inset:0; z-index:-2}
.practice-band::after{content:''; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.80)}
.practice-band .container{position:relative; padding-top:96px; padding-bottom:96px; text-align:center}
.practice-band p{max-width:54ch; margin-left:auto; margin-right:auto; color:var(--ink)}

/* newsletter */
.newsletter{text-align:center; max-width:620px; margin:0 auto}
.newsletter-form{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:1.6rem}
.newsletter-form input{font:inherit; padding:15px 18px; border:1px solid var(--line); background:var(--paper); min-width:270px; border-radius:2px; color:var(--ink)}
.small{font-size:1.05rem; color:var(--muted)}

/* footer */
footer{background:var(--logo-cream); padding:64px 0 28px; border-top:1px solid var(--line)}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:38px}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr} }
.footer-brand p{font-size:1.05rem; color:var(--muted); max-width:34ch}
.footer-social{display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; margin-top:1.1rem}
.footer-social a{display:inline-flex; align-items:center; gap:.55rem; font-size:1.05rem; font-weight:600; color:var(--plum-text); text-decoration:none}
.footer-social a:hover{color:var(--plum-deep); text-decoration:underline; text-underline-offset:3px}
.footer-social svg{flex:none}
.footer-title{font-family:var(--serif); font-size:.95rem; letter-spacing:.17em; text-transform:uppercase; font-weight:600; color:var(--plum-text); margin-bottom:1rem}
.footer-links{display:flex; flex-direction:column; gap:.6rem}
.footer-links a{font-size:1.08rem; color:var(--ink); text-decoration:none}
.footer-links a:hover{color:var(--plum); text-decoration:underline; text-underline-offset:3px}
.footer-bottom{margin-top:48px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 28px; font-size:.95rem; color:var(--muted)}

/* --- added for inner pages --- */
.container.narrow{max-width:800px}
.center{text-align:center}
.section.tint{background:var(--logo-cream)}
.steps{display:grid; gap:26px; margin-top:2.4rem}
.step{display:grid; grid-template-columns:52px 1fr; gap:20px; align-items:start}
.step-num{font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--gold); line-height:1; padding-top:6px}
.step h3{font-size:1.18rem; margin-bottom:.4rem; color:var(--plum-text)}
.step p{color:var(--muted); margin:0; font-size:1.08rem}
.faq{margin-top:1.4rem}
.faq-item{border-bottom:1px solid var(--line)}
.faq-button{display:flex; width:100%; justify-content:space-between; align-items:center; gap:18px; text-align:left;
  background:none; border:0; padding:20px 2px; font:inherit; font-size:1.18rem; font-weight:600; color:var(--plum-text); cursor:pointer}
.faq-sign{color:var(--gold); font-size:1.3rem; line-height:1}
.faq-answer{display:none; padding:0 2px 22px; color:var(--muted)}
.faq-item.open .faq-answer{display:block}
.faq-item.open .faq-sign{transform:rotate(45deg)}
.disclosure{border:1px solid var(--line); border-left:4px solid var(--gold); padding:20px 24px; font-size:1.08rem; color:var(--muted)}
.disclosure strong{color:var(--plum)}
.hero-actions .button + .button{margin-left:0}

/* --- Shop My Favorites --- */
.fav-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px}
@media (max-width:820px){ .fav-grid{grid-template-columns:1fr} }
.fav-cat{background:#FFFFFF; border:1px solid var(--line); border-radius:14px; padding:26px 26px 24px}
.fav-cat h3{margin-bottom:.4rem}
.fav-cat p{color:var(--muted); font-size:1.02rem; margin:0 0 1rem}
.picks{list-style:none; margin:0; padding:0}
.picks li{border-top:1px solid var(--line); padding-bottom:.2rem}
.picks li:first-child{border-top:0}
.picks a{display:block; padding:.75rem 0 .3rem; font-size:1.05rem; color:var(--ink); text-decoration:none}
.picks a:hover{color:var(--plum); text-decoration:underline; text-underline-offset:4px}
.picks a::after{content:' \2197'; color:var(--gold); font-weight:700}
.pdesc{display:block; color:var(--muted); font-size:.98rem; margin:-.35rem 0 .7rem; max-width:48ch}
.fav-item{display:flex; gap:16px; align-items:flex-start}
.fav-thumb{flex:none; width:78px; height:78px; margin-top:.75rem; border:1px solid var(--line); border-radius:10px;
  background:#FFFFFF; overflow:hidden; display:grid; place-items:center}
.fav-thumb img{width:100%; height:100%; object-fit:contain}
.fav-text{min-width:0; flex:1}
.covers{display:grid; grid-template-columns:260px 1fr; gap:34px; align-items:start}
@media (max-width:760px){ .covers{grid-template-columns:1fr} }
.covershot{aspect-ratio:1/1; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#FFFFFF}
.covershot img{width:100%; height:100%; object-fit:contain}
.nocom{display:inline-block; margin:-.4rem 0 .6rem; font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* mahjong tiles in place of numbers */
.tilenum img{display:block; width:40px; height:auto; margin:0 auto .8rem; filter:drop-shadow(0 2.5px 0 #C5AE82) drop-shadow(0 4px 5px rgba(40,46,38,.16))}
.card .tilenum{display:block}
.step-num.tilenum{padding-top:2px}
.step-num.tilenum img{width:34px; margin:0}

/* Mahj Lab */
.lab-hero .lab-word{font-family:var(--sans); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:clamp(2.2rem,1.6rem + 2.6vw,3.6rem); color:var(--plum)}
.lab-hero .eyebrow{letter-spacing:.22em}

/* accessibility helpers */
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
/* card hands: a second cue besides color so every suit can be told apart.
   green groups stay plain, red groups get a dotted underline, blue groups a solid one */
.line .c-r,.line .c-b{text-decoration-line:underline; text-decoration-thickness:2px; text-underline-offset:.28em; text-decoration-skip-ink:none}
.line .c-r{text-decoration-style:dotted}
.line .c-b{text-decoration-style:solid}
/* links sitting on the watercolor band need a deeper green to stay readable */
.practice-band .container a:not(.button){color:var(--plum-deep)}
/* accessibility page list, and the small link in the footer's bottom row */
.a11y-list{list-style:none; margin:1.4rem 0 0; padding:0}
.a11y-list li{border-top:1px solid var(--line); padding:1rem 0; color:var(--ink)}
.a11y-list li:last-child{border-bottom:1px solid var(--line)}
.footer-bottom a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.footer-bottom a:hover{color:var(--plum-text)}
/* Mahj Lab: the Game Table spotlight */
.feature{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:56px; align-items:center}
.feature-shot{display:block; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 22px 40px -26px rgba(40,48,38,.6); transition:transform .2s}
.feature-shot:hover{transform:translateY(-2px)}
.feature-shot img{display:block; width:100%; height:auto}
.feature-copy h2{margin-bottom:1rem}
.feature-copy p{color:var(--muted)}
.feature-actions{margin-top:1.6rem}
@media (max-width:860px){ .feature{grid-template-columns:1fr; gap:30px} }
@media (prefers-reduced-motion: reduce){ .feature-shot{transition:none} .feature-shot:hover{transform:none} }

/* buying printables directly on the shop page */
.hero .hero-note{font-size:1.02rem; color:var(--muted); margin:.7rem auto 0; max-width:60ch}
.button.small{font-size:.9rem; padding:11px 22px}
.buy{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:.3rem 0 .75rem}
.buy-price{font-size:1.15rem; font-weight:600; color:var(--ink); letter-spacing:.01em}
.also, .product .also{font-size:.95rem; color:var(--muted); margin:0}
.also a{color:var(--plum-text); font-weight:600; text-underline-offset:3px; text-decoration-color:var(--gold-soft)}
.also a:hover{color:var(--plum)}
.buy-note{text-align:center; color:var(--muted); font-size:1rem; margin:2.8rem auto 0; max-width:52ch}
.buy-list{list-style:none; margin:0; padding:0}
.buy-row{display:flex; align-items:center; justify-content:space-between; gap:10px 18px; flex-wrap:wrap; padding:1rem 0; border-top:1px solid var(--line)}
.buy-row:first-child{border-top:0; padding-top:.2rem}
.buy-row-name{display:flex; flex-direction:column; min-width:0; line-height:1.45}
.buy-row-name b{font-weight:600; color:var(--ink); font-size:1.05rem}
.buy-row-name > span:not(.also){color:var(--muted); font-size:.98rem}
.buy-row-name .also{margin-top:.25rem}
.buy-row .buy{margin:0; flex-direction:row-reverse}
.order-help-section{padding-top:28px}
.order-help{max-width:60ch; margin:0 auto; border-top:1px solid var(--line); padding-top:2rem}
.order-help p{color:var(--muted); font-size:1.08rem}
/* download buttons on the order-complete page */
.downloads{max-width:640px; margin:1.8rem auto .4rem; text-align:left}
.dl-wait{text-align:center; color:var(--muted); font-size:1.05rem; margin:0}
.dl-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.dl-list li{display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; padding:14px 0; border-bottom:1px solid var(--line)}
.dl-name{flex:1 1 220px; font-weight:600; color:var(--ink); font-size:1.05rem; line-height:1.4}
.dl-size{color:var(--muted); font-size:.95rem}
.dl-button{font-size:.92rem; padding:11px 24px}
.dl-note{text-align:center; color:var(--muted); font-size:.98rem; margin:1.1rem 0 0}

/* ---------- Mahj Lab: a clean screen with just the lab ---------- */
.labbar{background:#FFFFFF; border-bottom:1px solid var(--line); position:relative; z-index:50}
.labbar-in{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding-top:10px; padding-bottom:10px}
.labbar .labbar-in{max-width:1240px}
/* Two rows at every screen size and text size, so nothing can ever slide under anything else:
   the Mahj Lab name with Bigger text, Tiles and the way back on top,
   and every page link on its own row underneath, all in plain view (they wrap, never hide). */
.lab-big{margin-left:auto}
.lab-nav{flex-basis:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:4px; padding-top:10px; border-top:1px solid var(--line)}
.lab-nav a{padding:7px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--logo-cream); text-decoration:none; color:var(--ink); font-weight:600; font-size:1rem; line-height:1.3; white-space:nowrap}
.lab-nav a:hover{background:var(--cream-deep); border-color:var(--sage-soft)}
.lab-nav a[aria-current="page"]{background:var(--plum); border-color:var(--plum); color:#FFFFFF}
.lab-nav a:focus-visible{outline:3px solid var(--gold-text); outline-offset:2px}
.lab-exit{font-size:.9rem}
@media (max-width:1100px){ .lab-nav{gap:6px} .lab-nav a{padding:6px 12px; font-size:.94rem} }
/* phones: shorter names (Home, Puzzle, Friends) so the links fit in two rows */
@media (max-width:560px){
  .lab-nav{gap:6px 5px; padding-top:8px}
  .lab-nav a{padding:5px 9px; font-size:.82rem}
  .lab-nav .ln-x{display:none}
  .lab-exit{font-size:.85rem}
}
.lab-home{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--plum); font-size:1rem; white-space:nowrap}
.lab-home img{width:36px; height:36px; border-radius:50%}
/* the title, Tiles button and exit link never shrink, so nothing can slide under the page links */
.lab-home,.lab-tiles,.lab-exit{flex:none}
.lab-exit{font-size:.9rem; color:var(--muted); text-decoration:none; white-space:nowrap}
.lab-exit:hover{text-decoration:underline; color:var(--ink)}
.labfoot{border-top:1px solid var(--line); padding:18px 0 26px; font-size:.85rem; line-height:1.6; color:var(--muted); margin-top:40px}
.labfoot .container{display:flex; flex-wrap:wrap; gap:4px 20px; justify-content:center; text-align:center}
.labfoot a{color:var(--muted)}
body.lab .hero.compact .hero-copy,body.lab .lab-hero .hero-copy{padding-top:24px; padding-bottom:4px}
body.lab .hero.compact h1{font-size:clamp(2.1rem,1.7rem + 1.8vw,3rem)}
body.lab .hero.compact .rule{margin:.5rem 0}
body.lab .tabbar{top:0}
/* The page links (Daily Puzzle, Game Table and the rest) stay in reach while you scroll down to play.
   lab.js sets the numbers: on computers and tablets they stay pinned at the top; on phones they tuck
   away while you scroll down and come back when you scroll up. Without lab.js nothing changes. */
html.labstick body.lab .labbar{position:sticky; top:var(--lab-top, 0px)}
html.labpin body.lab .labbar{box-shadow:0 8px 18px -16px rgba(60,67,58,.5)}
html.labstick body.lab .tabbar{top:var(--lab-stick, 0px)}
html.labstick body.lab .gl-tools{top:var(--lab-stick, 0px)}
html.labstick body.lab .gl-letter, html.labstick body.lab .gl-item{scroll-margin-top:calc(70px + var(--lab-pin, 0px))}
html.labpeek body.lab .labbar, html.labpeek body.lab .tabbar, html.labpeek body.lab .gl-tools{transition:top .22s ease}
@media (prefers-reduced-motion: reduce){ html.labpeek body.lab .labbar, html.labpeek body.lab .tabbar, html.labpeek body.lab .gl-tools{transition:none} }

/* ---------- shop: one compact catalog with small section headers ---------- */
.shop-hero .hero-copy{padding-top:30px; padding-bottom:6px}
.shop-hero h1{font-size:clamp(2.2rem,1.7rem + 2.2vw,3.4rem)}
.shop-jump{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:1.4rem auto .4rem; max-width:860px}
.shop-jump a{display:inline-block; padding:8px 16px; border-radius:22px; border:1.5px solid var(--line); background:#FFFFFF; color:var(--plum-text); font-weight:600; font-size:.98rem; text-decoration:none}
.shop-jump a:hover{background:var(--cream-deep); border-color:var(--sage-soft)}
.shop-sec{padding:34px 0 38px; scroll-margin-top:70px}
.shop-sec.tint{background:var(--logo-cream)}
.shop-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; border-bottom:2px solid var(--gold-soft); padding-bottom:10px; margin-bottom:22px}
.shop-head h2{font-family:var(--sans); font-size:1.45rem; font-weight:700; letter-spacing:.02em; color:var(--plum-deep); padding:0}
.shop-head p{margin:0; color:var(--muted); font-size:1rem}
.pgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.pgrid-covers{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .pgrid,.pgrid-covers{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .pgrid,.pgrid-covers{grid-template-columns:1fr} }
.pcard{display:flex; flex-direction:column; background:#FFFFFF; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.pcard-img{aspect-ratio:1/1; background:#FFFFFF; border-bottom:1px solid var(--line)}
.pcard-img img{width:100%; height:100%; object-fit:contain}
.pcard-body{display:flex; flex-direction:column; flex:1; padding:14px 16px 16px}
.pcard .kicker{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); font-weight:700; margin:0}
.pcard h3{font-size:1.12rem; margin:.25rem 0 .4rem; color:var(--plum-text); line-height:1.35}
.pcard-desc{font-size:.98rem; line-height:1.5; color:var(--muted); margin:0 0 .8rem; flex:1}
.pcard .buy{margin:0 0 .4rem}
.pcard .also{font-size:.9rem}
@media (max-width:560px){ .pcard{flex-direction:row} .pcard-img{flex:0 0 112px; aspect-ratio:auto; border-bottom:0; border-right:1px solid var(--line)} .pcard-img img{height:auto; aspect-ratio:1/1} .pcard-body{padding:12px 14px} }
.shop-outro{margin:22px 0 0; text-align:center; color:var(--muted)}
.buy-note.container{text-align:center; margin:10px auto 40px}
.pcard-img.noimg{display:flex; align-items:center; justify-content:center; background:var(--logo-cream)}
.pcard-img.noimg img{display:none}
.pcard-img.noimg::after{content:'Photo on Etsy'; color:var(--muted); font-size:.95rem}
@media (max-width:560px){
  .shop-jump{flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; margin-left:-16px; margin-right:-16px; padding:0 16px 6px; scrollbar-width:none}
  .shop-jump::-webkit-scrollbar{display:none}
  .shop-jump a{flex:none}
  .pgrid-covers .pcard{flex-direction:column}
  .pgrid-covers .pcard-img{flex:none; aspect-ratio:1/1; border-right:0; border-bottom:1px solid var(--line)}
  .pgrid-covers .pcard-img img{height:100%}
}

/* ---------- Mahj Lab: choose your tiles ---------- */
body .tile.ts-img{background:transparent !important; overflow:hidden}
body .tile.ts-img img{display:block; width:100%; height:100%; object-fit:fill; -webkit-user-drag:none; user-select:none; pointer-events:none}
/* table color swatches (Game Table) */
.tswatches{display:inline-flex; flex-wrap:wrap; gap:9px}
.tswatch{appearance:none; position:relative; width:36px; height:36px; flex:none; padding:0; margin:0; border-radius:50%; border:2px solid #FFFFFF; cursor:pointer;
  background:radial-gradient(130% 110% at 20% 10%, var(--sw1) 0%, var(--sw2) 100%); box-shadow:0 0 0 1px rgba(40,46,38,.35), 0 2px 5px -2px rgba(0,0,0,.4); transition:transform .12s}
.tswatch:hover{transform:scale(1.08)}
.tswatch[aria-pressed="true"]{box-shadow:0 0 0 3px #C9A55A, 0 2px 5px -2px rgba(0,0,0,.4)}
.tswatch[aria-pressed="true"]::after{content:''; position:absolute; left:50%; top:46%; width:8px; height:14px; border:solid #FFFFFF; border-width:0 3px 3px 0; transform:translate(-50%,-50%) rotate(45deg)}
.tswatch-name{font-weight:600}
.lab-tiles{position:relative}
.lab-tiles-btn{appearance:none; display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--line); background:#FFFFFF; border-radius:22px; padding:4px 14px 4px 6px; font:inherit; font-size:.92rem; color:var(--ink); cursor:pointer; white-space:nowrap}
.lab-tiles-btn:hover,.lab-tiles-btn[aria-expanded="true"]{background:var(--cream-deep); border-color:var(--sage-soft)}
.lab-tiles-btn b{color:var(--plum-deep)}
.ltb-tile{display:block; width:22px; flex:none}
.ltb-tile .tile{display:block; width:100%; aspect-ratio:3/4; border-radius:3px; background:linear-gradient(170deg,#FFFEF9 0%,#F3EDDB 100%); box-shadow:inset 0 0 0 1px rgba(30,42,61,.16), 0 2px 0 #C5AE82}
.ltb-tile .tile svg{display:block; width:100%; height:100%}
.tilepanel{position:absolute; right:0; top:calc(100% + 8px); z-index:60; max-height:calc(100vh - 120px); overflow-y:auto; width:min(360px, calc(100vw - 32px)); background:#FFFFFF; border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px -12px rgba(40,46,38,.35); padding:14px}
@media (max-width:560px){ .lab-tiles{position:static} .tilepanel{left:12px; right:12px; width:auto; top:calc(100% + 6px); max-height:calc(100vh - 130px)} }
.tp-title{margin:0 0 10px; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gold-text)}
.tp-more{margin:10px 2px 0; font-size:.88rem; color:var(--muted)}
.tp-opt{appearance:none; display:flex; flex-direction:column; gap:8px; width:100%; text-align:left; background:#FFFFFF; border:2px solid var(--line); border-radius:12px; padding:10px 12px; margin:0 0 8px; font:inherit; color:var(--ink); cursor:pointer}
.tp-opt:hover{border-color:var(--sage-soft); background:var(--logo-cream)}
.tp-opt.on{border-color:var(--plum); background:var(--logo-cream)}
.tp-row{display:flex; gap:5px}
.tp-row .tile{display:block; width:40px; aspect-ratio:3/4; border-radius:5px; background:linear-gradient(170deg,#FFFEF9 0%,#F3EDDB 100%); box-shadow:inset 0 0 0 1px rgba(30,42,61,.16), 0 3px 0 #C5AE82}
.tp-row .tile svg{display:block; width:100%; height:100%}
.tp-text{display:flex; flex-direction:column; line-height:1.35}
.tp-name{font-weight:700; color:var(--plum-deep); font-size:1.02rem}
.tp-check{font-weight:600; font-size:.85rem; color:#2B7A4B; margin-left:6px}
.tp-note{font-size:.9rem; color:var(--muted)}
.tile-chooser{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; max-width:900px; margin:0 auto}
.tile-chooser .tp-opt{margin:0; padding:16px 18px; gap:12px}
.tile-chooser .tp-row{gap:7px; flex-wrap:wrap}
.tile-chooser .tp-row .tile{width:52px}
.le-short{display:none}
@media (max-width:860px){ .le-long{display:none} .le-short{display:inline} }
.lab-tiles-btn b{display:inline-block; max-width:11em; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom}
@media (max-width:520px){ .ltb-txt{font-size:.85rem} .lab-tiles-btn b,.ltb-sep{display:none} .lab-tiles-btn{padding-right:12px} .le-long{display:none} .le-short{display:inline} .lab-home span{letter-spacing:.08em} .tile-chooser .tp-row .tile{width:42px} }
/* the smallest phones: the Tiles button shows just its tile picture (the words stay for screen readers) */
@media (max-width:360px){ .labbar-in{gap:6px 8px} .lab-home{gap:8px} .lab-home span{letter-spacing:.05em} .lab-tiles-btn{padding:4px 7px} .ltb-txt{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap} }

/* Mahj Lab testing banner: bold and bright, under the Lab bar on every Mahj Lab page */
.testbanner{background:#F6CF6B; border-bottom:1px solid #E2B44A; color:#2D2716; font-size:1rem; line-height:1.45}
.testbanner .container{padding-top:10px; padding-bottom:10px; text-align:center}
.testbanner b{font-weight:800; letter-spacing:.01em}
.testbanner a{color:#2D2716; font-weight:800; text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.testbanner a::after{content:' \2192'}
.testbanner a:hover{color:#000}
.bigtable .testbanner{display:none}
@media (max-width:520px){ .testbanner{font-size:.92rem} .testbanner .container{padding-top:7px; padding-bottom:7px} }

/* Mahj Lab full screen (Practice Table and First Hand): only the game stays on screen */
body.labfull .labbar, body.labfull .testbanner, body.labfull .labfoot, body.labfull .hero, body.labfull .lab-hide-full{display:none !important}
body.labfull .tabbar{top:0 !important}
body.labfull #app .lede, body.labfull #app .rooms{display:none}
body.labfull .practice-shell, body.labfull .fh-shell{padding-top:6px}
body.labfull{background:#FFFFFF}
/* Full screen on the Practice Table is just the game: the green board and the choices that
   go with it (answers, tile picker), with no tabs, headings, scores, help text, or card underneath. */
body.labfull .practice-shell .tabbar{display:none !important}
body.labfull .practice-shell #app > :not(#round), body.labfull .practice-shell #round > .cardlook{display:none !important}
body.labfull .practice-shell .table .how{display:none}
body.labfull .practice-shell{padding:0 0 24px !important; background:transparent}
body.labfull .practice-shell .wrap, body.labfull .practice-shell #app.wrap{max-width:none; padding:0 !important}
body.labfull .practice-shell #round > :not(.table){margin-left:max(16px, env(safe-area-inset-left)); margin-right:max(16px, env(safe-area-inset-right))}
body.labfull .practice-shell #round > .table{margin:0; border-radius:0;
  padding:max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left))}
body.labfull .practice-shell #round > .table > .felt-full{top:max(14px, env(safe-area-inset-top))}
/* when the board is the whole game, it fills the screen */
body.labfull:has(#round > .table:only-child, #round > .table + .cardlook:last-child){background:var(--tbl-2, #4B5347)}
body.labfull .practice-shell #round:not(:has(> .answers, > .picker, > .counter)) > .table{min-height:100vh; min-height:100dvh; padding-bottom:max(24px, env(safe-area-inset-bottom))}
/* the Full screen button on the Practice Table and First Hand */
.fullbtn{appearance:none; flex:none; display:inline-flex; align-items:center; gap:6px; background:#FFFFFF; border:1.5px solid var(--line); border-radius:999px; padding:6px 12px; font:inherit; font-size:.92rem; font-weight:700; color:#5F6A5B; cursor:pointer; white-space:nowrap}
.fullbtn:hover{background:var(--logo-cream)}
.fullbtn svg{flex:none}
@media (max-width:620px){ .fullbtn .fb-txt{display:none} .fullbtn{padding:7px 9px} }

/* Mahj Lab home: every game as a card right at the top, so nobody has to scroll to find one */
body.lab .lab-hero .hero-copy{padding-top:22px; padding-bottom:0}
body.lab .lab-hero .eyebrow{margin-bottom:.4rem}
body.lab .lab-hero .lab-word{margin-bottom:.35rem}
.labmenu{padding:20px 0 44px}
.labgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; max-width:1180px; margin:0 auto}
.labcard{position:relative; display:grid; grid-template-columns:46px minmax(0,1fr); grid-template-rows:auto 1fr; gap:3px 14px; align-items:start; padding:16px 16px 16px 14px; background:#FFFFFF; border:1.5px solid var(--line); border-radius:16px; text-decoration:none; color:var(--ink); box-shadow:0 2px 0 rgba(111,121,107,.10); transition:border-color .15s, box-shadow .15s, transform .15s}
.labcard:hover{border-color:var(--plum); box-shadow:0 8px 20px -10px rgba(40,46,38,.35); transform:translateY(-1px)}
.labcard:focus-visible{outline:3px solid var(--gold-text); outline-offset:3px}
.lc-tile{grid-row:1 / span 2; display:block; width:46px; margin-top:2px}
.lc-tile img{display:block; width:100%; height:auto}
.lc-tile .tile{display:block; width:100%; aspect-ratio:3/4; border-radius:6px; background:linear-gradient(170deg,#FFFEF9 0%,#F3EDDB 100%); box-shadow:inset 0 0 0 1px rgba(30,42,61,.16), 0 3px 0 #C5AE82}
.lc-tile .tile svg{display:block; width:100%; height:100%}
.lc-name{font-weight:700; font-size:1.08rem; line-height:1.3; color:var(--plum-deep)}
.lc-desc{font-size:.93rem; line-height:1.4; color:var(--muted)}
.lc-new{position:absolute; top:-9px; right:12px; padding:1px 8px; border-radius:999px; background:#F6CF6B; color:#2D2716; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.lc-quick{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; max-width:1180px; margin:10px auto 0}
.lc-qlbl{margin:22px 0 0; text-align:center; font-weight:600; font-size:1.05rem; color:var(--ink)}
.lc-quick a{padding:6px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--logo-cream); color:var(--ink); text-decoration:none; font-weight:600; font-size:.93rem; white-space:nowrap}
.lc-quick a:hover{border-color:var(--sage-soft); background:var(--cream-deep)}
.lc-note{max-width:70ch; margin:16px auto 0; text-align:center; font-size:.95rem; color:var(--muted)}
.lc-note a{color:var(--plum-text); font-weight:600}
@media (max-width:900px){ .labgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* phones: two games across, just the tile and the name, so all eight fit on about one screen */
@media (max-width:560px){
  body.lab .lab-hero .hero-copy{padding-top:14px}
  body.lab .lab-hero .eyebrow{display:none}
  body.lab .lab-hero .lab-word{font-size:2rem; margin-bottom:.2rem}
  body.lab .lab-hero .hero-sub{font-size:1rem}
  .labmenu{padding-top:16px}
  .labgrid{gap:10px}
  .labcard{grid-template-columns:34px minmax(0,1fr); grid-template-rows:auto; align-items:center; gap:0 10px; padding:10px 10px 10px 10px; min-height:64px}
  .lc-tile{grid-row:auto; width:34px; margin-top:0}
  .lc-name{font-size:.95rem}
  .lc-desc{display:none}
  .lc-new{top:-8px; right:8px; font-size:.62rem; padding:1px 6px}
  .lc-quick a{font-size:.86rem; padding:5px 11px}
}

/* Mahj Lab home: who made the tile styles */
.tile-credit{max-width:62ch; margin:18px auto 0; text-align:center; font-size:.95rem; color:var(--muted)}
.tile-credit a{color:inherit; text-decoration:underline; text-underline-offset:3px}

/* ---------- Bigger text ----------
   One switch (in the Mahj Lab bar, the Game Table's settings, and the app's Settings)
   makes every word on the Mahj Lab pages about a fifth bigger. Most sizes are in rem,
   so they all grow together; the tile sizes that are set in pixels grow below. */
html.bigtext{font-size:118.75%}
.lab-big{appearance:none; flex:none; display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--line); background:#FFFFFF; border-radius:22px; padding:4px 13px 4px 10px; font:inherit; font-size:.92rem; color:var(--ink); cursor:pointer; white-space:nowrap; min-height:36px}
.lab-big:hover{background:var(--cream-deep); border-color:var(--sage-soft)}
.lab-big[aria-pressed="true"]{background:var(--plum); border-color:var(--plum); color:#FFFFFF}
.lab-big .bt-ic{font-weight:700; font-size:1.05rem; line-height:1; letter-spacing:-.01em}
.lab-big .bt-ic small{font-size:.68em; margin-right:1px}
@media (max-width:520px){ .lab-big .bt-txt{display:none} .lab-big{padding:4px 10px} }
/* phones: the tile picture stays, its word is read out instead of shown, so the top row fits */
@media (max-width:430px){
  .labbar-in{gap:6px 8px}
  .ltb-txt{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
  .lab-tiles-btn{padding:4px 7px}
  .lab-big{padding:4px 9px}
  html.bigtext .labbar-in{gap:6px 8px}
  html.bigtext .lab-home{font-size:.84rem; gap:8px}
  html.bigtext .lab-home span{letter-spacing:.06em}
  html.bigtext .lab-exit{font-size:.74rem}
  html.bigtext .lab-big .bt-ic{font-size:.92rem}
}
/* bigger text on a phone: a hand on the card gets the whole width, with Pin underneath */
@media (max-width:520px){
  html.bigtext .hitem{grid-template-columns:minmax(0,1fr)}
  html.bigtext .hitem .pin{grid-column:1; grid-row:3; justify-self:start; margin-top:4px}
}

/* ---------- Today's top players (lab.js HMRanks), on the puzzle and Game of the Day results ---------- */
.rk{margin:20px auto 0; max-width:540px; text-align:left; background:#FFFFFF; color:var(--ink); border:1.5px solid var(--line); border-radius:18px; padding:16px 18px 12px; box-shadow:0 10px 26px -18px rgba(0,0,0,.45)}
.rk-head{display:flex; align-items:baseline; justify-content:space-between; gap:4px 12px; flex-wrap:wrap; margin-bottom:8px}
.rk-head h3{margin:0; font-family:var(--sans); font-size:1.18rem; font-weight:700; color:var(--plum-deep); letter-spacing:.01em}
.rk-sub{font-size:.92rem; color:var(--muted)}
/* Game of the Day: the No hints list and the With hints list */
.rk-board + .rk-board{margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}
.rk-bhead{display:flex; align-items:baseline; justify-content:space-between; gap:2px 12px; flex-wrap:wrap; margin:6px 0 6px}
.rk-bhead h4{margin:0; font-family:var(--sans); font-size:.86rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text)}
.rk-load{margin:2px 0 6px; color:var(--muted)}
.rk-add{margin:6px 0 12px; padding:12px 14px; border-radius:14px; background:var(--logo-cream); border:1.5px solid var(--line)}
.rk-add label{display:block; font-weight:600; margin-bottom:6px}
.rk-addrow{display:flex; gap:8px}
.rk-addrow input{flex:1 1 auto; min-width:0; font:inherit; font-size:1rem; padding:9px 12px; border:1.5px solid var(--line); border-radius:12px; background:#FFFFFF; color:var(--ink)}
.rk-addrow input:focus-visible{outline:3px solid var(--gold-soft); outline-offset:1px; border-color:var(--sage)}
.rk-btn{flex:none; font:inherit; font-weight:700; padding:9px 18px; border-radius:12px; border:0; background:var(--plum); color:#FFFFFF; cursor:pointer}
.rk-btn:hover{background:var(--plum-deep)}
.rk-btn:disabled{opacity:.6; cursor:default}
.rk-note{margin:7px 0 0; font-size:.85rem; color:var(--muted); line-height:1.45}
.rk-err{margin:4px 0 0; font-size:.92rem; color:#A33A2C}
.rk-err:empty{display:none}
.rk-list{list-style:none; margin:0; padding:0}
.rk-row{display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:baseline; gap:4px 10px; padding:8px 4px; border-top:1px solid var(--line)}
.rk-row:first-child{border-top:0}
.rk-row.me{background:#FBF3DC; border-radius:10px; border-top-color:transparent}
.rk-row.me + .rk-row{border-top-color:transparent}
.rk-n{font-weight:700; color:var(--plum-deep); text-align:center}
.rk-row:nth-child(-n+3):not(.out) .rk-n{color:#8A6D1F}
.rk-name{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rk-name small{font-weight:500; color:var(--muted)}
.rk-res{font-size:.9rem; color:var(--muted); text-align:right; white-space:nowrap}
.rk-row.out .rk-name{font-weight:500}
.rk-flag{grid-column:2 / -1; justify-self:end; font:inherit; font-size:.8rem; padding:2px 10px; border-radius:999px; border:1.5px solid #D9B3AA; background:#FFF5F2; color:#8A3A2C; cursor:pointer}
/* winning hands on the Game of the Day board (only after you've finished that day's game) */
.rk,.rks{--g:#3F7A4F; --r:#A33843; --b:#3C5A96}
.rk-seehand{grid-column:2 / -1; justify-self:start; font:inherit; font-size:.85rem; font-weight:600; padding:3px 12px; border-radius:999px; border:1.5px solid #D8C48E; background:#FFF8E6; color:#6B5520; cursor:pointer}
.rk-seehand:hover{background:#FBEFC8}
.rk-seehand[aria-expanded="true"]{background:#F1E3B5}
.rkh-box{grid-column:1 / -1; margin:4px 0 2px; padding:10px 12px 12px; border-radius:12px; background:#FBFAF4; border:1.5px solid var(--line)}
.rkh-who{margin:0 0 4px; font-size:.95rem}
.rkh-card{display:block; margin:2px 0 6px; font-size:1.02rem}
.rkh-card .line{font-weight:700; letter-spacing:.05em}
.rkh-card .grp{white-space:nowrap; margin-right:.45em}
.rk .c-g,.rks .c-g{color:var(--g)} .rk .c-r,.rks .c-r{color:var(--r)} .rk .c-b,.rks .c-b{color:var(--b)} .rk .c-n,.rks .c-n{color:var(--ink)}
.rk .cx,.rks .cx{display:inline-block; vertical-align:1px; font-size:.72rem; font-weight:700; line-height:1.5; border:1.5px solid currentColor; border-radius:6px; padding:0 .4em; color:var(--muted)}
.rkh-tiles{display:flex; flex-wrap:wrap; gap:8px 10px; margin:4px 0 2px}
.rkh-grp{display:inline-flex; flex-wrap:wrap; gap:2px}
.rkh-tiles .tile{display:block; width:27px; aspect-ratio:3/4; border-radius:4px; background:linear-gradient(170deg,#FFFEF9 0%,#F3EDDB 100%); box-shadow:inset 0 0 0 1px rgba(30,42,61,.16), 0 2px 0 #C5AE82}
.rkh-tiles .tile svg,.rkh-tiles .tile img{display:block; width:100%; height:100%}
.rkh-small{margin:4px 0 0; font-size:.8rem; color:var(--muted)}
.rkh-sum{margin:4px 0 12px; padding:12px 14px; border-radius:14px; background:var(--logo-cream, #FBF6E9); border:1.5px solid var(--line)}
.rkh-h{margin:0 0 6px; font-weight:700; color:var(--plum-deep)}
.rkh-lines{list-style:none; margin:0; padding:0}
.rkh-lines li{padding:6px 0; border-top:1px solid var(--line)}
.rkh-lines li:first-child{border-top:0; padding-top:0}
.rkh-ln{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 6px}
.rkh-n{margin-left:auto; font-size:.88rem; color:var(--muted)}
.rkh-lines .rkh-card{margin:2px 0 0}
.rkh-you{margin-top:10px; padding-top:10px; border-top:1.5px dashed var(--line)}
.rkh-near{margin:8px 0 0; font-size:.95rem}
.rkh-near + .rkh-card{margin-top:2px}
.rkh-lock{margin:4px 0 12px; padding:10px 14px; border-radius:14px; background:#F6F4EC; border:1.5px dashed var(--line); color:var(--muted); font-weight:600}
.rks-lock{margin:8px 0 0; font-size:.9rem; color:var(--muted); font-weight:600}
/* the tournament standings: each player's games, with the hand and how long each took */
.tn .tn-sh{font-weight:700; color:var(--plum-deep); font-size:1.05rem}
.tn .tn-sh.tn-st{margin:14px 0 2px}
.tng-list{grid-column:1 / -1; list-style:none; margin:6px 0 4px; padding:0}
.rk-row .tng-list{padding:4px 0 2px 0}
.tng{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:8px 10px; font-size:.95rem; margin:6px 0 0; border-radius:12px; background:#FBFAF4; border:1.5px solid var(--line)}
.tng-d{font-weight:600; min-width:7.5em; color:var(--plum-deep)}
.tng-r{flex:1 1 12em; line-height:1.45}
.tng-t{color:var(--muted); white-space:nowrap}
.tng .rk-seehand{grid-column:auto; margin-left:auto}
.tng-lock{font-size:.82rem; color:var(--muted); font-style:italic}
.tng .rkh-box{flex:1 1 100%; margin-top:6px}
.tn-today{margin:6px 0 4px; padding:12px 14px; border-radius:16px; background:var(--logo-cream, #FBF6E9); border:1.5px solid var(--line)}
.tn-today .tn-sh{margin:0}
.tn-today .tng{background:#FFFFFF}
.tn-play{display:inline-block; text-decoration:none}
.lab-tn{padding:6px 0 4px}
.lab-tn .rk{max-width:680px; margin:10px auto 0}
@media (max-width:420px){ .rkh-tiles .tile{width:23px} .rkh-tiles{gap:6px 8px} .rkh-card{font-size:.95rem} }
.rk-you{margin:10px 0 0; font-weight:600}
.rk-foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; margin-top:8px}
.rk-foot:empty{display:none}
.rk-link{font:inherit; font-size:.92rem; font-weight:600; padding:0; border:0; background:none; color:var(--plum-text, var(--plum-deep)); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.rk-you .rk-link{font-weight:500; margin-left:6px; color:var(--muted)}
.rk-quiet{font-weight:500; color:var(--muted)}
@media (max-width:420px){
  .rk{padding:14px 12px 10px}
  .rk-row{grid-template-columns:24px minmax(0,1fr); }
  .rk-res{grid-column:2; text-align:left; white-space:normal}
}
.hm-savepic{font-weight:600; color:inherit; text-decoration:underline; text-underline-offset:3px}
.rk-play{margin:2px 0 10px; font-size:.95rem}
.rk-play a{font-weight:600; color:var(--plum-text, var(--plum-deep))}
/* the short board at the top of the puzzle and the Game of the Day: today's top 3, then the full board on a tap */
.rks{max-width:560px; margin:16px auto 8px; background:#FFFFFF; color:var(--ink); border:1.5px solid var(--line); border-radius:18px; padding:12px 16px; text-align:left; box-shadow:0 10px 24px -18px rgba(0,0,0,.5)}
.rks-head{display:flex; align-items:baseline; justify-content:space-between; gap:2px 10px; flex-wrap:wrap}
.rks-head h2{margin:0; font-family:var(--sans); font-size:1.08rem; font-weight:700; color:var(--plum-deep); letter-spacing:.01em}
.rks-count{font-size:.88rem; color:var(--muted)}
.rks-top{list-style:none; margin:10px 0 2px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.rks-p{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:12px; background:var(--logo-cream); border:1px solid var(--line); min-width:0}
.rks-p.me{background:#FBF3DC; border-color:#E2C36B}
.rks-n{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.92rem; color:#2A1F06; background:#E9C76E}
.rks-n.n2{background:#D7DADD}
.rks-n.n3{background:#E6BC95}
.rks-who{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.rks-who b{font-weight:700; font-size:.97rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rks-who small{font-size:.83rem; color:var(--muted)}
.rks-msg{margin:8px 0 2px; color:var(--muted); font-size:.95rem; line-height:1.45}
.rks-cap{margin:6px 0 0; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text)}
.rks-you{margin:8px 0 0; font-weight:600; font-size:.95rem}
.rks-more{display:block; margin:10px auto 0; font:inherit; font-size:.92rem; font-weight:700; padding:7px 18px; border-radius:999px; border:1.5px solid var(--line); background:#FFFFFF; color:var(--plum-deep); cursor:pointer}
.rks-more:hover{background:var(--logo-cream)}
.rks-more:focus-visible{outline:3px solid var(--gold-soft); outline-offset:2px}
.rks-full .rk{margin:12px 0 0; max-width:none; box-shadow:none; border-radius:14px; padding:12px 12px 8px}
.gt-strip .rks{max-width:none; margin:0 0 16px}
@media (max-width:520px){
  .rks{padding:12px 12px}
  .rks-top{grid-template-columns:minmax(0,1fr); gap:6px}
  .rks-p{padding:6px 10px}
  .rks-who{flex-direction:row; align-items:baseline; justify-content:space-between; gap:8px; flex:1}
}

/* ---------- Mahj Lab: streak flames, weekly leaderboard, Player of the Week, tournament week ---------- */
.rk-fire{display:inline-flex; align-items:center; gap:1px; margin-left:6px; font-size:.8rem; font-weight:700; color:#B44E26; vertical-align:1px; white-space:nowrap}
.rk-fire svg{width:13px; height:13px; color:#E07A36; flex:none}
.rks-who small .rk-fire{margin-left:5px}
.rk-add .rk-auto{display:flex; align-items:flex-start; gap:8px; margin:9px 0 0; font-size:.88rem; font-weight:500; line-height:1.4; cursor:pointer}
.rk-auto input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--plum); flex:none}
.rks-btns{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px}
.rks-btns .rks-more{margin:0}
a.rks-more{display:inline-block; text-decoration:none; line-height:1.5}
.rks-week{font-weight:600; color:var(--plum-text)}
.wk-pts{color:var(--plum-deep)}
.potw{display:flex; gap:18px; align-items:center; max-width:1040px; margin:0 auto 22px; padding:18px 22px; border-radius:20px; background:linear-gradient(135deg,#FFF9E8,#F6E8C2); border:1.5px solid #E2C36B; box-shadow:0 14px 30px -20px rgba(80,60,20,.55); text-align:left}
.potw-crown{flex:none; width:76px; height:76px; border-radius:50%; display:grid; place-items:center; background:#FFFFFF; box-shadow:inset 0 0 0 3px #D9B254, 0 6px 14px -8px rgba(80,60,20,.6)}
.potw-crown svg{width:42px; height:42px; color:#B98F2E}
.potw-body{min-width:0; flex:1}
.potw-kick{margin:0; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gold-text)}
.potw h2{margin:2px 0 0; font-family:var(--sans); font-size:1.6rem; font-weight:700; color:var(--plum-deep); line-height:1.25}
.potw.none h2{font-size:1.25rem}
.potw-pts{margin:2px 0 0; font-weight:500}
.potw.none p{margin:4px 0 0; color:var(--muted); line-height:1.5}
.potw-run{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.95rem}
.potw-run li{display:flex; align-items:center; gap:7px}
.potw-run .rks-n{width:24px; height:24px; font-size:.8rem}
.potw-run small{color:var(--muted)}
.potw-acts{margin-top:12px}
.potw-msg{margin:6px 0 0; font-size:.92rem}
.potw-msg:empty{display:none}
@media (max-width:560px){ .potw{flex-direction:column; text-align:center; padding:18px 16px} .potw-run{justify-content:center} }
.tn-banner{display:block; margin:0 0 14px; padding:12px 16px; border-radius:16px; background:linear-gradient(135deg,#FFF9E8,#F6E8C2); border:1.5px solid #E2C36B; color:var(--ink); text-decoration:none; line-height:1.5; font-size:.98rem; text-align:left}
.tn-banner span{font-weight:700; color:var(--plum-deep); text-decoration:underline; text-underline-offset:3px; white-space:nowrap}
.tn-banner:hover{border-color:#C9A55A}
.tn-win{display:flex; align-items:center; gap:10px; margin:4px 0 12px; padding:10px 12px; border-radius:14px; background:#FBF3DC; line-height:1.45}
.tn-win svg{width:28px; height:28px; color:#B98F2E; flex:none}
.tn-about,.tn-next{margin:10px 0 0; font-size:.92rem; color:var(--muted); line-height:1.55}
.tn-next b{color:var(--ink); font-weight:600}
.tn-about a{color:var(--plum-text); font-weight:600}
.tn-sign{margin:4px 0 12px; padding:14px 16px; border-radius:16px; background:var(--logo-cream, #FBF6E9); border:1.5px solid #E2C36B}
.tn-sign.done{background:#F2F7EE; border-color:#B9CDA9}
.tn-sign p{margin:6px 0 0; line-height:1.5}
.tn-sign .tn-sh{margin:0; font-weight:700; font-size:1.05rem; color:var(--plum-deep)}
.tn-when{margin:2px 0 0; font-size:.92rem; color:var(--muted); font-weight:600}
.tn-sign label{display:block; font-weight:600; font-size:.92rem; margin:12px 0 0}
.tn-sign input[type=text],.tn-sign input[type=email]{display:block; width:100%; margin-top:4px; font:inherit; font-size:1rem; padding:10px 12px; border:1.5px solid var(--line); border-radius:12px; background:#FFFFFF; color:var(--ink)}
.tn-sign input[name=code]{font-size:1.4rem; letter-spacing:.3em; max-width:12rem}
.tn-sign .tn-check{display:flex; gap:8px; align-items:flex-start; font-weight:500}
.tn-sign .tn-check input{margin-top:5px; width:18px; height:18px; flex:none}
.tn-sign .rk-btn{margin-top:12px}
.tn-small{font-size:.85rem; color:var(--muted)}
.tn-small a{color:var(--plum-text); font-weight:600}
.tn-link{font:inherit; background:none; border:0; padding:0; color:var(--plum-text); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.tn-who{margin:8px 0 4px; font-size:.95rem; line-height:1.55}
.tn-h2{margin:18px 0 0; font-size:1.05rem}
.tn-count{display:block; margin:0 0 6px}
.hm-hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0}
.tn-claim{margin:0 0 12px; padding:12px 14px; border-radius:14px; background:var(--logo-cream); border:1.5px solid var(--line)}
.tn-claim p{margin:0; line-height:1.5}
.tn-claim label{display:block; font-weight:600; font-size:.92rem; margin:10px 0 0}
.tn-claim input{display:block; width:100%; margin-top:4px; font:inherit; font-size:1rem; padding:9px 12px; border:1.5px solid var(--line); border-radius:12px; background:#FFFFFF; color:var(--ink)}
.tn-claim .rk-btn{margin-top:12px}

/* ---------- Challenge a friend ---------- */
.ch{margin:20px auto 0; max-width:540px; text-align:left; background:var(--logo-cream); color:var(--ink); border:1.5px solid var(--line); border-radius:18px; padding:16px 18px}
.ch h3{margin:0; font-family:var(--sans); font-size:1.18rem; font-weight:700; color:var(--plum-deep)}
.ch-sub{margin:4px 0 12px; font-size:.95rem; color:var(--muted); line-height:1.5}
.ch-name{display:block; font-weight:600; font-size:.95rem; margin:0 0 10px}
.ch-name input{display:block; width:100%; margin-top:4px; font:inherit; font-size:1rem; padding:9px 12px; border:1.5px solid var(--line); border-radius:12px; background:#FFFFFF; color:var(--ink)}
.ch-send{appearance:none; font:inherit; font-weight:700; font-size:1.02rem; padding:.7rem 1.6rem; border-radius:999px; border:2px solid #C9A55A; background:#E9C76E; color:#2A1F06; cursor:pointer}
.ch-send:hover{background:#E2BC5A}
.ch-send:disabled{opacity:.6; cursor:default}
.ch-send:focus-visible{outline:3px solid var(--gold-soft); outline-offset:2px}
.ch-msg{margin:8px 0 0; font-size:.92rem; line-height:1.5}
.ch-msg:empty{display:none}
.ch-res{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.ch-lbl{margin:0 0 6px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gold-text)}
.ch-list{list-style:none; margin:0 0 6px; padding:0}
.ch-list li{padding:8px 12px; border-radius:12px; margin:0 0 6px; background:#FFFFFF; border:1px solid var(--line); font-size:.95rem; line-height:1.45}
.ch-list li.win{border-color:#9CCDAF; background:#F1FAF4}
.ch-list li.lose{border-color:#E6C3BD; background:#FFF6F3}
.ch-list li span{font-weight:600}
.ch-top{margin-bottom:14px}
.ch-wait{margin:0 0 6px; font-size:.92rem; color:var(--muted)}
.ch-reply{margin:0 0 16px; padding:12px; border-radius:14px; background:#FFFFFF; border:1.5px solid #E2C36B}
.ch-reply p{margin:0 0 8px; font-size:.95rem; line-height:1.45}
.ch-reply .rk-err{margin-top:6px}
.chb{display:flex; gap:10px; align-items:flex-start; width:100%; max-width:560px; margin:14px auto 4px; padding:12px 14px; border-radius:16px; background:#FBF3DC; border:1.5px solid #E2C36B; text-align:left; font-size:.97rem; line-height:1.5; color:var(--ink)}
.chb p{margin:0}
.chb-ic svg{display:block; width:22px; height:22px; margin-top:1px; color:#E07A36}
#gtChalBanner .chb{max-width:none; margin:0 0 14px}

/* ---------- badges ---------- */
.bg-med{--s:64px; --ring:#D9B254; position:relative; flex:none; width:var(--s); height:var(--s); border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 34% 28%, #FFFBEF 0%, #F4E4B8 100%); box-shadow:inset 0 0 0 3px var(--ring), 0 6px 12px -8px rgba(80,60,20,.6)}
.bg-med.f7{--ring:#C98A55}
.bg-med.f14{--ring:#A9B3BB}
.bg-med.f30{--ring:#D9B254}
.bg-med.f100{--ring:#D4708A}
.bg-med.off{background:#F1F0EA; box-shadow:inset 0 0 0 2px #D5D3C8; filter:grayscale(1); opacity:.5}
.bg-tiles{display:flex; gap:2px}
.bg-tiles .tile{display:block; width:calc(var(--s) * .34); aspect-ratio:3/4; border-radius:4px; background:linear-gradient(170deg,#FFFEF9 0%,#F3EDDB 100%); box-shadow:inset 0 0 0 1px rgba(30,42,61,.16), 0 2px 0 #C5AE82}
.bg-tiles.one .tile{width:calc(var(--s) * .44)}
.bg-tiles .tile svg{display:block; width:100%; height:100%}
.bg-icon svg{display:block; width:calc(var(--s) * .5); height:calc(var(--s) * .5); color:#B98F2E}
.bg-flame{position:relative; display:block; width:calc(var(--s) * .64); height:calc(var(--s) * .64); color:#E07A36}
.bg-flame svg{display:block; width:100%; height:100%}
.bg-flame b{position:absolute; left:0; right:0; top:66%; transform:translateY(-50%); text-align:center; font-size:calc(var(--s) * .19); font-weight:700; color:#FFFFFF; line-height:1}
.bg-mark{position:absolute; right:-3px; bottom:-3px; width:calc(var(--s) * .38); height:calc(var(--s) * .38); border-radius:50%; display:grid; place-items:center; background:#2E9E57; border:2px solid #FFFFFF; color:#FFFFFF; font-size:calc(var(--s) * .16); line-height:1}
.bg-mark svg{display:block; width:72%; height:72%}
.bg-mark.m-no{background:#D9434E}
.bg-mark.m-up{background:#4D8A9A}
.bg-mark.m-x2{background:#8A6D1F}
.bg-mark.m-5{background:var(--plum)}
.bg-mark b{font-weight:700}
/* a new badge, at the bottom of the screen for a few seconds */
.hm-toast{position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:9500; width:min(460px, calc(100% - 24px)); transform:translateX(-50%); display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; background:#FFFFFF; color:var(--ink); border:1.5px solid #E2C36B; border-radius:20px; padding:14px 8px 14px 14px; box-shadow:0 22px 44px -16px rgba(40,46,38,.6); animation:hmtIn .35s ease-out; font-size:1rem; line-height:1.4; text-align:left}
.hm-toast.out{opacity:0; transform:translate(-50%, 12px); transition:opacity .25s, transform .25s}
@keyframes hmtIn{from{opacity:0; transform:translate(-50%, 16px)} to{opacity:1; transform:translate(-50%, 0)}}
@media (prefers-reduced-motion: reduce){ .hm-toast{animation:none} .hm-toast.out{transition:none} }
.hmt-title{margin:0; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gold-text)}
.hmt-name{margin:1px 0 0; font-size:1.12rem; font-weight:700; color:var(--plum-deep)}
.hmt-sub{margin:2px 0 0; font-size:.92rem; color:var(--muted)}
.hmt-acts{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:8px}
.hmt-btn{font:inherit; font-size:.9rem; font-weight:700; padding:6px 14px; border-radius:999px; border:0; background:var(--plum); color:#FFFFFF; cursor:pointer}
.hmt-btn:hover{background:var(--plum-deep)}
.hmt-link{font-size:.9rem; font-weight:600; color:var(--plum-text)}
.hmt-msg{margin:6px 0 0; font-size:.88rem}
.hmt-msg:empty{display:none}
.hmt-x{font:inherit; font-size:1.5rem; line-height:1; width:36px; height:36px; border-radius:50%; border:0; background:transparent; color:var(--muted); cursor:pointer}
.hmt-x:hover{background:var(--cream-deep)}
/* a tile style you unlock with a streak */
.tp-opt.locked{cursor:default; background:#FBFAF6}
.tp-opt.locked:hover{border-color:var(--line); background:#FBFAF6}
.tp-opt.locked .tp-row{filter:grayscale(.8); opacity:.55}
.tp-lock{display:flex; align-items:flex-start; gap:6px; margin:3px 0 2px; font-size:.88rem; font-weight:600; color:#7A5E1C; line-height:1.4}
.tp-lock svg{flex:none; margin-top:2px}

/* ---------- the Daily Mahj Puzzle by email ---------- */
.rm{margin:20px auto 0; max-width:540px; text-align:left; background:#FFFFFF; color:var(--ink); border:1.5px solid var(--line); border-radius:18px; padding:16px 18px}
.rm h3{margin:0; font-family:var(--sans); font-size:1.18rem; font-weight:700; color:var(--plum-deep)}
.rm-sub{margin:4px 0 12px; font-size:.95rem; color:var(--muted); line-height:1.5}
.rm-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.rm-row label{display:block; font-weight:600; font-size:.92rem}
.rm-row input{display:block; width:100%; margin-top:4px; font:inherit; font-size:1rem; padding:9px 12px; border:1.5px solid var(--line); border-radius:12px; background:#FFFFFF; color:var(--ink)}
.rm-row input:focus-visible{outline:3px solid var(--gold-soft); outline-offset:1px; border-color:var(--sage)}
.rm .rk-auto{display:flex; align-items:flex-start; gap:8px; margin:12px 0; font-size:.9rem; font-weight:500; line-height:1.4; cursor:pointer}
.rm .rk-note a{color:var(--plum-text); font-weight:600}
.rm.on p{margin:4px 0 0; line-height:1.5}
.rm.on .rk-link{margin-top:8px}
@media (max-width:520px){ .rm-row{grid-template-columns:minmax(0,1fr)} .rm,.ch{padding:14px 14px} }

/* Home page: two cards side by side */
.grid-3.two-up{grid-template-columns:repeat(2,1fr); max-width:880px; margin-left:auto; margin-right:auto}
@media (max-width:860px){ .grid-3.two-up{grid-template-columns:1fr} }

/* ===== Home page redesign, Nov 2026: top bar, painting hero, cards, product grid ===== */
.hm2 .section{padding:64px 0}
@media (max-width:760px){ .hm2 .section{padding:44px 0} }

/* one slim top bar: logo left, menu right */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid var(--line); box-shadow:0 6px 14px -12px rgba(60,67,58,.55)}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:76px}
.topbar .brand-mark{width:48px; height:48px; border-radius:8px}
.topbar .brand-word{height:40px}
.topbar .mainnav{gap:22px; justify-content:flex-end}
.topbar .mainnav a,.topbar .mainnav .nav-shop{font-size:1rem; padding:24px 0 21px}
.topbar .menu-button{width:auto; min-height:48px; padding:0 4px}
@media (max-width:1060px){ .topbar .mainnav{gap:16px} .topbar .mainnav a,.topbar .mainnav .nav-shop{font-size:.95rem} }
@media (max-width:960px){
  .topbar .menu-button{display:flex}
  .topbar .mainnav{display:none}
  .topbar.menu-open .topbar-in{flex-wrap:wrap}
  .topbar.menu-open .mainnav{display:flex; flex-direction:column; align-items:stretch; gap:0; width:100%; padding:0 0 10px; border-top:1px solid var(--line); overflow:visible}
  .topbar.menu-open .mainnav a,.topbar.menu-open .mainnav .nav-shop{display:block; width:100%; text-align:left; padding:14px 4px; font-size:1.1rem; border-bottom:1px solid var(--line)}
}
@media (max-width:620px){ .topbar-in{min-height:64px} .topbar .brand-mark{width:40px; height:40px} .topbar .brand-word{height:30px} }

/* hero: the painting behind the words */
.hero2{position:relative; isolation:isolate; overflow:hidden; background:var(--logo-cream); text-align:center}
.hero2 picture, .hero2 picture img{position:absolute; inset:0; width:100%; height:100%; z-index:-2}
.hero2 picture img{object-fit:cover; object-position:center 62%}
.hero2::before{content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.80) 38%, rgba(255,255,255,.10) 70%, rgba(255,255,255,0) 100%)}
.hero2 .hero-copy{padding-top:40px; padding-bottom:120px}
.hero2 h1{margin:0}
.hero2 .hero-sub{font-size:1.2rem; color:var(--ink); max-width:44ch; margin:0 auto}
.hero2 .rule{margin:.9rem 0 1rem}
.hero2 .hero-actions{margin:1.3rem 0 0}
.hero2 .button.secondary{background:rgba(255,255,255,.85)}
@media (max-width:760px){
  .hero2 .hero-copy{padding-top:24px; padding-bottom:84px}
  .hero2 h1{font-size:2.4rem}
  .hero2 .eyebrow{font-size:.78rem; letter-spacing:.12em}
  .hero2 .hero-actions{gap:10px}
  .hero2 .hero-actions .button{padding:13px 22px; font-size:.92rem}
  .hero2 .hero-sub{font-size:1.08rem}
  .hero2 picture img{object-position:center 80%}
}

/* three ways in, tucked up over the painting */
.paths{position:relative; z-index:3; margin-top:-64px}
.paths-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.path{display:flex; gap:16px; align-items:flex-start; background:#FFFFFF; border:1px solid var(--line); border-radius:14px; padding:22px 22px 20px; box-shadow:0 14px 30px -22px rgba(60,67,58,.6); text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s}
a.path:hover{transform:translateY(-2px); box-shadow:0 18px 34px -22px rgba(60,67,58,.7)}
.path img{flex:none; width:40px; height:auto}
.path h3{color:var(--plum-text); font-size:1.12rem; margin:0 0 .25rem}
.path p{font-size:1rem; line-height:1.55; color:var(--muted); margin:0 0 .5rem}
.path .go{font-size:.86rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-text)}
@media (max-width:860px){ .paths{margin-top:-44px} .paths-grid{grid-template-columns:1fr; gap:12px} .path{padding:14px 16px; gap:14px} .path img{width:32px} .path h3{font-size:1.04rem; margin:0} .path p{font-size:.92rem; margin:0 0 .3rem} .path .go{font-size:.78rem} }

/* section headings that sit left with a link on the right */
.head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap}
.head-row .eyebrow{margin-bottom:.3rem}
.head-row h2{margin:0}
.more{font-size:.95rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--plum-text); text-decoration:none; border-bottom:1.5px solid var(--gold-soft); padding-bottom:3px; white-space:nowrap}
.more:hover{border-bottom-color:var(--gold)}

/* product grid */
.hm2 .pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.hm2 .pcard-desc{font-size:.95rem}
.hm2 .buy{display:flex; align-items:center; gap:12px}
.hm2 .button.small{padding:10px 18px; font-size:.9rem}
@media (max-width:1000px){ .hm2 .pgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .hm2 .pgrid{gap:12px}
  .hm2 .pcard{flex-direction:column}
  .hm2 .pcard-img{flex:none; aspect-ratio:1/1; border-right:0; border-bottom:1px solid var(--line)}
  .hm2 .pcard-img img{height:100%}
  .hm2 .pcard-body{padding:10px 12px 12px}
  .hm2 .pcard h3{font-size:1rem}
  .hm2 .pcard .kicker{font-size:.72rem}
  .hm2 .pcard-desc,.hm2 .pcard .also{display:none}
  .hm2 .buy{flex-direction:column; align-items:flex-start; gap:4px}
  .hm2 .button.small{padding:8px 14px; font-size:.82rem}
}

/* meet Haley */
.meet{display:grid; grid-template-columns:320px 1fr; gap:48px; align-items:center; max-width:960px; margin:0 auto}
.meet .photo{aspect-ratio:4/5; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.meet .photo img{width:100%; height:100%; object-fit:cover}
.meet h2{margin:0 0 .6rem}
.meet p{color:var(--ink)}
@media (max-width:760px){
  .meet{grid-template-columns:120px 1fr; gap:18px 20px; align-items:start}
  .meet .photo{border-radius:50%; aspect-ratio:1/1}
  .meet .eyebrow{margin-bottom:.3rem}
  .meet h2{font-size:2rem; margin:0}
  .meet .meet-text{display:contents}
  .meet .meet-head{align-self:center}
  .meet .meet-body{grid-column:1 / -1}
}

/* newsletter as one band */
.signup{display:grid; grid-template-columns:1.1fr 1fr; gap:32px; align-items:center; background:#FFFFFF; border:1px solid var(--line); border-radius:16px; padding:34px 40px}
.signup h2{font-size:2.1rem; margin:0 0 .3rem}
.signup p{margin:0}
.signup .newsletter-form{margin:0; justify-content:flex-end; flex-wrap:nowrap}
.signup .newsletter-form input{min-width:0; flex:1}
@media (max-width:860px){ .signup{grid-template-columns:1fr; padding:26px 22px; gap:18px; text-align:center} .signup .newsletter-form{flex-wrap:wrap; justify-content:center} .signup .newsletter-form input{min-width:240px} }