:root {
  --paper: #FBF4E6; /* Page background, uncoated stock */
  --ink: #1B1B3A; /* Body text */
  --pink: #FF48B0; /* Riso fluorescent pink, overprint layer (decorative) */
  --blue: #0078BF; /* Riso medium blue, display type and line art (large text only) */
  --yellow: #FFE800; /* Riso yellow, highlight blocks */
  --pink-ink: #B5127A; /* Accessible pink for small text */
  --blue-ink: #005A91; /* Accessible blue for small text, order section */
  --tint-pink: #FFE3F1; /* Card tint */
  --tint-blue: #DDEFFA; /* Card tint */
  --tint-yellow: #FFF7B0; /* Card tint */
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', Arial, sans-serif; /* Display and UI (wdth + wght axes; opsz pinned at 96 in the font request) */
  --font-serif: 'Instrument Serif', Georgia, serif; /* Italic accents and long-form */
  --gutter: 18px; /* Side gutter */
  --max: 1440px; /* Content max width */
  --mis-x: .045em; /* Misregistration offset for type */
  --mis-y: -.03em;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;width:100%;max-width:100%}
body{margin:0;width:100%;max-width:100%;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.5 var(--font-display);overflow-x:clip;overflow-wrap:break-word}
.hero-grid,.bake-grid,.section-head{grid-template-columns:minmax(0,1fr)}
.hero-grid>*,.bake-grid>*,.section-head>*{min-width:0}
body::after{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;background:url(grain.svg) 0 0/220px 220px;opacity:.32;mix-blend-mode:multiply}
h1,h2,h3,p,dl,dd,ul,ol,figure,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:2px}
a:hover{text-decoration-color:var(--pink)}
button,input,select{font:inherit;color:inherit}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue-ink);outline-offset:4px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:16px;top:0;z-index:70;background:var(--ink);color:var(--paper);padding:12px 16px;transform:translateY(-120%)}
.skip:focus{transform:none}
.label{font:650 .72rem/1.3 var(--font-display);font-stretch:85%;letter-spacing:.12em;text-transform:uppercase}

/* Overprinted type: real text is the blue layer, a duplicate pink layer sits on top, multiplied */
.riso{position:relative;display:block}
.riso-a{display:block;color:var(--blue)}
.riso-b{position:absolute;inset:0;display:block;color:var(--pink);mix-blend-mode:multiply;transform:translate(var(--mis-x),var(--mis-y));pointer-events:none;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}

/* Overprinted art: yellow, pink and blue plates, each slightly off */
.riso-art{display:block;width:100%;height:auto;overflow:visible}
.riso-art .ly{fill:var(--yellow);mix-blend-mode:multiply}
.riso-art .lp{fill:var(--pink);mix-blend-mode:multiply;transform:translate(6px,-4px);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.riso-art .lb{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;mix-blend-mode:multiply;transform:translate(-4px,3px);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.riso-art .ht{fill:url(#ht-blue);stroke:none}
.dot-blue{fill:var(--blue)}.dot-pink{fill:var(--pink)}
.seeds{stroke-width:5}.sugar{stroke-width:7}.dimples{stroke-width:10}.wheat{stroke-width:5}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:2px solid var(--ink);font:700 1rem/1 var(--font-display);font-stretch:90%;text-decoration:none;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.btn-pink{background:var(--pink);color:var(--ink);box-shadow:5px 5px 0 var(--blue)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--yellow)}
.btn-blue{background:var(--blue-ink);color:var(--paper);box-shadow:5px 5px 0 var(--pink)}
.btn-pink:hover,.btn-blue:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--blue)}
.btn-blue:hover{box-shadow:7px 7px 0 var(--pink)}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--max);margin:0 auto;padding:16px var(--gutter);border-bottom:2px solid var(--ink)}
.brand{font:800 2.1rem/.9 var(--font-display);font-stretch:75%;letter-spacing:-.03em;text-decoration:none}
.brand:hover .riso-b,.brand:focus-visible .riso-b{transform:none}
.site-header nav{display:flex;gap:8px;font:600 .82rem/1 var(--font-display)}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;text-decoration:none}
.site-header nav a:hover{text-decoration:underline;text-decoration-color:var(--pink)}
.site-header nav a:nth-child(2){display:none}

