/* Periodic Tobacco Tables: shared look (v2.0). Parchment sheet set in a woven-leaf mat, as on the Leaf Mat posters. */
:root{
  --bg:#FFFFFF; --paper:#F8F6F1; --ink:#2B1B10; --ink2:#5A4330; --rule:#6B4A2B; --hair:#C4A97E; --accent:#7A2E1F; --accent-ink:#FBF3E2; --shade:rgba(43,27,16,.06);
  --leaf:url("img/leaf-tile.svg"); --leaf-base:#66623A; --bevel-dark:#3E2E1C; --bevel-gold:#B49A5E;
  --walnut:#3B2616; --ok:#3F5A2A; --warn:#8A5A12;
  --display:'IM Fell English SC', 'Iowan Old Style', Georgia, serif; --italic:'IM Fell English', Georgia, serif; --body:'EB Garamond', Garamond, Georgia, serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1C140E; --paper:#271C14; --ink:#EEDFC2; --ink2:#C4AE8C; --rule:#A07C52; --hair:#4C3926; --accent:#D9845F; --accent-ink:#1C140E; --shade:rgba(238,223,194,.06);
  --leaf:url("img/leaf-tile-dark.svg"); --leaf-base:#3E3B22; --bevel-dark:#0E0904; --bevel-gold:#8C7646; --ok:#9DBB7E; --warn:#E0B060; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#1C140E; --paper:#271C14; --ink:#EEDFC2; --ink2:#C4AE8C; --rule:#A07C52; --hair:#4C3926; --accent:#D9845F; --accent-ink:#1C140E; --shade:rgba(238,223,194,.06);
  --leaf:url("img/leaf-tile-dark.svg"); --leaf-base:#3E3B22; --bevel-dark:#0E0904; --bevel-gold:#8C7646; --ok:#9DBB7E; --warn:#E0B060; color-scheme:dark }

*{box-sizing:border-box}
html{background:var(--leaf-base) var(--leaf) repeat;background-size:150px 96px}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.5}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;text-wrap:balance;margin:0}

/* the parchment sheet inside the leaf mat */
.sheet{max-width:1320px;margin:clamp(10px,3.2vw,44px) auto;background:var(--bg);
  box-shadow:0 0 0 3px var(--bevel-dark),0 0 0 6px var(--bevel-gold),0 12px 34px rgba(20,12,6,.55);
  width:calc(100% - 2 * clamp(10px,3.2vw,44px));position:relative}
.sheet::before{content:"";position:absolute;inset:10px;border:5px double var(--rule);pointer-events:none;opacity:.55}
@media (max-width:600px){ .sheet::before{inset:5px;border-width:3px} }

.wrap{max-width:1240px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--display);letter-spacing:.24em;word-spacing:.3em;font-size:14px;color:var(--ink2);text-transform:uppercase}
.lede{font-size:20px;color:var(--ink2);max-width:62ch;margin:10px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;border:2px solid var(--accent);background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-size:17px;letter-spacing:.06em;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.small{min-height:36px;padding:4px 12px;font-size:15px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.chip{min-height:36px;padding:4px 12px;border:1px solid var(--hair);background:var(--paper);cursor:pointer;font-size:15px}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}

/* header */
header.top{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:3px double var(--rule)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{height:48px;width:auto}
.brand span{font-family:var(--display);font-size:20px;letter-spacing:.08em}
nav.main{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 10px;font-family:var(--display);font-size:14px;letter-spacing:.01em}
.brand span{white-space:nowrap}
nav.main a{color:var(--ink);text-decoration:none;padding:6px 0}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--accent)}
.menu-btn{display:none;min-height:44px;padding:6px 12px;border:1px solid var(--rule);background:transparent;font-family:var(--display);cursor:pointer}
@media (max-width:1360px){
  .menu-btn{display:inline-flex;align-items:center}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:3px double var(--rule);flex-direction:column;padding:8px 18px 14px}
  nav.main.open{display:flex}
  .brand span{font-size:17px}
}
.logo-ink{filter:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo-ink{filter:invert(1) sepia(.35) brightness(1.05)} }
:root[data-theme="dark"] .logo-ink{filter:invert(1) sepia(.35) brightness(1.05)}

