/* Scone Loft: recipe cards pinned up in a sunny attic kitchen */
:root{--plaster:#fbedc4;--plaster2:#f6dd97;--butter:#f7d774;--card:#fffdf4;--ink:#35261a;--soft:#6d5541;--jam:#9c2036;--jamdk:#751628;--wood:#a8702f;--wooddk:#7a4e1f;--rule:#e7dcc0;--blueline:#b9cfdb;--crumb:#efc875;--display:"Young Serif",Georgia,serif;--text:"Newsreader",Georgia,"Times New Roman",serif;--typed:"Courier New",Courier,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--plaster);background-image:linear-gradient(112deg,rgba(255,250,225,.75) 0 12%,transparent 12% 19%,rgba(255,250,225,.55) 19% 34%,transparent 34% 41%,rgba(255,250,225,.4) 41% 52%,transparent 52%);background-attachment:fixed;color:var(--ink);font:400 1.14rem/1.62 var(--text)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--jam);text-underline-offset:.16em}
a:hover{color:var(--jamdk);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--jam);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.16;color:var(--ink)}
.jumpto{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:9}
.jumpto:focus{left:.5rem;top:.5rem}
/* beam and hanging sign */
.beam{background:linear-gradient(180deg,#bd8340,var(--wood) 55%,var(--wooddk));border-bottom:4px solid #5d3a15;height:30px}
.signrow{max-width:1160px;margin:0 auto;padding:0 20px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:relative}
.sign{display:inline-flex;align-items:center;gap:.6rem;background:var(--card);padding:.55rem 1rem .6rem .7rem;margin-top:-6px;border:1px solid var(--rule);border-top:0;box-shadow:0 3px 0 rgba(90,60,20,.18);color:var(--ink);text-decoration:none;font:400 1.5rem/1 var(--display)}
.sign svg{width:42px;height:42px;flex:none}
.sign:hover{color:var(--jam)}
.whisper{font:400 .84rem/1.3 var(--typed);color:var(--soft);padding-top:.8rem;text-align:right}
/* divider-tab navigation */
.tabs{max-width:1160px;margin:18px auto 0;padding:0 20px}
.tabs ul{list-style:none;display:flex;gap:4px;margin:0;padding:0;border-bottom:3px solid var(--jam)}
.tabs a{display:block;padding:.45rem .95rem .35rem;background:var(--plaster2);color:var(--ink);border-radius:9px 9px 0 0;font:700 .92rem/1.2 var(--typed);text-decoration:none;border:1px solid #dcbd70;border-bottom:0}
.tabs a:hover{background:var(--butter)}
.tabs a[aria-current]{background:var(--jam);color:#fff8e3;border-color:var(--jam)}
.navflag{position:absolute;opacity:0;pointer-events:none}
.navknob{display:none;font:700 .92rem/1 var(--typed);cursor:pointer;background:var(--jam);color:#fff8e3;padding:.6rem .8rem;border-radius:0 0 8px 8px;margin-top:-6px}
.navflag:focus-visible~.signrow .navknob{outline:3px solid var(--ink)}
/* pinned board (home) */
.board{max-width:1160px;margin:0 auto;padding:30px 20px 12px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:30px 26px;overflow-x:clip;align-items:start}
.pinned{position:relative;background:var(--card);padding:1.5rem 1.4rem 1.3rem;box-shadow:1px 2px 0 rgba(70,45,10,.12),4px 9px 18px rgba(90,60,15,.16)}
.pinned:before{content:"";position:absolute;top:-8px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ef8d8d,var(--jam) 55%,#5a0f1e);box-shadow:1px 3px 3px rgba(40,20,0,.35);z-index:2}
.tilt-l{transform:rotate(-.8deg)}.tilt-r{transform:rotate(.7deg)}
.lined{background-image:linear-gradient(var(--card) 0 3.1rem,transparent 3.1rem),repeating-linear-gradient(transparent 0 1.72rem,var(--blueline) 1.72rem calc(1.72rem + 1px))}
.lined h2,.lined h3{border-bottom:2px solid #d6707f;padding-bottom:.4rem}
.w5{grid-column:span 5}.w7{grid-column:span 7}.w4{grid-column:span 4}.w8{grid-column:span 8}.w6{grid-column:span 6}.w3{grid-column:span 3}
.note{background:var(--card)}
.hello h1{font-size:clamp(2rem,3.5vw,2.9rem);margin:.2rem 0 .8rem}
.hello p{margin:.5rem 0}
.typed{font:400 .86rem/1.45 var(--typed);color:var(--soft);letter-spacing:.01em}
.snap{padding:.7rem .7rem 0}
.snap img{width:100%}
.snap figcaption{padding:.5rem .2rem .7rem}
figure{margin:0}
figcaption,.credit{font:400 .8rem/1.4 var(--typed);color:var(--soft)}
.credit{display:block;margin-top:.15rem}
.credit a{color:var(--soft)}
.entry h3{font-size:1.32rem;margin:.1rem 0 .55rem}
.entry h3 a{color:var(--ink);text-decoration:none}
.entry h3 a:hover{color:var(--jam);text-decoration:underline}
.entry p{margin:.45rem 0 0;font-size:1.02rem}
.entry img{margin:-.4rem 0 .8rem;width:100%}
.stamp{display:inline-block;font:700 .74rem/1 var(--typed);text-transform:uppercase;letter-spacing:.09em;color:var(--jam);border:1.5px solid var(--jam);padding:.26rem .4rem;transform:rotate(-1.5deg);margin-bottom:.55rem}
.jamcard{background:var(--jam);color:#fff4dc}
.jamcard h3,.jamcard h3 a{color:#fff8e3}
.jamcard a{color:#ffe7a8}
.jamcard .stamp{color:#ffe7a8;border-color:#ffe7a8}
.jamcard .typed{color:#f6d6b8}
.jamcard:before{background:radial-gradient(circle at 34% 30%,#fff4c2,#e5b43c 55%,#83600e)}
.buttercard{background:var(--butter)}
.buttercard:before{background:radial-gradient(circle at 34% 30%,#a8d4e8,#2f6f8f 55%,#163f53)}
.oven table{width:100%;border-collapse:collapse;font:400 .88rem/1.3 var(--typed)}
.oven th,.oven td{text-align:left;padding:.3rem .25rem;border-bottom:1px dashed var(--wooddk)}
.oven h2{font-size:1.25rem;margin:0 0 .5rem}
.leaders{list-style:none;margin:0;padding:0;font:400 .96rem/1.4 var(--typed)}
.leaders li{display:flex;align-items:baseline;gap:.4rem;padding:.3rem 0}
.leaders a{order:1}
.leaders i{order:2;flex:1;border-bottom:2px dotted var(--soft);min-width:1rem;transform:translateY(-.25rem)}
.leaders span{order:3;white-space:nowrap;color:var(--soft)}
.tall h2{font-size:1.5rem;margin:0 0 .7rem}
/* card box (blog index) */
.boxtop{max-width:1000px;margin:0 auto;padding:34px 20px 8px}
.boxtop h1{font-size:clamp(2.1rem,4vw,3rem);margin:0 0 .5rem}
.boxtop p{max-width:42rem;margin:.3rem 0}
.quickfile{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0;padding:0;list-style:none}
.quickfile a{font:700 .86rem/1 var(--typed);padding:.5rem .65rem;background:var(--plaster2);border:1px solid #dcbd70;text-decoration:none;color:var(--ink)}
.cardbox{max-width:1000px;margin:18px auto 28px;padding:0 20px}
.shelfname{font-size:1.5rem;margin:1.6rem 0 0;padding:.3rem .9rem .25rem;display:inline-block;background:var(--wooddk);color:#fff4d6;border-radius:8px 8px 0 0}
.filed{list-style:none;margin:0;padding:0;border-top:3px solid var(--wooddk)}
.filed li{display:grid;grid-template-columns:180px 1fr;gap:1.1rem;background:var(--card);padding:1rem;border-bottom:1px solid var(--rule);border-left:6px solid var(--crumb)}
.filed img{width:100%}
.filed h3{margin:0 0 .3rem;font-size:1.4rem}
.filed h3 a{color:var(--ink);text-decoration:none}
.filed h3 a:hover{color:var(--jam);text-decoration:underline}
.filed p{margin:.2rem 0}
/* article sheet */
.spread{max-width:1160px;margin:0 auto;padding:30px 20px 10px;display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto 1fr;gap:0 32px;align-items:start}
.cardtop{grid-column:1;position:relative;background:var(--card);padding:2rem 2.4rem .4rem 3.4rem;min-width:0;box-shadow:2px 0 14px rgba(90,60,15,.1)}
.cardtop:before{content:"";position:absolute;top:0;bottom:0;left:2.3rem;width:2px;background:#e6a1ac}
.cardtop h1{font-size:clamp(1.95rem,3.6vw,2.75rem);margin:.1rem 0 .55rem}
.spread>.sheet{grid-column:1;padding-top:.6rem}
.sheet{position:relative;background:var(--card);padding:2rem 2.4rem 2.2rem 3.4rem;box-shadow:2px 6px 20px rgba(90,60,15,.16);min-width:0}
.sheet:before{content:"";position:absolute;top:0;bottom:0;left:2.3rem;width:2px;background:#e6a1ac}
.crumbs{font:400 .82rem/1.4 var(--typed);color:var(--soft);margin:0 0 .9rem}
.crumbs a{color:var(--soft)}
.sheet h1{font-size:clamp(1.95rem,3.6vw,2.75rem);margin:.1rem 0 .55rem}
.byline{font:400 .84rem/1.4 var(--typed);color:var(--soft);margin:0 0 1.1rem}
.taped{position:relative;margin:0 0 1.5rem}
.taped:before{content:"";position:absolute;top:-11px;left:50%;width:110px;height:24px;margin-left:-55px;background:rgba(246,221,151,.82);transform:rotate(-1.6deg);z-index:1}
.taped img{width:100%}
.taped figcaption{padding-top:.45rem}
.sheet h2{font-size:1.6rem;margin:2rem 0 .55rem}
.sheet h3{font-size:1.2rem;margin:1.4rem 0 .3rem}
.sheet p{margin:.75rem 0}
.sheet li{margin:.35rem 0}
.lede{font-size:1.24rem;line-height:1.5}
.yes{background:var(--butter);padding:1rem 1.2rem;margin:1.2rem 0;border-left:5px solid var(--jam)}
.yes strong{font:700 .84rem/1 var(--typed);display:block;margin-bottom:.4rem;letter-spacing:.06em;text-transform:uppercase;color:var(--jamdk)}
.filehead{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 1.5rem;border:1.5px solid var(--ink);font:400 .85rem/1.3 var(--typed)}
.filehead div{padding:.5rem .6rem;border-left:1.5px solid var(--ink)}
.filehead div:first-child{border-left:0}
.filehead b{display:block;color:var(--jam);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.method{list-style:none;counter-reset:st;margin:.6rem 0;padding:0}
.method li{counter-increment:st;position:relative;padding:.75rem 0 .75rem 3rem;margin:0;border-bottom:1px dashed #cdbd99}
.method li:before{content:counter(st);position:absolute;left:0;top:.72rem;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--jam);color:#fff8e3;font:400 1.1rem/2.1rem var(--display);text-align:center}
.side{grid-column:2;grid-row:1/3;display:grid;gap:26px;position:sticky;top:16px;min-width:0}
.side h2{font-size:1.3rem;margin:0 0 .5rem}
.ingr ul{list-style:none;margin:0;padding:0}
.ingr li{padding:.42rem 0;border-bottom:1px solid var(--blueline);font-size:1.02rem;line-height:1.35}
.ingr h2{border-bottom:2px solid #d6707f;padding-bottom:.4rem}
.ingr p{margin:.7rem 0 0}
.xrefs ul{list-style:none;margin:0;padding:0}
.xrefs li{padding:.34rem 0;font-size:1rem;line-height:1.3}
.drawn{margin:1.2rem 0;padding:.8rem;background:#fff8df;border:1px solid var(--rule)}
.drawn figcaption{margin-top:.4rem}
.inset{margin:1.4rem 0}
.inset img{width:100%}
.inset.narrow{max-width:300px}
.inset figcaption{padding-top:.4rem}
.faults dt{font-family:var(--display);font-size:1.1rem;margin-top:1rem}
.faults dd{margin:.2rem 0 0}
.tablewrap{overflow-x:auto;margin:1rem 0}
table{border-collapse:collapse}
.tablewrap table{width:100%;font-size:1rem}
.tablewrap caption{text-align:left;font:400 .84rem/1.3 var(--typed);color:var(--soft);padding-bottom:.4rem}
.tablewrap th,.tablewrap td{border:1px solid #d9caa4;padding:.45rem .6rem;text-align:left}
.tablewrap thead{background:var(--plaster2)}
.refs{margin-top:2.2rem;padding-top:1rem;border-top:2px solid var(--ink)}
.refs h2{font-size:1.15rem;margin:0 0 .4rem}
.refs ul{margin:0;padding-left:1.1rem;font-size:1rem}
.refs .typed{margin:.5rem 0 0}
/* plain pages */
.leaf{max-width:800px;margin:32px auto 18px;padding:0 20px}
.leaf .sheet h1{margin-bottom:.8rem}
.mailcard{display:inline-block;margin:.5rem 0;padding:.7rem 1rem;background:var(--butter);font:700 1rem/1.2 var(--typed)}
/* shelf footer */
.shelf{margin-top:34px;padding-top:0;color:var(--ink)}
.jars{display:block;width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
.plank{height:16px;background:linear-gradient(180deg,#bd8340,var(--wooddk));border-bottom:3px solid #5d3a15}
.shelfnote{max-width:1160px;margin:0 auto;padding:1rem 20px 1.6rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.4rem;font:400 .86rem/1.5 var(--typed)}
.shelfnote nav{display:flex;flex-wrap:wrap;gap:.1rem .9rem}
@media (max-width:980px){.spread{display:flex;flex-direction:column;align-items:stretch;gap:0}.cardtop{order:-3}.side{display:contents}.side>*{order:-2;margin:22px 0 20px}.side>.xrefs{order:1;margin:26px 0 0}.spread>.sheet{order:0;padding-top:1.6rem}.w5,.w7,.w4,.w8,.w3{grid-column:span 6}.hello,.pic{grid-column:span 12}}
@media (max-width:680px){
body{font-size:1.08rem;background-attachment:scroll}
.whisper{display:none}
.navknob{display:block}
.tabs{display:none;margin-top:12px}
.navflag:checked~.tabs{display:block}
.tabs ul{flex-direction:column;border-bottom:0}
.tabs a{border-radius:0;border-bottom:1px solid #dcbd70}
.sign{font-size:1.28rem}
.sign svg{width:36px;height:36px}
.board{grid-template-columns:minmax(0,1fr);gap:26px;padding:24px 16px 8px}
.w5,.w7,.w4,.w8,.w6,.w3,.hello,.pic{grid-column:auto}
.tilt-l,.tilt-r{transform:none}
.spread{padding:20px 16px 6px}
.sheet,.spread>.sheet{padding:1.5rem 1.1rem 1.6rem 1.5rem}
.cardtop{padding:1.5rem 1.1rem .8rem 1.5rem}
.sheet:before,.cardtop:before{left:.75rem}
.filehead{grid-template-columns:repeat(2,minmax(0,1fr))}
.filehead div:nth-child(3){border-left:0}
.filehead div:nth-child(n+3){border-top:1.5px solid var(--ink)}
.filed li{grid-template-columns:1fr}
.boxtop,.cardbox,.leaf{padding-left:16px;padding-right:16px}
.signrow{padding:0 16px}
.tabs{padding:0 16px}
.method li{padding-left:2.6rem}
}
@media print{
body{background:#fff;font-size:11.5pt}
.beam,.signrow,.tabs,.shelf,.xrefs,.jumpto,.crumbs,.taped:before{display:none}
.spread{display:block;padding:0;max-width:none}
.cardtop{padding:0;box-shadow:none}.cardtop:before{display:none}
.side{display:block;position:static;margin-bottom:1rem}
.sheet,.pinned{box-shadow:none;padding:0}
.sheet:before,.pinned:before{display:none}
.taped img,.inset img{max-height:7cm;width:auto}
a{color:inherit;text-decoration:none}
.method li{break-inside:avoid}
}