/* Hero */
.hero{max-width:var(--max);margin:0 auto;padding:18px var(--gutter) 56px;overflow:clip}
.hero-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;font:650 .72rem/1.3 var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.hero-top span:last-child{display:none}
.hero-title{margin-top:26px;font-weight:800;font-stretch:75%;font-size:clamp(4rem,19.5vw,15.5rem);line-height:.84;letter-spacing:-.02em;font-variation-settings:"opsz" 96}
.hero-title em{font-family:var(--font-serif);font-weight:400;font-style:italic;letter-spacing:-.02em;font-size:1.04em;line-height:.8}
.hero-grid{display:grid;gap:28px;margin-top:28px}
.hero-lede{font-family:var(--font-serif);font-size:1.45rem;line-height:1.2;max-width:28rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}
.hero-art{position:relative;max-width:620px;width:100%;justify-self:center}
.hero .riso-art .lp{transform:translate(var(--px,9px),var(--py,-7px))}
.hero .riso-art .lb{transform:translate(calc(var(--px,9px) * -.6),calc(var(--py,-7px) * -.6))}
.sticker{position:absolute;right:2%;top:0;width:104px;height:104px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);display:grid;place-content:center;text-align:center;transform:rotate(12deg);font:600 .74rem/1.15 var(--font-display);text-transform:uppercase;letter-spacing:.06em}
.sticker strong{display:block;font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.35rem;text-transform:none;letter-spacing:0}

