/* Embedded marker shapes also work when the pages are opened directly from disk. */
:root {
  --marker-scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 360' preserveAspectRatio='none'%3E%3Cg fill='white'%3E%3Cpath opacity='.76' d='M43 64 53 60 320 14 329 17 337 65 331 74 65 121 56 116 45 85Z'/%3E%3Cpath opacity='.72' d='M18 140 26 134 354 82 365 86 371 133 362 138 36 197 29 190 20 157Z'/%3E%3Cpath opacity='.81' d='M37 188 45 182 369 137 376 143 379 186 370 192 47 241 39 234Z'/%3E%3Cpath opacity='.73' d='M21 256 28 246 352 192 361 197 368 240 361 248 39 306 29 301 23 276Z'/%3E%3Cpath opacity='.74' d='M108 306 116 298 343 226 353 231 362 270 355 279 130 350 121 347 110 321Z'/%3E%3C/g%3E%3Cg fill='black' opacity='.22'%3E%3Cpath d='m47 113 55-10 1 2-55 11ZM42 238l88-13v2l-87 14ZM289 198l78-11 1 3-80 10ZM44 300l63-11 1 2-63 12Z'/%3E%3C/g%3E%3C/svg%3E");
  --marker-stripes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 500' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='white' stroke-linecap='butt' stroke-linejoin='bevel'%3E%3Cpath d='M35 103 544 45 73 198 566 132' stroke-width='86' opacity='.85'/%3E%3Cpath d='M30 271 578 211 63 365 557 299' stroke-width='83' opacity='.72'/%3E%3Cpath d='M54 434 571 365' stroke-width='72' opacity='.88'/%3E%3C/g%3E%3C/svg%3E");
  --marker-patch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 500' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='white' stroke-linecap='butt' stroke-linejoin='bevel'%3E%3Cpath d='M71 82 544 101 39 169 563 206' stroke-width='88' opacity='.83'/%3E%3Cpath d='M45 271 571 297 64 363 542 401' stroke-width='96' opacity='.78'/%3E%3Cpath d='M108 442 492 417' stroke-width='59' opacity='.66'/%3E%3C/g%3E%3C/svg%3E");
}