/* walnut frame around poster images */
.walnut{position:relative;padding:clamp(10px,2.2vw,22px);background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 2px,rgba(255,255,255,.03) 2px 5px,rgba(0,0,0,.06) 5px 9px,rgba(255,255,255,.02) 9px 15px),
  linear-gradient(135deg,#5A3A22,#3B2616 45%,#2A1A0E);
  box-shadow:inset 0 0 0 1px rgba(255,235,200,.12),inset 0 0 0 clamp(3px,.6vw,6px) rgba(0,0,0,.18),0 6px 14px rgba(0,0,0,.16),0 1px 3px rgba(0,0,0,.20)}   /* v7.0: a short, neutral shadow so nothing tints the white page */
.walnut img{display:block;width:100%;height:auto;box-shadow:0 0 0 2px #1E1209,inset 0 0 0 1px #000}
.walnut::after{content:"";position:absolute;inset:clamp(10px,2.2vw,22px);background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,0) 38%);pointer-events:none}

/* panels and forms */
.panel{border:3px double var(--rule);background:var(--paper);padding:20px}
.panel h2{font-size:clamp(26px,3.4vw,36px)}
.panel h3{font-size:24px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 16px;margin-top:14px}
.fields .wide{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--ink2)}
label.f span{font-family:var(--display);letter-spacing:.08em}
input.in,select.in,textarea.in{min-height:44px;padding:8px 12px;border:1px solid var(--rule);background:var(--bg);color:var(--ink);font-size:17px;width:100%}
textarea.in{min-height:96px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:16px;margin-top:12px}
.check input{width:22px;height:22px;margin-top:2px;accent-color:var(--accent)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:14px}
.muted{color:var(--ink2);font-size:15px}
.empty{color:var(--ink2);font-style:italic}
.msg{margin-top:10px;font-size:16px}
.msg.err{color:var(--accent)}
.msg.ok{color:var(--ok)}
.demo{border:1px dashed var(--warn);color:var(--warn);background:var(--shade);padding:8px 12px;font-size:15px;margin-bottom:14px}
.tag{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--hair);background:var(--bg);padding:1px 8px;font-size:14px;margin:2px 4px 2px 0}
.tag button{border:0;background:none;cursor:pointer;padding:0 2px;font-size:16px;line-height:1}
.status{font-family:var(--display);letter-spacing:.1em;font-size:13px;text-transform:uppercase;padding:2px 8px;border:1px solid currentColor}
.status.pending,.status.changes{color:var(--warn)} .status.approved{color:var(--ok)} .status.rejected{color:var(--accent)}
table.list{width:100%;border-collapse:collapse;font-size:16px}
table.list th{font-family:var(--display);font-weight:400;letter-spacing:.06em;text-align:left;border-bottom:2px solid var(--rule);padding:8px 6px}
table.list td{border-bottom:1px solid var(--hair);padding:8px 6px;vertical-align:top}
table.list td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.scroll-x{overflow-x:auto}
section.band{padding-block:48px;border-top:1px solid var(--hair)}
main.page{padding-block:36px 56px}

footer.site{border-top:3px double var(--rule);background:var(--paper);padding-block:26px;font-size:15px;color:var(--ink2)}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
footer.site img{height:72px;width:auto}
footer.site nav{display:flex;flex-wrap:wrap;gap:6px 16px}