/* Oven times */
.ovens{background:var(--yellow);padding:44px var(--gutter) 52px;border-block:2px solid var(--ink)}
.ovens-title{max-width:var(--max);margin:0 auto 22px;font:650 .8rem/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase}
.oven-list{max-width:var(--max);margin:0 auto;display:grid;gap:26px}
.oven-list li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:end;border-top:2px solid var(--ink);padding-top:14px}
.time{font-weight:800;font-stretch:75%;font-size:clamp(4rem,18vw,9.5rem);line-height:.82;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.oven-list p{font-family:var(--font-serif);font-size:1.15rem;line-height:1.2;padding-bottom:6px}

/* Section heads */
.section-head{display:grid;gap:16px;margin-bottom:34px}
h2{font-weight:800;font-stretch:78%;font-size:clamp(2.7rem,10vw,6.8rem);line-height:.88;letter-spacing:-.03em;color:var(--blue-ink);font-variation-settings:"opsz" 96}
h2 em{font-family:var(--font-serif);font-weight:400;font-style:italic;color:var(--pink-ink);letter-spacing:-.01em}
.head-note{font-family:var(--font-serif);font-size:1.2rem;line-height:1.25;max-width:24rem}
.label{color:var(--pink-ink)}
/* Section stickers: hand-lettered italic on a yellow riso dot, pink plate printed slightly off */
.tag{justify-self:start;display:inline-block;position:relative;padding:7px 18px 9px;border-radius:999px;background:var(--yellow);color:var(--ink);font:400 italic 1.35rem/1 var(--font-serif);letter-spacing:.005em;box-shadow:4px 3px 0 var(--pink);transform:rotate(-3deg)}
.tag::before{content:'';display:inline-block;width:.42em;height:.42em;margin:0 .4em .08em 0;border-radius:50%;background:var(--pink-ink);vertical-align:middle}
.week .tag{transform:rotate(2deg)}
.starter .tag{transform:rotate(-1.5deg)}
.stockists .tag{transform:rotate(2.5deg)}

/* Bakes */
.bakes{max-width:var(--max);margin:0 auto;padding:72px var(--gutter) 80px}
.bake-grid{display:grid;gap:18px}
.bake{position:relative;display:grid;grid-template-rows:auto 1fr auto;border:2px solid var(--ink);background:var(--tint-pink);padding:18px 18px 16px;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.bake:nth-child(3n+2){background:var(--tint-blue)}
.bake:nth-child(3n){background:var(--tint-yellow)}
.bake-art{max-width:300px;margin:4px auto 14px}
.bake h3{font-weight:750;font-stretch:80%;font-size:1.75rem;line-height:1;letter-spacing:-.02em}
.bake-body p{font-family:var(--font-serif);font-size:1.18rem;line-height:1.2;margin-top:8px}
.bake-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;padding-top:12px;border-top:2px dotted var(--ink)}
.price{font-weight:800;font-size:1.5rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bake-foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font-weight:650;font-size:.9375rem}
.bake:hover,.bake:focus-within,.bake.is-registered{transform:rotate(-.6deg)}
.bake:hover .lp,.bake:hover .lb,.bake:focus-within .lp,.bake:focus-within .lb,.bake.is-registered .lp,.bake.is-registered .lb{transform:none}

/* Week */
.week{max-width:var(--max);margin:0 auto;padding:72px 0 80px;border-top:2px solid var(--ink)}
.week .section-head,.week-closed{padding-inline:var(--gutter)}
.week-scroll{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:8px var(--gutter) 18px;scrollbar-width:thin}
.week-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(74%,290px);gap:14px}
.day{scroll-snap-align:start;border:2px solid var(--ink);background:var(--paper);padding:16px 16px 10px}
.day.is-today{background:var(--yellow);box-shadow:6px 6px 0 var(--pink)}
.day h3{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:6px}
.day h3 span{font-weight:800;font-stretch:75%;font-size:2.6rem;line-height:.9;color:var(--blue-ink);letter-spacing:-.03em}
.day h3 small{font:600 .72rem/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.day ul li{position:relative;padding:11px 0;border-bottom:1px dashed var(--ink);font-family:var(--font-serif);font-size:1.2rem;line-height:1.15}
.day ul li:last-child{border-bottom:0}
.day li.sold{padding-right:72px}
.hero-title .riso-b,.time .riso-b{transform:translate(3px,-2px)}
.sold{color:#5a5a70}
.stamp{position:absolute;right:-4px;top:50%;transform:translateY(-50%) rotate(-9deg);border:2px solid var(--pink-ink);color:var(--pink-ink);font:800 .72rem/1 var(--font-display);font-stretch:75%;letter-spacing:.12em;text-transform:uppercase;padding:5px 7px 4px;mix-blend-mode:multiply;background:rgba(255,72,176,.12)}
.week-closed{margin-top:10px;font-family:var(--font-serif);font-style:italic;font-size:1.2rem}

/* Starter */
.starter{position:relative;max-width:var(--max);margin:0 auto;padding:72px var(--gutter) 84px;display:grid;gap:30px;border-top:2px solid var(--ink);overflow:clip}
.starter::before{content:'';position:absolute;right:-10%;top:-6%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--pink) 34%,transparent 36%) 0 0/14px 14px;opacity:.28;mask-image:radial-gradient(circle,#000 0,transparent 70%);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 70%);pointer-events:none}
.jar{position:relative;max-width:360px;width:80%;justify-self:center}
.jar-label{font:800 20px var(--font-display);letter-spacing:4px;fill:var(--ink)}
.starter-copy{position:relative}
.starter-quote{margin-top:18px;font-family:var(--font-serif);font-weight:400;font-stretch:normal;font-size:clamp(2.4rem,8.4vw,5.6rem);line-height:.98;letter-spacing:-.015em;color:var(--ink)}
.starter-quote em{color:var(--pink-ink)}
.starter-by{margin-top:16px;font:650 .8rem/1.3 var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-ink)}
.starter-cols{display:grid;gap:16px;margin-top:30px;max-width:44rem}
.starter-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px;border-top:2px solid var(--ink);padding-top:16px}
.starter-stats div{display:flex;flex-direction:column-reverse;gap:6px}
.starter-stats dt{font-size:.9375rem;line-height:1.25}
.starter-stats dd{font-weight:800;font-stretch:75%;font-size:clamp(2.2rem,9vw,4.8rem);line-height:.85;letter-spacing:-.03em;color:var(--blue-ink);font-variant-numeric:tabular-nums}