:root{--bg:#fff;--paper:#fff;--ink:#273b43;--muted:#67716e;--accent:#315e61;--marker:#bce9e5;--line:#dcd8cb;--shadow:2px 3px 0 #45473714}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--ink);background:#fff;font-family:Arial,Helvetica,sans-serif;line-height:1.65}a,a:visited,a:hover,a:active{text-decoration:none;color:inherit}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.wrap{width:calc(100% - 80px);max-width:1160px;margin-inline:auto}.skip-link{position:absolute;left:20px;top:-90px;z-index:10;padding:10px;background:#fff}.skip-link:focus{top:12px}.nav{min-height:108px;display:flex;align-items:center;justify-content:space-between;gap:25px}.logo{font-size:2rem;letter-spacing:-1.5px;font-weight:800}.logo span,.dot{color:var(--accent)}.nav-links{display:flex;align-items:center;gap:36px;list-style:none;font-size:.96rem}.nav-links a:not(.btn):hover{color:var(--accent)}.nav-toggle{display:none;border:0;background:transparent;font-size:1.7rem}.btn{display:inline-flex;justify-content:center;align-items:center;background:#fff;color:var(--paper)!important;padding:13px 21px;border:1px solid var(--ink);border-radius:3px;box-shadow:3px 3px 0 #273b4315;font-weight:500}.btn:hover{transform:none}.btn-small{padding:9px 17px}.btn-ghost{background:#fff;color:var(--ink)!important;border-color:var(--line)}h1,h2,h3{line-height:1.07;letter-spacing:-.045em}h1{font-size:clamp(4rem,8.7vw,8rem);font-weight:800}h2{font-size:clamp(2.3rem,4.7vw,4.1rem);font-weight:700}h3{font-size:1.7rem;letter-spacing:-.03em}.lead{font-size:1.13rem;line-height:1.85;max-width:650px}.scribble{font-family:Arial,Helvetica,sans-serif;font-size:2rem;color:var(--accent);line-height:1.1;transform:none;transform-origin:left center}.scribble.small{font-size:1.6rem}.eyebrow{font-size:.73rem;letter-spacing:.16em;font-weight:700;text-transform:uppercase;color:var(--muted);margin-bottom:18px}.hero,.project-hero,.brand-hero{display:grid;grid-template-columns:1.2fr .85fr;gap:74px;align-items:center;padding-block:66px 82px}.hero h1{margin:12px 0 25px}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:29px}mark{color:inherit;background:none;position:relative;white-space:nowrap;isolation:isolate}mark:before{content:'';position:absolute;inset:-12% -7px -14%;z-index:-1;transform:rotate(-3deg);background:#ffdf38;opacity:.8;mask:var(--marker-scribble) center/100% 100% no-repeat;-webkit-mask:var(--marker-scribble) center/100% 100% no-repeat;mask-mode:luminance}.hl-orange:before{background:#ffd031}.marker-cutout{position:relative;isolation:isolate;--marker:var(--project-marker,#ffda32)}.marker-cutout:before{content:'';position:absolute;inset:-8% -13% -9%;z-index:-1;background:var(--marker);transform:rotate(-4deg);mask:var(--marker-scribble) center/100% 100% no-repeat;-webkit-mask:var(--marker-scribble) center/100% 100% no-repeat;mask-mode:luminance}.hero-photo{margin:18px 15px}.blob-photo{aspect-ratio:4/4.9;padding:8px;background:#fff;clip-path:polygon(8% 5%,74% 0,98% 14%,95% 51%,100% 84%,79% 99%,12% 95%,0 74%,5% 40%);transform:rotate(4deg)}.blob-photo img{width:100%;height:100%;object-fit:cover;clip-path:inherit}.pos-spike{object-position:58% 47%}.pos-bottom{object-position:center bottom}.sticker{position:absolute;bottom:22px;right:-26px;transform:none;padding:13px 21px;background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:1.5rem;line-height:1.1;box-shadow:var(--shadow)}.doodle{position:absolute;width:42px;fill:none;stroke:var(--accent);stroke-width:2}.doodle-star{top:-12px;right:8px;transform:rotate(13deg)}.section{padding-block:75px;scroll-margin-top:24px}.about{display:grid;grid-template-columns:.65fr 1.35fr;gap:80px;align-items:center}.tilt{display:inline-block;transform:none}.note{position:relative;background:#fff;padding:40px 46px;box-shadow:var(--shadow);transform:none;border:1px solid #dfd9c95c}.note .scribble{margin-top:20px}.tape{position:absolute;width:98px;height:29px;left:50%;top:-13px;background:#fff;transform:translateX(-50%) rotate(5deg);clip-path:polygon(2% 4%,97% 0,100% 95%,0 100%)}.tape-blue{background:#fff}.section-heading{margin-bottom:48px}.section-heading .scribble{margin-top:24px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px 44px}.card{display:block;min-width:0;transition:transform .2s}.card:hover{transform:none}.shape{aspect-ratio:1.22;display:flex;align-items:center;justify-content:center;margin:0 8px 30px}.shape img{height:100%;width:100%;object-fit:cover;border:6px solid var(--paper);transform:rotate(-3deg);clip-path:polygon(4% 0,95% 3%,100% 92%,5% 100%,0 46%)}.shape span{font-size:4.8rem;transform:rotate(-9deg)}.shape-circle img{clip-path:polygon(9% 0,90% 4%,100% 79%,81% 100%,9% 93%,0 14%);transform:rotate(3deg)}.shape-hex img{clip-path:polygon(7% 0,100% 4%,94% 100%,0 92%)}.card h3{margin-bottom:14px}.card>p{color:var(--muted);font-size:.98rem}.tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin-top:20px}.tags li{background:#fff;padding:4px 9px;font-size:.65rem;letter-spacing:.08em;text-transform:uppercase}.project-open{display:flex;justify-content:space-between;align-items:center;margin-top:21px;font-size:.9rem;font-weight:500}.project-open span{font-size:1.5rem;color:var(--accent)}.contact{padding-bottom:95px}.contact .lead{margin:25px 0 30px}.contact-links{display:flex;gap:22px;flex-wrap:wrap}.contact-chip{background:#fff;padding:18px 24px;transform:none;box-shadow:var(--shadow);overflow-wrap:anywhere}.contact-chip.c2{background:#fff;transform:none}.chip-label{display:block;font-family:Arial,Helvetica,sans-serif;font-size:1.4rem;color:var(--accent)}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-block:30px;border-top:1px solid var(--line)}.site-footer .scribble{font-size:1.3rem;transform:none;text-align:right}.breadcrumbs{display:flex;justify-content:space-between;gap:20px;font-size:.79rem;color:var(--muted);padding-top:22px}.breadcrumbs a:hover,.page-turn a:hover{color:var(--accent)}.page-turn{display:flex;justify-content:space-between;gap:20px;padding-block:40px 75px}.page-turn a{padding:10px 16px;background:#fff;box-shadow:var(--shadow)}.project-hero h1,.brand-hero h1{margin:16px 0 26px}.project-hero .scribble{margin-bottom:8px}.project-hero .btn{margin-top:26px}.project-hero figcaption{margin:22px 0 0 15px;font-size:1.6rem}.project-hero figure .blob-photo{aspect-ratio:1.1}.theme-botanical{--bg:#fff;--paper:#fff;--ink:#3c493b;--accent:#697846;--marker:#d8dfb1;--line:#dadccc}.theme-botanical .dot{color:#b69547}.brand-hero{grid-template-columns:1fr 1.08fr;gap:55px;padding-block:65px 75px}.brand-hero h1{font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:clamp(3.5rem,6.1vw,6rem);letter-spacing:-.06em}.theme-botanical h2{font-family:Arial,Helvetica,sans-serif;font-weight:400;letter-spacing:-.04em}.animation-paper{position:relative;padding:13px;background:#fff;box-shadow:var(--shadow);transform:none}.animation-paper:before{content:'';position:absolute;width:90px;height:26px;left:40%;top:-12px;background:#fff;transform:rotate(-6deg);z-index:1}.animation-paper img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#fff}.animation-paper figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 8px 3px}.animation-paper .scribble{font-size:1.55rem}.replay{border:0;background:transparent;font-size:.72rem;color:var(--accent);padding:8px}.theme-botanical .section>.lead{margin-top:26px}.process-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-block:48px 65px}.process-notes p{font-size:.94rem;color:var(--muted)}.process-notes span{display:block;color:var(--accent);font-family:Arial,Helvetica,sans-serif;font-size:1.9rem;margin-bottom:10px}.process-notes strong{color:var(--ink);font-weight:500}.collage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 38px}.polaroid{padding:14px 14px 18px;background:#fff;box-shadow:var(--shadow);transform:none;min-width:0}.polaroid:nth-child(even){transform:none}.polaroid .shape{aspect-ratio:.87;margin:0 0 18px}.polaroid .shape img{border:0}.polaroid figcaption{font:1.6rem/1.15 Arial,Helvetica,sans-serif;text-align:center}.volleyball>.lead{margin-block:25px 38px}.vb-layout{display:grid;grid-template-columns:.85fr 1.3fr;gap:45px;align-items:center}.vb-card{position:relative;padding:35px;background:#fff;box-shadow:var(--shadow);transform:none}.vb-card h3{margin-bottom:22px}.stats>div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid #dedbce77}.stats dt{color:var(--muted);font-size:.9rem}.stats dd{font-weight:500}.video-placeholder{background:#fff;min-height:250px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;transform:none;padding:25px;text-align:center}.play{font-size:2.5rem;color:var(--accent)}.vb-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:60px}.vb-photos .shape{margin-bottom:0;aspect-ratio:1}.project-sketch{text-align:center;min-height:300px;display:flex;align-items:center;justify-content:center;flex-direction:column}.project-sketch>span{font-size:7rem}.project-sketch .scribble{font-size:1.8rem}.pending{max-width:780px;margin-inline:auto;padding:54px}.pending h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:25px}

/* One pen-and-highlighter palette for each project, on its card and its page. */
.project-botanical{--project-marker:#b5d369}
.project-volleyball{--project-marker:#83cee9}
.project-robotics{--project-marker:#ff9a83}
.project-senior{--project-marker:#c5a7e9}
.project-next{--project-marker:#ffe15a}

/* White notebook pages: scissor edges and marker strokes. */
body{background:#fff}
h1,h2,h3{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.02}
h1{font-size:clamp(5rem,11vw,10rem)}
h2{font-size:clamp(3rem,5.6vw,4.7rem)}
h3{font-size:2.5rem}
.logo{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:2.8rem;transform:none}
.nav-links{font-family:Arial,Helvetica,sans-serif;font-size:1.45rem;gap:28px}
.nav-links li:nth-child(2){transform:none}
.nav-links li:nth-child(3){transform:none}
.btn{font-family:Arial,Helvetica,sans-serif;font-size:1.35rem;font-weight:700;line-height:1.2;color:var(--ink)!important;background:#fff;border:1.5px solid var(--ink);border-radius:3px 7px 2px 5px/5px 2px 6px 3px;padding:11px 19px;box-shadow:2px 2px 0 #34413b28;transform:none}
.btn-ghost{border-style:dashed;transform:none}
.btn-small{padding:7px 17px}
.btn:hover{transform:none}
.hero h1{transform:none;transform-origin:left center;margin-bottom:28px}
.hero .lead{max-width:570px;line-height:1.75}
.hero-photo{transform:none}
.blob-photo{padding:5px;transform:rotate(6deg)}
.sticker{box-shadow:2px 3px 0 #34413b1a;clip-path:polygon(0 4%,96% 0,100% 93%,3% 100%)}
.eyebrow{font-family:Arial,Helvetica,sans-serif;font-size:1.15rem;font-weight:500;letter-spacing:.015em;text-transform:none}
.section-heading>.eyebrow{transform:none;transform-origin:left}
.note{border:0;padding:35px 43px;transform:none;box-shadow:3px 4px 0 #45473713;clip-path:polygon(.4% 1%,98.8% 0,100% 97%,76% 99%,51% 98.5%,25% 100%,0 98%);overflow:visible}
.note .tape{top:0}
.tape{width:105px;height:30px;clip-path:polygon(3% 0,98% 5%,95% 18%,100% 32%,96% 48%,100% 65%,96% 81%,99% 100%,0 95%,4% 77%,0 62%,4% 46%,0 28%,5% 13%)}
.grid{gap:65px 48px;align-items:start;padding-inline:5px}
.card{transform:none;transition:transform .18s}
.card:nth-child(2){margin-top:32px}
.card:nth-child(3){margin-top:8px}
.card:nth-child(4){}
.card:nth-child(5){margin-top:35px}
.card:hover{transform:none}
.card .shape{margin-bottom:24px}
.card .shape img{border-width:4px}
.card h3{position:relative;display:table;isolation:isolate;margin-bottom:16px;padding-inline:4px}
.card h3:before{content:'';position:absolute;inset:14% -9px -5%;z-index:-1;background:var(--project-marker);opacity:.45;mask:var(--marker-scribble) center/100% 100% no-repeat;-webkit-mask:var(--marker-scribble) center/100% 100% no-repeat;mask-mode:luminance;transform:rotate(3deg)}
.card>p{line-height:1.65;color:var(--ink)}
.tags{gap:9px}
.tags li{font-family:Arial,Helvetica,sans-serif;font-size:1.1rem;line-height:1.1;text-transform:none;letter-spacing:0;background:#fff;padding:4px 8px;transform:none;border:1px dashed #67716e50}
.tags li:nth-child(even){transform:none}
.project-open{font-family:Arial,Helvetica,sans-serif;font-size:1.4rem;margin-top:15px;justify-content:flex-start;gap:16px}
.project-open span{font-size:1.9rem;transform:none}
.project-hero h1{transform:none;transform-origin:left}
.project-sketch{transform:none}
.project-sketch:before{transform:rotate(-8deg)}
.project-sketch .scribble{transform:none}
.brand-hero h1{font-family:Arial,Helvetica,sans-serif;font-size:clamp(3.3rem,5.8vw,5.7rem);font-weight:400;transform:none;transform-origin:left}
.theme-botanical h2{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.025em}
.animation-paper{padding:8px 8px 13px;transform:none;border-radius:1px 4px 2px 0}
.animation-paper:before{background:#fff;clip-path:polygon(3% 0,97% 4%,94% 24%,100% 48%,96% 75%,99% 100%,0 94%,4% 66%,0 40%)}
.process-notes>div:nth-child(2){transform:none}
.process-notes>div:nth-child(3){transform:none}
.polaroid{padding:9px 9px 19px;box-shadow:3px 4px 0 #45473714}
.polaroid:nth-child(3n){transform:none}
.polaroid:nth-child(3n+2){transform:none}
.vb-card{border:1px dashed #67716e50;transform:none}
.video-placeholder{background:#fff;clip-path:polygon(1% 0,100% 2%,99% 96%,0 100%)}
.contact-chip{box-shadow:2px 3px 0 #45473718;clip-path:polygon(1% 0,99% 3%,100% 95%,0 100%)}
.site-footer{border-top:1px dashed #67716e70}
.breadcrumbs,.page-turn{font-family:Arial,Helvetica,sans-serif;font-size:1.25rem}
.page-turn a{transform:none;border:1px dashed #67716e50}
.page-turn a:last-child{transform:none}

@media(min-width:681px){.nav-links{display:flex!important}}@media(max-width:1000px){.wrap{width:calc(100% - 56px)}.hero,.project-hero{gap:40px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand-hero{gap:30px}.about{gap:40px}.nav-links{gap:22px}}
@media(max-width:680px){.wrap{width:calc(100% - 40px)}.nav{min-height:85px;flex-wrap:wrap;padding-block:16px;gap:14px}.logo{font-size:1.8rem}.nav-links{width:100%;flex-wrap:wrap;gap:16px 24px;padding-block:8px}.menu-ready .nav-toggle{display:block}.menu-ready .nav-links{display:none}.menu-ready .nav-links.open{display:flex}.hero,.project-hero,.brand-hero{grid-template-columns:1fr;gap:42px;padding-block:38px 55px}.hero h1{font-size:clamp(4rem,17vw,5.1rem)}.lead{font-size:1.03rem}.hero-photo{width:min(330px,85%);margin:10px auto}.hero .blob-photo{aspect-ratio:1}.sticker{right:-16px}.scribble{font-size:1.8rem}.hero-actions{gap:12px}.hero-actions .btn{font-size:.9rem;padding:11px 16px}.section{padding-block:50px}.about{display:block}.about h2{margin-bottom:35px}.note{padding:30px}.grid{grid-template-columns:1fr;gap:48px}.section-heading{margin-bottom:35px}.shape{aspect-ratio:1.4;margin-inline:15px}.card h3{font-size:1.9rem}.contact-links{gap:22px}.contact-chip{width:100%;padding:17px 20px;font-size:.9rem}.site-footer{display:block;padding-block:25px}.site-footer .scribble{margin-top:18px;text-align:left;font-size:1.2rem}.breadcrumbs>span{display:none}.page-turn{flex-wrap:wrap;padding-block:25px 50px;font-size:.9rem}.brand-hero h1{font-size:clamp(3rem,12vw,3.8rem)}.animation-paper{margin:0 4px}.animation-paper figcaption{padding-inline:0}.animation-paper .scribble{font-size:1.35rem}.process-notes{grid-template-columns:1fr;gap:24px;margin-block:30px 45px}.process-notes span{margin-bottom:5px}.collage{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}.polaroid{padding:9px 9px 14px}.polaroid figcaption{font-size:1.25rem}.polaroid .shape{margin-bottom:12px}.vb-layout{grid-template-columns:1fr;gap:30px}.vb-photos{gap:12px;margin-top:40px}.vb-photos .shape{margin-inline:0}.project-hero h1{font-size:clamp(3.3rem,14vw,5rem)}.project-sketch{min-height:220px}.project-sketch>span{font-size:6rem}.pending{padding:32px 25px}.pending h2{font-size:2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

@media(max-width:1000px){.card:nth-child(3){margin-top:0}.card:nth-child(4){margin-top:25px}}
@media(max-width:680px){
  .logo{font-size:2.5rem}.nav-links{font-size:1.4rem}
  .hero h1{font-size:clamp(5.5rem,23vw,7.7rem)}
  .hero-actions .btn{font-size:1.2rem}
  .card{}.card:nth-child(even){}
  .card:nth-child(n){margin-top:0}.grid{gap:58px;padding-inline:3px}
  .card h3{font-size:2.5rem}.note{padding:30px 27px}
  .project-hero h1{font-size:clamp(4rem,17vw,6rem)}
  .brand-hero h1{font-size:clamp(2.8rem,11vw,3.8rem)}
  .project-sketch{margin-inline:10px}
  .page-turn{font-size:1.2rem}
}

/* A little menu pinned to the corner, with no header bar. */
main{padding-top:80px}
.skip-link{z-index:200}
.page-menu{position:fixed;top:19px;left:23px;z-index:100}
.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:49px;height:46px;padding:10px;border:0;background:#fff;box-shadow:2px 3px 0 #4547371c;transform:none;border-radius:2px 7px 3px 5px}
.menu-toggle[hidden],.menu-pages[hidden]{display:none!important}
.menu-toggle span{display:block;width:28px;height:3px;background:var(--ink);border-radius:40% 10% 30% 20%;transform:none;transition:transform .15s}
.menu-toggle span:nth-child(2){width:25px;transform:none}
.menu-toggle span:last-child{width:29px;transform:none}
.menu-toggle[aria-expanded="true"]{transform:none}
.menu-pages{width:min(310px,calc(100vw - 46px));max-height:calc(100dvh - 90px);overflow-y:auto;margin-top:16px;padding:23px 20px 17px;background:#fff;box-shadow:5px 6px 0 #45473724;border:1px dashed #67716e70;transform:none}
.menu-pages>.scribble{font-size:1.9rem;margin:0 0 17px 9px}
.menu-pages ul{list-style:none}
.menu-page{display:flex;align-items:center;gap:12px;padding:9px 10px;font-family:Arial,Helvetica,sans-serif;font-size:1.6rem;line-height:1.1;border-radius:3px}
.menu-page:hover,.menu-page[aria-current="page"]{background:#fff}
.menu-page[aria-current="page"]:after{content:'←';margin-left:auto;font-size:1.25rem}
.menu-mark{width:27px;height:21px;flex:none;background:var(--project-marker,#f4cf64);mask:var(--marker-scribble) center/100% 100% no-repeat;-webkit-mask:var(--marker-scribble) center/100% 100% no-repeat;transform:rotate(-9deg)}
.menu-extras{display:flex;gap:25px;margin:18px 9px 0;padding-top:12px;border-top:1px dashed #67716e55;font-family:Arial,Helvetica,sans-serif;font-size:1.3rem}
.footer-home{font-size:1.6rem!important;white-space:nowrap}
.story-section{padding-block:35px 50px}
.story-note{max-width:860px;margin-inline:auto;padding:43px 50px;transform:none}
.story-section:nth-of-type(odd) .story-note{transform:none}
.story-note h2{font-size:clamp(2.5rem,4.3vw,3.7rem);margin-bottom:24px}
.story-note>p:not(.eyebrow){margin-top:18px;line-height:1.85;max-width:720px}
.about .note>p+p:not(.scribble){margin-top:18px}
.hero h1{font-size:clamp(5rem,9vw,8rem)}
@media(max-width:680px){main{padding-top:78px}.page-menu{left:18px;top:17px}.menu-pages{width:min(310px,calc(100vw - 36px))}.hero h1{font-size:clamp(4.8rem,20vw,7rem)}.story-note{padding:34px 26px}.story-section{padding-block:24px 35px}.story-note h2{font-size:2.8rem}.footer-home{white-space:normal}}


/* Standard fonts, with sizes adjusted from the handwritten lettering. */
h1,h2,h3{line-height:1.12;letter-spacing:-.03em}
h1{font-size:clamp(3rem,7vw,6.5rem)}
h2{font-size:clamp(2rem,4.4vw,3.7rem)}
h3,.card h3{font-size:1.8rem}
.hero h1{font-size:clamp(3.4rem,7.5vw,6.8rem)}
.brand-hero h1{font-size:clamp(3rem,5.5vw,5rem)}
.story-note h2{font-size:clamp(1.8rem,3.7vw,3rem)}
.scribble,.scribble.small{font-size:1.25rem;line-height:1.5}
.sticker,.chip-label{font-size:1.1rem;line-height:1.4}
.eyebrow{font-size:.9rem;line-height:1.5}
.btn{font-size:1rem;line-height:1.4}
.tags li{font-size:.85rem;line-height:1.4}
.project-open{font-size:1rem}
.breadcrumbs,.page-turn{font-size:1rem}
.project-hero figcaption,.polaroid figcaption{font-size:1rem;line-height:1.5}
.project-sketch .scribble,.animation-paper .scribble{font-size:1.1rem}
.process-notes span{font-size:1.25rem;line-height:1.4}
.menu-pages>.scribble{font-size:1.15rem}
.menu-page{font-size:1.1rem;line-height:1.4}
.menu-extras{font-size:1rem}
.site-footer .scribble{font-size:1rem}
.footer-home{font-size:1.1rem!important}
@media(max-width:680px){
  .hero h1{font-size:clamp(2.7rem,12vw,4.8rem)}
  .project-hero h1{font-size:clamp(2.4rem,10vw,4rem)}
  .brand-hero h1{font-size:clamp(2.3rem,10vw,3.8rem)}
  .story-note h2{font-size:clamp(1.65rem,7.5vw,2.4rem)}
  .hero-actions .btn{font-size:1rem}
  .card h3{font-size:1.8rem}
  .animation-paper .scribble{font-size:.95rem}
  .site-footer .scribble{font-size:1rem}
  .page-turn{font-size:.95rem}
}


/* Photo stories: level text, loose photo placement, and several green marker strokes. */
.origin-note{max-width:930px;padding-block:30px 62px}
.origin-note h2{max-width:820px;margin:14px 0 24px}
.origin-note .lead{max-width:760px}
.margin-note{margin:23px 0 0;padding-left:20px;border-left:3px dashed #83a15d;font-size:1rem}
.green-highlight {
  padding-inline: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: linear-gradient(177deg, transparent 43%, color-mix(in srgb, var(--story-green, #b8db7d) 55%, transparent) 44% 92%, transparent 93%);
}
.process-journal{padding-top:35px}
.journal-intro{max-width:780px;margin-bottom:75px}
.journal-intro h2{margin:13px 0 23px}
.process-story{display:flex;align-items:center;justify-content:space-between;gap:clamp(36px,6vw,92px);margin-block:0 130px;--story-green:#b8db7d;--photo-angle:-4deg;--stroke-angle:3deg;--photo-width:40%;--photo-ratio:4/5}
.process-story:nth-of-type(even){flex-direction:row-reverse}
.process-photo{flex:0 0 var(--photo-width);min-width:0;margin:0;align-self:center}
.photo-mat{position:relative;isolation:isolate;padding:10px}
.photo-mat:before{content:'';position:absolute;inset:-4% -6% -3%;z-index:-1;background:var(--story-green);opacity:.85;transform:rotate(var(--stroke-angle));mask:var(--marker-scribble) center/100% 100% no-repeat;-webkit-mask:var(--marker-scribble) center/100% 100% no-repeat;mask-mode:luminance}
.photo-stripes .photo-mat:before{inset:4% -10% -5%;mask-image:var(--marker-stripes);-webkit-mask-image:var(--marker-stripes)}
.photo-patch .photo-mat:before{inset:-8% -5% 2%;mask-image:var(--marker-patch);-webkit-mask-image:var(--marker-patch)}
.photo-mat img{position:relative;width:100%;height:auto;aspect-ratio:var(--photo-ratio);object-fit:cover;border:7px solid #fff;box-shadow:2px 4px 0 #34413b20;transform:rotate(var(--photo-angle))}
.process-photo figcaption{margin:23px 8px 0;font-size:.95rem;line-height:1.5;color:var(--muted);text-align:left;transform:none}
.process-copy{flex:1;min-width:0;max-width:590px}
.process-step{display:flex;align-items:center;gap:12px;font-size:.88rem;line-height:1.5;color:var(--accent);margin-bottom:17px}
.process-step:before{content:'';width:27px;height:23px;flex:none;background:var(--story-green);mask:var(--marker-scribble) center/100% 100% no-repeat;-webkit-mask:var(--marker-scribble) center/100% 100% no-repeat}
.process-copy h3{font-size:clamp(1.7rem,3vw,2.55rem);line-height:1.18;max-width:550px;margin-bottom:25px}
.process-copy>p:not(.process-step){line-height:1.85;margin-top:19px}
.process-copy strong{font-weight:700}
.process-copy .process-aside{font-size:.97rem;line-height:1.65;margin-top:25px;padding:4px 0 4px 17px;border-left:3px solid var(--story-green)}
.story-ingredients{--story-green:#b9df77;--photo-angle:-4deg;--stroke-angle:3deg;--photo-width:37%;--photo-ratio:3/4}
.story-petals{--story-green:#8fbd91;--photo-angle:3deg;--stroke-angle:-5deg;--photo-width:41%;--photo-ratio:1/1}
.story-infusions{--story-green:#d2e89b;--photo-angle:-2deg;--stroke-angle:6deg;--photo-width:39%;--photo-ratio:4/5;margin-left:24px}
.story-formulas{--story-green:#78b8a0;--photo-angle:4deg;--stroke-angle:-3deg;--photo-width:43%;--photo-ratio:4/5}
.story-formulas .photo-mat img{object-position:50% 65%}
.story-printer{--story-green:#a8cb83;--photo-angle:-3deg;--stroke-angle:4deg;--photo-width:42%;--photo-ratio:1/1;margin-right:20px}
.story-printer .photo-mat img{object-position:50% 70%}
.story-parts{--story-green:#9fcea1;--photo-angle:2deg;--stroke-angle:-4deg;--photo-width:46%;--photo-ratio:5/4}
.story-planning{--story-green:#c4d96c;--photo-angle:-2deg;--stroke-angle:5deg;--photo-width:44%;--photo-ratio:5/4;margin-bottom:35px}
.replay{font-size:.95rem}
.project-link .project-open{margin-top:23px}
.project-link .project-open:before{content:'';width:23px;height:18px;background:var(--project-marker);mask:var(--marker-scribble) center/100% 100% no-repeat;-webkit-mask:var(--marker-scribble) center/100% 100% no-repeat}
@media(max-width:900px){
  .process-story{gap:40px;margin-bottom:95px}
  .process-copy h3{font-size:1.8rem}
  .process-copy>p:not(.process-step){font-size:.97rem;line-height:1.75}
  .story-infusions{margin-left:0}.story-printer{margin-right:0}
}
@media(max-width:760px){
  .origin-note{padding-top:20px;padding-bottom:45px}
  .journal-intro{margin-bottom:50px}
  .process-story,.process-story:nth-of-type(even){flex-direction:column;align-items:stretch;gap:38px;margin-bottom:80px}
  .process-photo{flex:auto;width:88%;max-width:440px;align-self:flex-start;margin-left:3%}
  .process-story:nth-of-type(even) .process-photo{align-self:flex-end;margin-left:0;margin-right:3%}
  .story-parts .process-photo,.story-planning .process-photo{width:91%;max-width:510px}
  .process-copy{max-width:100%}
  .process-copy h3{font-size:clamp(1.65rem,6vw,2rem);margin-bottom:22px}
  .process-copy>p:not(.process-step){font-size:1rem;line-height:1.8}
  .story-planning{margin-bottom:15px}
}