/* age gate */
.gate{position:fixed;inset:0;z-index:80;background:rgba(20,12,6,.9);display:flex;align-items:center;justify-content:center;padding:16px}
.gate .box{background:#F8F6F1;color:#2B1B10;border:3px double #6B4A2B;max-width:460px;padding:28px 24px;text-align:center}
.gate h2{font-size:30px;margin-bottom:8px}
.gate .row{justify-content:center;margin-top:16px}
.gate .btn{background:#7A2E1F;border-color:#7A2E1F;color:#FBF3E2}
.gate .btn.ghost{background:transparent;color:#7A2E1F}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }

/* v2.3 copy protection (deterrent only) */
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
.walnut,.lb .view,.tile,.mapframe{-webkit-user-select:none;user-select:none}
.ipnote{font-size:13px;color:var(--ink2);margin-top:4px}
/* v2.8: printing stays blocked everywhere except a person's own report page (html.can-print) */
@media print{
  html:not(.can-print),html:not(.can-print) body{background:#fff!important}
  html:not(.can-print) body *{display:none!important}
  html:not(.can-print) body::after{display:block!important;content:"© 2026 Elementum Press, LLC. All rights reserved. No reproduction without written permission. Prints are available at periodictobaccotables.com.";font:18px Georgia,serif;color:#000;padding:40px;position:static;height:auto;background:none}
}

/* v3.7 calls to action */
nav.main a.navcta{background:#B8892E;color:#1E1409;padding:6px 14px;border:1px solid #8C6420;letter-spacing:.06em}
nav.main a.navcta:hover{background:#C9952F;color:#1E1409}
@media (max-width:1360px){ nav.main a.navcta{align-self:flex-start;margin-top:4px} }
.promo{border-top:3px double var(--rule);margin-top:34px;padding:22px 0}
.promo .wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;align-items:center}
@media (max-width:720px){ .promo .wrap{grid-template-columns:1fr} }
.promo img{width:100%;height:auto;border:6px solid #3B2616;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.promo h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.6vw,38px);margin:0 0 4px}
.promo p{margin:0 0 10px;font-size:17px}
.cta-inline{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;border:1px dashed var(--rule);background:var(--paper);padding:10px 12px;margin-top:12px;font-size:15.5px}
.cta-inline strong{font-family:var(--display);font-weight:400;letter-spacing:.04em}

/* v5.9 languages */
html.i18n-wait body{visibility:hidden}
nav.main a.langsw,footer nav a.langsw{border:1px solid var(--rule);padding:4px 10px;font-size:13px;letter-spacing:.04em}
@media (max-width:1360px){ nav.main a.langsw{align-self:flex-start;margin-top:6px} }
@media (min-width:1361px){ nav.main{gap:7px} nav.main a{font-size:13px;letter-spacing:0} }

/* v6.1 section sponsor line and email sign-up box */
.sponsor{border:1px solid var(--rule);background:var(--paper);padding:6px 12px;margin:10px 0;font-size:15px;text-align:center}
.sponsor .sp-l{font-family:var(--display);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-right:4px}
.subbox{border:3px double var(--rule);background:var(--paper);padding:14px 16px}

/* v6.2: headings in the same brown as the selected table tab (light: 6.2:1 contrast on the page; dark: a lighter brown) */
:root{--head:#6B4A2B}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--head:#D2AE7E} }
:root[data-theme="dark"]{--head:#D2AE7E}
h1,h2,.tm-mast .t{color:var(--head)}
.tm{font-size:.26em;vertical-align:top;position:relative;top:.1em;line-height:1;margin-left:.06em;font-family:var(--body);letter-spacing:0}

/* v6.4: a pale gallery wall behind framed posters, so the walnut frames stand out from the parchment */
:root{--wall:transparent;--wall-edge:transparent}   /* v6.5: white page, so no gallery wall is needed in the light theme */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){--wall:#3A2E24;--wall-edge:#4C3926} }
:root[data-theme="dark"]{--wall:#3A2E24;--wall-edge:#4C3926}

/* v6.6: compact language chooser in the menu */
nav.main select.langsw{min-height:32px;padding:2px 22px 2px 8px;border:1px solid var(--rule);background:var(--bg);color:var(--ink);font-family:var(--display);font-size:13px;width:auto;cursor:pointer;
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 11px) 55%,calc(100% - 7px) 55%;background-size:4px 4px;background-repeat:no-repeat}

@media (max-width:1360px){ nav.main select.langsw{align-self:flex-start;margin-top:6px} }

/* v7.6: easier-to-read menu. The menu uses the text face (EB Garamond) at a larger size instead of the small-caps display face. */
nav.main a{font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:0}
nav.main a.navcta{font-family:var(--body);font-weight:500;font-size:16px;letter-spacing:.02em}
nav.main select.langsw{font-family:var(--body);font-size:15px}
@media (min-width:1361px){ nav.main{gap:4px 14px} nav.main a{font-size:16px;letter-spacing:0} }
@media (max-width:1360px){ nav.main a{font-size:18px;padding:8px 0} }
@media (min-width:1361px){ header.top .wrap{flex-wrap:wrap;row-gap:0;padding-block:6px 0}
  header.top nav.main{flex:1 0 100%;justify-content:space-between;align-items:center;flex-wrap:nowrap;border-top:1px solid var(--rule);margin-top:6px;padding:4px 0 6px} }