/* Tawny Leaf: a tea merchant's caddy shelf */
:root{
  --umber:#21130a;--bark:#2e1b0e;--plank:#553219;--plank-hi:#7a4c26;
  --tawny:#c9772f;--gilt:#e0b96f;--gilt-dim:#a8854a;
  --paper:#f0e4ca;--paper-2:#e6d6b4;--ink:#2a1709;--ink-soft:#5b4330;
  --cream:#eee1c8;--cream-soft:#c9b89c;--ox:#6d2219;--bottle:#2e4a35;--japan:#17110c;--indigo:#27344f;
  --display:"IM Fell Double Pica","Iowan Old Style",Georgia,serif;
  --text:Alegreya,Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--umber) repeating-linear-gradient(92deg,rgba(255,220,170,.012) 0 3px,transparent 3px 11px);color:var(--cream);font:400 1.15rem/1.62 var(--text);overflow-wrap:break-word}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--gilt);text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{color:#f6d796}
:focus-visible{outline:2px solid var(--gilt);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.14;color:#f6ebd3}
.skipper{position:absolute;left:-999px;top:0;background:var(--paper);color:var(--ink);padding:.5rem 1rem;z-index:9}
.skipper:focus{left:.5rem;top:.5rem}
.smallcaps{font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;font-weight:500}

/* fascia: the painted shop sign */
.fascia{background:linear-gradient(#3a2212,#25150a);border-bottom:6px solid var(--plank);position:relative}
.fascia-in{max-width:1200px;margin:auto;padding:1rem 1rem .9rem;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.fascia-board{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--gilt);padding:.55rem 1.5rem;border:1px solid var(--gilt-dim);outline:3px double var(--gilt-dim);outline-offset:3px;border-radius:3px}
.fascia-board:hover{color:#f6d796}
.fascia-board svg{width:50px;height:50px;flex:none}
.fascia-name{font:400 clamp(2rem,6vw,3.2rem)/1 var(--display);letter-spacing:.015em;display:block;white-space:nowrap}
.fascia-tag{display:block;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--cream-soft);margin-top:.3rem}
.drawer-toggle{position:absolute;opacity:0;width:1px;height:1px}
.drawer-btn{display:none}
.drawers{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.drawers a{display:block;text-decoration:none;color:var(--ink);background:linear-gradient(#ecd49c,#c9a55f);padding:.17rem .9rem;border-radius:2px;box-shadow:0 2px 0 #5d431f,inset 0 0 0 1px rgba(80,50,15,.45);font-size:.8rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500}
.drawers a:hover,.drawers a[aria-current]{background:linear-gradient(#f8e7bd,#dfbd77)}

/* page frame */
.page{max-width:1200px;margin:auto;padding:0 1.25rem}
.notehead{font-family:var(--display);font-size:clamp(1.75rem,3.6vw,2.5rem);margin:0 0 .3rem}

/* homepage: shop window */
.window{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(1.75rem,4vw,3.25rem) 0 2.25rem}
.window-pane{margin:0}
.window-pane img{width:100%;aspect-ratio:6/7;object-fit:cover;border-radius:50% 50% 3px 3px/30% 30% 3px 3px;border:7px solid var(--plank);outline:1px solid var(--gilt-dim);outline-offset:-3px;filter:sepia(.18) saturate(.92)}
.window-pane figcaption{font-size:.78rem;line-height:1.35;color:var(--cream-soft);margin-top:.5rem;text-align:center}
.window-pane a{color:inherit}
.window h1{font-size:clamp(2.35rem,5.6vw,4.1rem);margin:.3rem 0 .85rem}
.window p{max-width:37em;margin:0 0 1rem}
.window .smallcaps{color:var(--gilt)}
.pointer{display:inline-block;font-family:var(--display);font-size:1.25rem;border-bottom:1px solid var(--gilt-dim);text-decoration:none}

/* the shelves */
.shelfhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem 1.5rem;margin-top:1.25rem}
.shelfhead p{margin:0;color:var(--cream-soft)}
.shelf{display:grid;gap:clamp(.9rem,2vw,1.7rem);align-items:end;padding:1.35rem .7rem 0;position:relative;margin-bottom:3.1rem}
.shelf::after{content:"";position:absolute;left:-.4rem;right:-.4rem;bottom:-1.25rem;height:1.25rem;background:linear-gradient(var(--plank-hi),var(--plank) 30%,#3a2110);box-shadow:0 12px 18px rgba(0,0,0,.5);border-radius:1px}
.shelf-a{grid-template-columns:1.15fr 1fr .95fr}
.shelf-b{grid-template-columns:.95fr 1.2fr 1fr}
.caddy{position:relative;display:flex;flex-direction:column;background:var(--tin,#17110c);padding:0 .8rem .8rem;border-radius:5px 5px 2px 2px;box-shadow:inset 8px 0 14px rgba(255,255,255,.07),inset -12px 0 16px rgba(0,0,0,.42);min-width:0}
.caddy::before{content:"";display:block;height:1.55rem;margin:0 -.8rem .85rem;background:linear-gradient(rgba(255,255,255,.17),rgba(0,0,0,.22)),var(--tin,#17110c);border-bottom:2px solid var(--gilt-dim);border-radius:5px 5px 0 0}
.caddy::after{content:"";position:absolute;top:-.6rem;left:50%;width:2.3rem;height:.68rem;margin-left:-1.15rem;background:linear-gradient(#ecd49c,#9d7a3f);border-radius:6px 6px 0 0}
.tin-ox{--tin:var(--ox)}.tin-bottle{--tin:var(--bottle)}.tin-japan{--tin:var(--japan)}.tin-indigo{--tin:var(--indigo)}.tin-tawny{--tin:#874a1c}.tin-plum{--tin:#4a2233}
.tall{padding-bottom:1.9rem}
.label{position:relative;flex:1;background:var(--paper) linear-gradient(160deg,rgba(255,255,255,.3),rgba(160,120,60,.1));color:var(--ink);border-radius:3px;padding:1rem .95rem .8rem;box-shadow:inset 0 0 0 1px #8d6c3c,inset 0 0 0 4px var(--paper),inset 0 0 0 5px #8d6c3c;text-align:center;display:flex;flex-direction:column;align-items:center}
.label-no{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ox);font-weight:700}
.label-oval{width:min(68%,168px);aspect-ratio:4/3;margin:.45rem 0 .55rem;border-radius:50%;object-fit:cover;border:2px solid #8d6c3c;background:var(--paper-2)}
.label h3{color:var(--ink);font-size:1.38rem;line-height:1.14;margin:0 0 .4rem}
.label h3 a{color:inherit;text-decoration:none}
.label h3 a::after{content:"";position:absolute;inset:0}
.label h3 a:hover{color:var(--ox)}
.label p{font-size:.98rem;line-height:1.36;margin:0 0 .5rem;color:#402b18}
.fine{font-size:.72rem;line-height:1.3;color:var(--ink-soft);margin-top:auto;position:relative;z-index:1}
.fine a{color:inherit}

/* brewing dials */
.dialboard{background:var(--bark);border:1px solid var(--plank-hi);padding:clamp(1rem,3vw,1.9rem);margin:3rem 0;border-radius:4px;box-shadow:inset 0 0 0 4px var(--bark),inset 0 0 0 5px var(--gilt-dim)}
.prose .dialboard{margin:1.2rem 0 .3rem;padding:1rem .7rem}
.dialboard>p{max-width:42em;margin:.1rem 0 1.1rem;color:var(--cream)}
.dials{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;margin:0;padding:0;list-style:none}
.dialbox{text-align:center;font-size:.95rem;line-height:1.28}
.dial{width:100%;max-width:146px;margin:0 auto .4rem}
.dialbox b{display:block;font:400 1.3rem/1.1 var(--display);color:#f6ebd3}
.dialbox span{color:var(--cream-soft)}
.d-face{fill:var(--paper);stroke:#8d6c3c;stroke-width:1.5}
.d-rim{fill:none;stroke:var(--gilt);stroke-width:3}
.d-wedge{fill:var(--tawny)}
.d-tick{stroke:var(--ink);stroke-width:1.2}
.d-num{font:600 10px var(--text);fill:var(--ink);text-anchor:middle}
.d-mid{font:400 15px var(--display);fill:var(--ink);text-anchor:middle}
.d-hub{fill:var(--paper)}
.boardnote{font-size:.87rem;margin:1rem 0 0;color:var(--cream-soft)}

/* day book + window notice */
.counter{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(1.5rem,4vw,3rem);align-items:start;margin:0 0 3rem}
.daybook{width:100%;border-collapse:collapse;font-size:1.03rem}
.daybook th,.daybook td{text-align:left;padding:.5rem .6rem .5rem 0;border-bottom:1px solid #5b3e22;vertical-align:baseline}
.daybook th{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;color:var(--cream-soft)}
.daybook td:first-child{white-space:nowrap;color:var(--cream-soft);font-size:.92rem}
.daybook td:last-child{color:var(--cream-soft);font-style:italic}
.ticket{background:var(--paper);color:var(--ink);padding:1.25rem 1.2rem;transform:rotate(-1.1deg);box-shadow:0 7px 16px rgba(0,0,0,.45);position:relative}
.ticket::before{content:"";position:absolute;top:.55rem;left:50%;width:.7rem;height:.7rem;margin-left:-.35rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f5dfa6,#8a6a2f)}
.ticket h2{color:var(--ink);font-size:1.55rem;margin:.65rem 0 .4rem;text-align:center}
.ticket p{margin:0 0 .6rem;font-size:1rem;line-height:1.42}
.ticket a{color:var(--ox);font-weight:700}

/* stock list (blog index) */
.pagehead{padding:clamp(1.75rem,4vw,3rem) 0 1.2rem;max-width:48em}
.pagehead h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:.2rem 0 .6rem}
.pagehead p{margin:0}
.pagehead .smallcaps{color:var(--gilt)}
.stock{list-style:none;margin:.5rem 0 3rem;padding:0;border-top:3px double var(--gilt-dim)}
.stock li{display:grid;grid-template-columns:7rem minmax(0,120px) minmax(0,1fr);gap:1.25rem;padding:1.15rem 0;border-bottom:1px solid #5b3e22;align-items:start}
.stock time{font-size:.9rem;color:var(--cream-soft);line-height:1.3}
.stock time b{display:block;font:400 1.5rem var(--display);color:var(--gilt)}
.stock img{border-radius:50%;aspect-ratio:1;object-fit:cover;border:2px solid var(--gilt-dim);width:100%}
.stock h2{font-size:1.6rem;margin:0 0 .25rem}
.stock h2 a{color:#f6ebd3;text-decoration:none}
.stock h2 a:hover{color:var(--gilt)}
.stock p{margin:0 0 .3rem}
.stock small{font-size:.74rem;color:var(--cream-soft)}
.stock small a{color:inherit}

/* article */
.docket{background:var(--paper);color:var(--ink);padding:clamp(1.25rem,3vw,2.2rem);margin:clamp(1.25rem,3vw,2.25rem) 0 0;box-shadow:inset 0 0 0 1px #8d6c3c,inset 0 0 0 5px var(--paper),inset 0 0 0 6px #8d6c3c;text-align:center;position:relative;z-index:1}
.docket h1{color:var(--ink);font-size:clamp(2rem,4.8vw,3.3rem);margin:.35rem auto .55rem;max-width:20em}
.docket p{margin:0 auto;max-width:42em;color:#402b18}
.crumbs{font-size:.8rem;letter-spacing:.05em;color:var(--ink-soft)}
.crumbs a{color:inherit}
.docket-meta{margin-top:.75rem!important;font-size:.85rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ox)!important;font-weight:500}
.plate{margin:0;background:var(--bark)}
.plate img{width:100%;max-height:430px;object-fit:cover;filter:sepia(.1)}
.plate figcaption{font-size:.8rem;padding:.45rem .1rem;color:var(--cream-soft);line-height:1.35}
.plate figcaption a,.inset figcaption a{color:inherit}
.leaf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,16rem);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;padding:1.5rem 0 3rem}
.prose{min-width:0;max-width:40em}
.prose>p:first-of-type{font-size:1.28rem;line-height:1.5;color:#f8eeda}
.prose h2{font-size:clamp(1.55rem,3vw,2.05rem);margin:2.1rem 0 .6rem;padding-top:.75rem;border-top:1px solid #5b3e22}
.prose h3{font-size:1.32rem;margin:1.4rem 0 .3rem;color:var(--gilt)}
.prose p,.prose ul,.prose ol{margin:0 0 1rem}
.prose li{margin-bottom:.45rem}
.inset{margin:1.5rem 0}
.inset img{border:1px solid var(--plank-hi)}
.inset figcaption{font-size:.82rem;color:var(--cream-soft);line-height:1.35;margin-top:.4rem}
.inset-side{float:right;width:min(44%,230px);margin:.25rem 0 1rem 1.4rem}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin:1.25rem 0}
.trio figure{margin:0}
.trio img{width:100%}
.trio figcaption{font-size:.72rem;line-height:1.3;color:var(--cream-soft);margin-top:.3rem}
.trio figcaption a{color:inherit}
.paper-note{background:var(--paper);color:var(--ink);padding:1rem 1.15rem;border-left:7px solid var(--ox);margin:1.4rem 0;line-height:1.45}
.paper-note a{color:var(--ox)}
.paper-note p:last-child{margin-bottom:0}
.tablewrap{overflow-x:auto;margin:1.25rem 0}
.ledger{width:100%;border-collapse:collapse;background:var(--paper);color:var(--ink);font-size:1rem;line-height:1.35}
.ledger caption{caption-side:bottom;text-align:left;font-size:.82rem;color:var(--cream-soft);padding-top:.4rem}
.ledger th,.ledger td{padding:.5rem .65rem;border:1px solid #bda476;text-align:left;vertical-align:top}
.ledger thead th{background:var(--paper-2);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.bars{list-style:none;padding:0;margin:1.25rem 0;font-size:1rem}
.bars li{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.7rem;align-items:center;margin-bottom:.45rem}
.bars i{display:block;height:1.35rem;width:calc(var(--v)*1%);background:var(--tawny);color:var(--ink);font:700 .85rem/1.35rem var(--text);padding:0 .35rem;white-space:nowrap;min-width:max-content}
.bars .is-tea i{background:var(--gilt)}
.diagram{background:var(--paper);padding:.7rem;margin:1.4rem 0 0}
.diagcap{font-size:.82rem;color:var(--cream-soft);margin:.4rem 0 1.4rem}
.dg-t{font:500 18px var(--text);fill:#2a1709}
.dg-s{font:400 16px var(--text);fill:#5b4330}
.dg-h{font:400 23px var(--display);fill:#2a1709}
.margin-card{background:var(--bark);border:1px solid var(--plank-hi);padding:1rem 1.05rem;margin-bottom:1.25rem;font-size:1rem;line-height:1.4}
.margin-card h2{font-size:1.28rem;margin:0 0 .5rem;color:var(--gilt)}
.margin-card ul{list-style:none;margin:0;padding:0}
.margin-card li{padding:.45rem 0;border-top:1px dotted #6d4c2a}
.margin-card li:first-child{border-top:0;padding-top:0}
.leaf-side{position:sticky;top:1rem}
.prosewide{max-width:42em;padding-bottom:3rem}
.prosewide h2{font-size:clamp(1.55rem,3vw,2rem);margin:2rem 0 .55rem}
.prosewide h1{margin-bottom:.5rem}
.prosewide ul{padding-left:1.25rem}
.prosewide li{margin-bottom:.4rem}
.prosewide table{margin-top:.6rem}
.creditlist{font-size:.95rem;line-height:1.4;padding-left:1.1rem}
.mailplate{display:inline-block;background:linear-gradient(#ecd49c,#c9a55f);color:var(--ink);padding:.45rem 1.1rem;text-decoration:none;font:400 1.35rem var(--display);border-radius:2px;box-shadow:0 2px 0 #5d431f;overflow-wrap:anywhere}
.mailplate:hover{color:var(--ox)}
.emptycaddy{text-align:center;padding:4rem 0}
.emptycaddy h1{font-size:clamp(2.3rem,6vw,4rem);margin:0 0 .6rem}

/* the counter top */
.countertop{background:linear-gradient(var(--plank-hi),var(--plank) 14%,#3b2211);padding:1.15rem 1.25rem 1.3rem;font-size:.95rem;color:#f0dfc0;text-align:center;line-height:1.5}
.countertop a{color:#fbe6b5}
.countertop nav{display:flex;flex-wrap:wrap;gap:.2rem 1.15rem;justify-content:center;margin-bottom:.35rem}
.countertop p{margin:0}

@media (max-width:980px){
  .leaf-grid{grid-template-columns:minmax(0,1fr)}
  .leaf-side{position:static}
  .prose{max-width:none}
  .shelf-a,.shelf-b{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shelf-a .caddy:last-child{grid-column:1/-1;justify-self:center;width:62%}
  .shelf-b .caddy:first-child{grid-column:1/-1;justify-self:center;width:62%}
  .counter{grid-template-columns:minmax(0,1fr)}
  .dials{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  body{font-size:1.08rem}
  .page{padding:0 1rem}
  .fascia-in{padding:.75rem 1rem;align-items:stretch}
  .fascia-board{gap:.6rem;padding:.4rem .7rem;justify-content:center}
  .fascia-board svg{width:38px;height:38px}
  .fascia-tag{font-size:.56rem;letter-spacing:.11em}
  .drawer-btn{display:block;text-align:center;margin-top:.65rem;padding:.3rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--gilt-dim);color:var(--gilt);cursor:pointer}
  .drawer-btn::after{content:" \25BE"}
  .drawer-toggle:focus-visible+.drawer-btn{outline:2px solid var(--gilt)}
  .drawers{display:none;flex-direction:column;margin-top:.55rem}
  .drawers a{text-align:center;padding:.45rem}
  .drawer-toggle:checked~.drawers{display:flex}
  .window{grid-template-columns:minmax(0,1fr)}
  .window-pane{order:2;max-width:320px;margin:auto}
  .shelf{padding:1.2rem .1rem 0}
  .shelf-a,.shelf-b{grid-template-columns:minmax(0,1fr)}
  .shelf-a .caddy:last-child,.shelf-b .caddy:first-child{width:auto;grid-column:auto}
  .caddy{margin-top:.5rem}
  .tall{padding-bottom:.8rem}
  .dials{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stock li{grid-template-columns:4.6rem minmax(0,1fr)}
  .stock time{grid-column:1/-1}
  .inset-side{float:none;width:70%;margin:1rem auto}
  .bars li{grid-template-columns:minmax(0,1fr);gap:.1rem;margin-bottom:.7rem}
  .daybook td:last-child,.daybook th:last-child{display:none}
  .ledger{font-size:.93rem}
}
@media (prefers-reduced-motion:no-preference){.drawers a,.label h3 a{transition:background .15s,color .15s}}
@media print{.fascia,.countertop,.leaf-side{display:none}body{background:#fff;color:#000}}