:root{
  --rice:#FFFDF6; --shoyu:#2A1B0E; --ti:#1E6B4E; --poi:#6C4A8C;
  --guava:#E85D75; --yolk:#F2B31B; --paper:#FFF9EC; --line:#2A1B0E;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --body:'Karla',system-ui,sans-serif;
  --disp:'Shrikhand',cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{margin:0;background:var(--rice);color:var(--shoyu);font-family:var(--body);font-size:17px;line-height:1.6}
a{color:var(--ti)}
a:hover{color:var(--guava)}
:focus-visible{outline:3px solid var(--poi);outline-offset:2px;border-radius:2px}
img,svg{max-width:100%;height:auto;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* header */
.top{border-bottom:3px solid var(--line);background:var(--rice);position:sticky;top:0;z-index:50}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{font-family:var(--disp);font-size:1.5rem;color:var(--shoyu);text-decoration:none;letter-spacing:.5px}
.brand em{font-style:normal;color:var(--ti)}
nav.main{display:flex;gap:6px;flex-wrap:wrap}
nav.main a{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;color:var(--shoyu);padding:6px 10px;border:2px solid transparent;border-radius:999px}
nav.main a:hover{border-color:var(--shoyu);color:var(--shoyu)}

/* hero */
.hero{background:var(--ti);color:#FFFDF6;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding-top:56px;padding-bottom:72px}
.hero h1{font-family:var(--disp);font-weight:400;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.08;margin:0 0 16px}
.hero h1 .pink{color:#FFC7D3}
.hero p{font-size:1.1rem;max-width:44ch;margin:0 0 24px;color:#EAF4EE}
.hero .cta{display:inline-block;background:var(--yolk);color:var(--shoyu);font-family:var(--mono);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;padding:13px 22px;border:2px solid var(--shoyu);border-radius:999px;box-shadow:4px 4px 0 var(--shoyu)}
.hero .cta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--shoyu)}
.hero-art{filter:drop-shadow(0 10px 0 rgba(0,0,0,.18))}

/* scalloped paper-plate divider */
.scallop{height:26px;background:radial-gradient(circle at 13px -6px, var(--ti) 18px, transparent 19px);background-size:26px 26px;background-repeat:repeat-x;background-color:var(--rice)}

/* section basics */
section.block{padding:56px 0}
.eyebrow{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;color:var(--poi);margin:0 0 6px}
h2.sect{font-family:var(--disp);font-weight:400;font-size:clamp(1.7rem,4vw,2.4rem);margin:0 0 24px;line-height:1.15}

/* category chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 28px;padding:0;list-style:none}
.chips a{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--shoyu);background:var(--paper);border:2px solid var(--shoyu);border-radius:4px;padding:7px 12px 7px 26px;position:relative}
.chips a::before{content:"";position:absolute;left:10px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--dot,var(--ti))}
.chips a:hover{background:var(--yolk)}

/* okazuya ticket cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.ticket{background:#fff;border:2px solid var(--shoyu);border-radius:10px;overflow:hidden;text-decoration:none;color:var(--shoyu);display:flex;flex-direction:column;transition:transform .12s ease,box-shadow .12s ease;box-shadow:5px 5px 0 rgba(42,27,14,.12)}
.ticket:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(42,27,14,.18);color:var(--shoyu)}
.ticket .art{background:var(--paper);border-bottom:2px dashed var(--shoyu);padding:14px}
.ticket .art.photo{padding:0;aspect-ratio:4/3;overflow:hidden}
.ticket .art.photo img{width:100%;height:100%;object-fit:cover;display:block}
.rhero .rart.photo{border-radius:14px;overflow:hidden;border:3px solid var(--shoyu);box-shadow:6px 6px 0 rgba(42,27,14,.15);aspect-ratio:4/3}
.rhero .rart.photo img{width:100%;height:100%;object-fit:cover;display:block}
.ticket h3{font-family:var(--disp);font-weight:400;font-size:1.18rem;margin:14px 16px 6px;line-height:1.2}
.ticket p{margin:0 16px 14px;font-size:.92rem;color:#5A4634}
.ticket .meta{margin-top:auto;border-top:2px dashed var(--shoyu);font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between;padding:9px 16px;background:var(--paper)}
.ticket .cat{display:inline-flex;align-items:center;gap:6px}
.ticket .cat i{width:8px;height:8px;border-radius:50%;background:var(--dot,var(--ti));display:inline-block}

/* recipe page */
.rhero{background:var(--paper);border-bottom:3px solid var(--line)}
.rhero .wrap{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:center;padding-top:44px;padding-bottom:44px}
.rhero h1{font-family:var(--disp);font-weight:400;font-size:clamp(2rem,5vw,3.1rem);margin:6px 0 10px;line-height:1.1}
.rhero .tag{font-size:1.12rem;color:#5A4634;margin:0}
.badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--shoyu);border-radius:4px;background:#fff;padding:5px 10px}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--dot,var(--ti))}
.statbar{display:flex;flex-wrap:wrap;gap:0;border:2px solid var(--shoyu);border-radius:10px;overflow:hidden;margin:26px 0;background:#fff}
.statbar div{flex:1;min-width:120px;padding:12px 16px;border-right:2px dashed var(--shoyu)}
.statbar div:last-child{border-right:0}
.statbar b{display:block;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--poi);font-weight:600}
.statbar span{font-size:1.05rem;font-weight:700}
.cols{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:start}
.ing{background:#fff;border:2px solid var(--shoyu);border-radius:10px;padding:20px 22px;position:sticky;top:84px;box-shadow:5px 5px 0 rgba(42,27,14,.12)}
.ing h2{font-family:var(--disp);font-weight:400;font-size:1.25rem;margin:0 0 10px}
.ing h3{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ti);margin:16px 0 6px}
.ing ul{margin:0;padding:0;list-style:none}
.ing li{padding:6px 0 6px 22px;position:relative;border-bottom:1px dashed #D8CBB6;font-size:.95rem}
.ing li::before{content:"";position:absolute;left:2px;top:13px;width:9px;height:9px;border:2px solid var(--shoyu);border-radius:2px;background:var(--yolk)}
.steps{counter-reset:step;list-style:none;margin:0;padding:0}
.steps li{counter-increment:step;position:relative;padding:0 0 26px 58px}
.steps li::before{content:counter(step);position:absolute;left:0;top:-2px;width:38px;height:38px;border:2px solid var(--shoyu);border-radius:50%;background:var(--guava);color:#fff;font-family:var(--disp);font-size:1.05rem;display:flex;align-items:center;justify-content:center}
.steps li::after{content:"";position:absolute;left:19px;top:40px;bottom:6px;width:2px;background:repeating-linear-gradient(var(--shoyu) 0 4px,transparent 4px 9px)}
.steps li:last-child::after{display:none}
.tips{background:var(--ti);color:#FFFDF6;border-radius:10px;padding:22px 24px;margin-top:34px}
.tips h2{font-family:var(--disp);font-weight:400;font-size:1.25rem;margin:0 0 10px;color:var(--yolk)}
.tips ul{margin:0;padding-left:20px}
.tips li{margin-bottom:8px}
.story p{margin:0 0 14px;max-width:70ch}

/* glossary */
.gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.gloss div{background:#fff;border:2px solid var(--shoyu);border-radius:10px;padding:16px 18px}
.gloss dt{font-family:var(--disp);font-weight:400;font-size:1.05rem;color:var(--ti);margin:0 0 4px}
.gloss dd{margin:0;font-size:.94rem}

/* ad slots */
.ad-slot{margin:36px auto;max-width:728px;min-height:90px;border:2px dashed #B7A88F;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:#9A8A70;background:repeating-linear-gradient(45deg,#FBF6EA 0 12px,#FFFDF6 12px 24px)}

/* footer */
footer{background:var(--shoyu);color:#EFE6D8;margin-top:56px}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;padding-top:34px;padding-bottom:34px}
footer a{color:var(--yolk);text-decoration:none}
footer a:hover{color:#FFC7D3}
footer .fbrand{font-family:var(--disp);font-size:1.2rem}
footer nav{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
footer small{display:block;width:100%;color:#B7A88F;font-family:var(--mono);font-size:.7rem}

.prose{max-width:70ch}
.prose h2{font-family:var(--disp);font-weight:400;font-size:1.5rem;margin:32px 0 10px}
.backlink{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;text-decoration:none}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;padding-top:40px;padding-bottom:52px}
  .hero-art{max-width:340px;margin:0 auto}
  .rhero .wrap{grid-template-columns:1fr}
  .rhero .rart{max-width:280px}
  .cols{grid-template-columns:1fr}
  .ing{position:static}
}