/* Order */
.order{background:var(--blue-ink);color:var(--paper);padding:72px var(--gutter) 84px;display:grid;gap:40px;overflow:clip}
.order-intro{max-width:34rem}
.order .label{color:var(--yellow)}
.order :focus-visible{outline-color:var(--yellow)}
.ticket :focus-visible{outline-color:var(--blue-ink)}
.order h2{margin:16px 0 20px;color:var(--paper)}
.order h2 em{color:var(--yellow)}
.order-intro>p:last-child{font-family:var(--font-serif);font-size:1.3rem;line-height:1.25}
.ticket{position:relative;background:var(--paper);color:var(--ink);padding:26px 20px 24px;display:grid;gap:22px;box-shadow:8px 8px 0 var(--pink);max-width:720px;width:100%;justify-self:center}
.ticket::before,.ticket::after{content:'';position:absolute;top:calc(50% - 14px);width:28px;height:28px;border-radius:50%;background:var(--blue-ink)}
.ticket::before{left:-14px}.ticket::after{right:-14px}
.boxes legend{font:650 .78rem/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;color:var(--pink-ink)}
.boxes{display:grid;gap:10px}
.box-opt{position:relative;display:block;cursor:pointer}
.box-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.box-card{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;border:2px solid var(--ink);padding:14px 14px;transition:background .2s ease,box-shadow .2s ease}
.box-card strong{font-weight:800;font-stretch:80%;font-size:1.5rem;line-height:1}
.box-card span:not(.price){font-family:var(--font-serif);font-size:1.08rem}
.box-card .price{font-size:1.4rem}
.box-opt input:checked+.box-card{background:var(--yellow);box-shadow:4px 4px 0 var(--pink)}
.box-opt input:focus-visible+.box-card{outline:3px solid var(--blue-ink);outline-offset:3px}
.box-opt:hover .box-card{background:var(--tint-yellow)}
.box-opt input:checked:hover+.box-card{background:var(--yellow)}
.ticket-fields{display:grid;gap:16px;border-top:2px dashed var(--ink);padding-top:20px}
.field{display:grid;gap:6px}
.field label{font:650 .74rem/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.field input,.field select{width:100%;min-height:48px;border:2px solid var(--ink);background:#fff;padding:10px 12px;font-size:1rem;border-radius:0}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--blue-ink);outline-offset:2px}
.ticket .btn{justify-self:start}
.order-msg{min-height:1.2em;font-weight:650}

/* Stockists */
.stockists{max-width:var(--max);margin:0 auto;padding:72px var(--gutter) 70px}
.stock-list li{display:grid;gap:4px;padding:16px 0;border-top:2px solid var(--ink)}
.stock-list li:last-child{border-bottom:2px solid var(--ink)}
.stock-name{font-weight:750;font-stretch:75%;font-size:clamp(1.9rem,7.6vw,5rem);line-height:.95;letter-spacing:-.025em}
.stock-where{font-family:var(--font-serif);font-style:italic;font-size:1.15rem;color:var(--blue-ink)}
.stock-list li:last-child .stock-name{background:linear-gradient(transparent 55%,var(--yellow) 55% 92%,transparent 92%);justify-self:start}

/* Visit */
.visit{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 72px;display:grid;gap:14px}
.visit-card{border:2px solid var(--ink);padding:22px 20px;display:grid;gap:12px;align-content:start}
.visit-addr{background:var(--tint-pink)}
.visit-hours{background:var(--yellow)}
.visit-contact{background:var(--tint-blue)}
.visit address{font-style:normal;font-weight:800;font-stretch:78%;font-size:2.3rem;line-height:.95;letter-spacing:-.02em;color:var(--blue-ink)}
.visit-card p:not(.label){font-family:var(--font-serif);font-size:1.2rem;line-height:1.25}
.visit-card a{overflow-wrap:anywhere}
.visit-hours dl div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--ink);font-variant-numeric:tabular-nums}
.visit-hours dd{font-weight:700}

