/* A photograph, a statement, then a sequence of editorial spreads. */
.masthead nav{gap:22px}
.hero-photograph{width:min(1440px,calc(100% - 80px));margin:28px auto 0}
.hero-photograph>img{width:100%;aspect-ratio:2.05;object-fit:cover;object-position:50% 47%}
.hero-photograph figcaption{font-size:11px;margin-top:10px;color:#596052}
.brand-statement{display:grid;grid-template-columns:1.2fr 1fr;gap:58px;padding-block:64px 52px}
.statement-heading h1{font-size:clamp(28px,3.1vw,43px);line-height:1.8;letter-spacing:.025em}
.statement-heading .section-index{font-size:12px;color:var(--green);margin-bottom:18px}
.statement-copy{font-size:14px;line-height:2.15;padding-top:5px}
.statement-copy p+p{margin-top:22px}
.reading-index{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:23px;padding:14px 0;font-size:12px}
.reading-index>span{font-family:var(--title);font-size:20px;margin-right:auto}
.reading-index a{text-decoration:none}
.reading-index a:hover{text-decoration:underline}
.opening{padding-top:62px}
.box-story,.work-story,.ingredients-story{margin-top:92px}
.chapter-number{font:italic 31px Georgia,serif;color:var(--red);line-height:1.5;margin-bottom:15px}
.chapter-number>span{font:11px var(--body);letter-spacing:.08em;color:var(--ink);margin-left:12px;vertical-align:middle}
.box-intro{display:grid;grid-template-columns:1.08fr 1fr;gap:65px;align-items:center;padding:20px 0 35px}
.box-question h2{font-size:42px;line-height:1.65;letter-spacing:.04em}
.box-answer{font-family:var(--title);font-size:23px;line-height:1.9;margin-top:25px}
.box-answer em{font-style:normal;background:linear-gradient(transparent 68%,#eee3a4 68%)}
.food-art{position:relative;isolation:isolate;align-self:center}
.food-dance{display:block;width:100%;height:auto;overflow:visible;position:relative;z-index:1}
.food-part{transform-box:fill-box;transform-origin:center}
.food-art figcaption{font-family:var(--title);font-size:16px;text-align:center;line-height:1.8;margin-top:20px;transform:rotate(-3deg)}
.food-controls{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:10px;position:relative;z-index:2}
.quiet-motion{border:0;border-bottom:1px solid var(--line);background:none;font:11px var(--body);min-height:44px;padding:8px 0;cursor:pointer}
.quiet-motion:disabled{opacity:.4;cursor:default}
/* The burst scales to 4x: its transparent bounds must still fit the illustration. */
.magic-halo{position:absolute;z-index:0;pointer-events:none;width:min(110px,25%);height:auto;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#e9d57166 0%,#e9d57122 50%,transparent 70%);bottom:20%;left:50%;transform:translate(-50%,0) scale(0);opacity:0}
.box-explanation{display:grid;grid-template-columns:1.35fr 1fr;gap:80px;align-items:start}
.essay-copy{font-size:15px;line-height:2.15}
.essay-copy>p+p{margin-top:18px}
.minute-note{border-left:2px solid #d4bd59;padding-left:24px;margin:30px 0 24px}
.minute-note .small-label{margin-bottom:8px;background:#f1ead1}
.minute-note h3{font-size:27px;line-height:1.75;margin-bottom:10px}
.minute-note p{font-size:13px;line-height:2}
.source-note,.minute-note .source-note{font-size:11px;line-height:1.85;color:#58604f;margin-top:12px}
.box-still{padding-top:40px;transform:rotate(2deg)}
.box-still img{width:100%}
.box-still figcaption{font-family:var(--title);font-size:17px;line-height:1.8;margin:12px 0 0 22px}
.box-still figcaption span{font-family:var(--body);font-size:11px}
.work-heading{padding:15px 0 35px}
.work-heading h2{font-size:38px;line-height:1.8;letter-spacing:.025em}
.work-spread{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(0,1fr);gap:30px 48px;align-items:start}
.work-photograph img{width:100%;aspect-ratio:1.5;object-fit:cover}
.work-photograph figcaption{font-size:12px;line-height:1.9;padding-top:13px}
.work-photograph figcaption span{font-size:11px;color:#65705c}
.work-margin{padding-top:6px}
.work-margin .small-label{font-size:11px;line-height:1.8;padding:2px 7px;transform:rotate(-2deg)}
.work-margin figure{display:flex;align-items:center;gap:12px;margin-bottom:25px}
.work-margin img{width:49%;height:auto}
.work-margin figcaption{font-family:var(--title);font-size:15px;line-height:1.8;transform:rotate(4deg)}
.work-margin h3{font-size:24px;line-height:1.8;margin-bottom:12px}
.work-margin>p:not(.small-label){font-size:13px;line-height:2}
.work-copy{padding-top:4px}
.work-readmore{padding-top:22px;border-top:1px solid var(--ink);margin-top:12px}
.work-readmore>p{font-size:11px;margin-bottom:10px}
.work-readmore a{font-family:var(--title);font-size:23px;line-height:1.8;text-decoration:none}
.work-readmore a span{display:inline-block;margin-left:10px}
.ingredients-spread{display:grid;grid-template-columns:1fr 1.2fr;gap:52px;align-items:center;padding:28px 0 30px}
.broccoli-figure img{width:100%;height:auto}
.broccoli-figure figcaption{font-family:var(--title);font-size:16px;line-height:1.8;transform:rotate(-4deg);text-align:center;margin:15px 0}
.ingredients-copy h2{font-size:31px;line-height:1.8;letter-spacing:.02em;margin-bottom:25px}
.origin-note{display:grid;grid-template-columns:220px minmax(0,1fr);gap:35px;align-items:center;padding:35px 0 48px;margin-top:16px;border-top:1px solid var(--line)}
.origin-note figure img{width:100%}
.origin-note figcaption{font-family:var(--title);font-size:14px;line-height:1.8;margin-top:12px;text-align:center}
.origin-note .small-label{font-size:11px;margin-bottom:10px}
.origin-note h3{font-size:27px;line-height:1.75;margin-bottom:12px}
.origin-note>div>p:not(.small-label){font-size:14px;line-height:2;max-width:490px;margin-bottom:20px}
.origin-side-note{font-family:var(--title);font-size:25px;line-height:2;writing-mode:vertical-rl;letter-spacing:.15em;justify-self:center;transform:rotate(5deg);color:var(--green)}
.site-footer{margin-top:40px}
@media(max-width:1100px){
  .masthead nav{gap:16px;font-size:12px}
  .brand-statement{gap:35px;grid-template-columns:1.2fr 1fr}
  .statement-heading h1{font-size:32px}
  .reading-index{gap:18px;font-size:11px}
  .reading-index>span{font-size:18px}
  .box-intro{gap:35px}
  .box-question h2{font-size:37px}
  .box-answer{font-size:20px}
  .box-explanation{gap:40px}
  .work-spread{gap:28px 35px}
  .work-heading h2{font-size:35px}
  .ingredients-spread{grid-template-columns:.9fr 1.2fr;gap:35px}
  .ingredients-copy h2{font-size:27px}
  .origin-note{grid-template-columns:180px minmax(0,1fr);gap:25px}
  .origin-side-note{font-size:22px}
}
@media(max-width:820px){
  .masthead{flex-wrap:wrap;gap:15px}
  .masthead nav{flex-wrap:wrap;gap:16px}
  .hero-photograph{width:calc(100% - 60px);margin-top:22px}
  .hero-photograph>img{aspect-ratio:1.65}
  .brand-statement{display:block;padding:40px 0 35px}
  .statement-heading h1{font-size:36px}
  .statement-copy{margin-top:25px;max-width:620px}
  .reading-index{flex-wrap:wrap;gap:12px 25px}
  .reading-index>span{flex-basis:100%;margin-bottom:5px}
  .box-question h2{font-size:30px}
  .box-answer{font-size:18px}
  .food-art figcaption{font-size:14px}
  .box-explanation{grid-template-columns:1.4fr 1fr;gap:30px}
  .work-heading h2{font-size:32px}
  .work-spread{grid-template-columns:1.6fr 1fr;gap:28px}
  .work-margin figure{display:block}
  .work-margin figure img{width:125px;margin:auto}
  .work-margin figcaption{font-size:14px;text-align:center}
  .work-margin h3{font-size:22px}
  .work-readmore a{font-size:20px}
  .ingredients-spread{grid-template-columns:.85fr 1.15fr;gap:25px}
  .ingredients-copy h2{font-size:25px}
  .origin-note{grid-template-columns:160px 1fr;gap:30px}
  .origin-side-note{display:none}
}
@media(max-width:760px){
  .masthead nav{justify-content:flex-start;gap:10px 20px;font-size:11px}
  .hero-photograph{width:calc(100% - 24px);margin-top:18px}
  .hero-photograph>img{aspect-ratio:1.05;object-position:43% 48%}
  .hero-photograph figcaption{font-size:9px;margin:9px 8px 0}
  .brand-statement{padding:30px 0 35px}
  .statement-heading h1{font-size:25px;line-height:1.85;letter-spacing:0}
  .statement-heading .section-index{font-size:11px;margin-bottom:12px}
  .statement-copy{font-size:13px;line-height:2.1;margin-top:23px;padding-top:0}
  .statement-copy br{display:none}
  .statement-copy p+p{margin-top:16px}
  .reading-index{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;padding:12px 0 15px;font-size:12px}
  .reading-index>span{grid-column:1/-1;font-size:19px;margin-bottom:8px}
  .reading-index a{padding:5px 0}
  .opening{padding-top:38px}
  .box-story,.work-story,.ingredients-story{margin-top:60px}
  .chapter-number{font-size:26px;margin-bottom:13px}
  .chapter-number>span{font-size:10px;margin-left:8px}
  .box-intro{display:flex;flex-direction:column;gap:24px;padding:16px 0 24px;align-items:stretch}
  .box-question h2{font-size:33px;line-height:1.65;letter-spacing:.015em}
  .box-answer{font-size:20px;line-height:1.9;margin-top:18px}
  .box-answer br{display:none}
  .food-art{width:min(100%,460px)}
  .food-art figcaption{font-size:15px;margin-top:12px}
  .food-controls{margin-top:5px}
  .box-explanation{display:flex;flex-direction:column;gap:20px}
  .essay-copy{font-size:14px;line-height:2.1}
  .minute-note{padding-left:18px;margin:24px 0}
  .minute-note h3{font-size:25px}
  .source-note,.minute-note .source-note{font-size:10px}
  .box-still{width:85%;align-self:center;padding-top:12px}
  .box-still figcaption{font-size:16px;margin-left:10px}
  .work-heading{padding:14px 0 24px}
  .work-heading h2{font-size:27px;line-height:1.8;letter-spacing:0}
  .work-spread{display:flex;flex-direction:column;gap:25px}
  .work-photograph{width:100%}
  .work-photograph img{aspect-ratio:1.1;object-position:57% 50%}
  .work-photograph figcaption{font-size:11px;padding-top:10px}
  .work-margin{width:100%;padding:0 0 20px;border-bottom:1px solid var(--line)}
  .work-margin figure{float:right;width:39%;margin:0 0 8px 18px}
  .work-margin figure img{width:100%}
  .work-margin .small-label{display:table;font-size:10px;margin-bottom:18px}
  .work-margin h3{font-size:24px}
  .work-margin>p:not(.small-label){font-size:13px}
  .work-margin:after{content:'';display:block;clear:both}
  .work-readmore{width:100%;padding-top:15px;margin-top:0}
  .work-readmore a{font-size:23px}
  .ingredients-spread{display:flex;flex-direction:column;gap:22px;padding:18px 0 25px;align-items:stretch}
  .broccoli-figure{width:78%;align-self:center}
  .broccoli-figure figcaption{font-size:14px}
  .ingredients-copy h2{font-size:27px;line-height:1.8;margin-bottom:20px}
  .origin-note{grid-template-columns:105px minmax(0,1fr);gap:20px;padding:26px 0 25px;margin-top:8px;align-items:start}
  .origin-note figcaption{font-size:12px}
  .origin-note .small-label{font-size:10px;margin-bottom:12px}
  .origin-note h3{font-size:23px}
  .origin-note>div>p:not(.small-label){font-size:13px;margin-bottom:16px}
  .origin-note .text-link{font-size:12px}
}
@media(max-width:380px){
  .statement-heading h1{font-size:24px}
  .box-question h2{font-size:31px}
  .work-heading h2,.ingredients-copy h2{font-size:25px}
  .origin-note{grid-template-columns:95px minmax(0,1fr);gap:18px}
  .origin-note h3{font-size:21px}
}

/* Only the eyes are composited; the original broccoli image remains untouched. */
.broccoli-portrait{position:relative}
.broccoli-eyes{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;pointer-events:none}
.broccoli-portrait[data-eyes-ready="true"] .broccoli-eyes{visibility:visible}
.broccoli-controls{text-align:center}

html[data-motion-paused="false"] .food-art[data-burst-state="idle"] .food-part{opacity:0}

.phrase{white-space:nowrap}
.box-answer em{display:inline-block}

/* Original copy is retained; no extra captions or editorial subtitles. */
.comic-afterword{justify-content:flex-end}
.comic-header{align-items:center;justify-content:flex-end}
.trial-copy h2{font-size:clamp(27px,2.5vw,34px)}
@media(max-width:760px){.trial-copy h2{font-size:29px}}