/* Footer */
.site-footer{border-top:2px solid var(--ink);padding:24px var(--gutter) 22px;overflow:clip;max-width:var(--max);margin:0 auto}
.footer-word{font-weight:800;font-stretch:75%;font-size:clamp(7rem,47vw,34rem);line-height:.78;letter-spacing:-.05em;color:transparent;background:radial-gradient(circle,var(--pink) 40%,transparent 43%) 0 0/.05em .05em;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:2px var(--blue);padding:.04em 0 .1em;text-align:center}
.footer-row{display:grid;gap:14px;padding-top:18px;border-top:2px solid var(--ink);font-size:.95rem}
.footer-row nav{display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:650}

@media (max-width:699px){
  .bake{grid-template-columns:40% 1fr;grid-template-rows:auto;column-gap:14px;align-items:center;padding:14px}
  .bake-art{margin:0}
  .bake h3{font-size:1.45rem}
  .bake-body p{font-size:1.05rem}
  .bake-foot{grid-column:1/-1;margin-top:12px}
  .bake-wide{grid-template-columns:1fr}
  .bake-wide .bake-art{max-width:260px;margin:0 auto 10px}
}

/* Tablet */
@media (min-width:700px){
  :root{--gutter:36px}
  .site-header nav{gap:28px;font-size:.92rem}
  .site-header nav a:nth-child(2){display:inline}
  .hero-top span:last-child{display:inline}
  .bake-grid{grid-template-columns:1fr 1fr}
  .oven-list{grid-template-columns:repeat(3,1fr);gap:28px}
  .oven-list li{grid-template-columns:1fr;align-items:start}
  .time{font-size:clamp(4.5rem,11vw,10rem)}
  .section-head{grid-template-columns:1fr auto;align-items:end;column-gap:40px}
  .section-head .tag{grid-column:1/-1}
  .head-note{justify-self:end}
  .starter-cols{grid-template-columns:1fr 1fr;gap:30px}
  .boxes{grid-template-columns:repeat(3,1fr)}
  .box-card{grid-template-columns:1fr;gap:6px;padding:16px;height:100%}
  .ticket{padding:34px 34px 30px}
  .ticket-fields{grid-template-columns:1fr 1fr}
  .field-wide{grid-column:1/-1}
  .stock-list li{grid-template-columns:1fr auto;align-items:baseline;gap:24px}
  .stock-where{text-align:right}
  .visit{grid-template-columns:repeat(3,1fr)}
  .visit-addr{grid-column:1/-1}
  .footer-row{grid-template-columns:1fr auto 1fr;align-items:center}
  .footer-row p:last-child{text-align:right}
}

/* Desktop */
@media (min-width:1100px){
  :root{--gutter:56px}
  .hero{padding-bottom:80px}
  .hero-title{font-size:clamp(9rem,13.6vw,16rem);margin-top:34px}
  .hero-grid{grid-template-columns:1fr 1.3fr;align-items:start;margin-top:-10vw;gap:40px}
  .hero-copy{padding-top:13vw}
  .hero-art{max-width:none;margin-right:-2vw}
  .sticker{width:132px;height:132px;top:8%;font-size:.8rem}
  .sticker strong{font-size:1.6rem}
  .bake-grid{grid-template-columns:repeat(4,1fr)}
  .bake-wide{grid-column:span 2}
  .bake-wide .bake-art{max-width:380px}
  .week-scroll{overflow-x:auto;padding-bottom:0}
  .week-grid{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(190px,1fr));gap:0}
  .day{border-right-width:0}
  .day:last-child{border-right-width:2px}
  .day.is-today{position:relative;z-index:1;transform:translateY(-8px)}
  .starter{grid-template-columns:5fr 7fr;gap:70px;align-items:center;padding-block:110px}
  .jar{width:100%;max-width:440px}
  .order{grid-template-columns:5fr 7fr;align-items:center;gap:70px;padding:110px max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
  .ticket{transform:rotate(-1.2deg)}
  .bakes,.week,.stockists{padding-block:110px}
  .stock-list li{padding:22px 0}
  .visit{grid-template-columns:1.4fr 1fr 1fr}
  .visit-addr{grid-column:auto}
  .visit address{font-size:3.4rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}