:root{--ink:#12232e;--teal:#00796f;--mint:#79e5d2;--paper:#f2f6f7;--line:#d5e2e7;--muted:#526875;font-family:Inter,"Segoe UI","Noto Sans",Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;line-height:1.65}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0}a{color:inherit;text-underline-offset:.25em}img,video{display:block;max-width:100%;height:auto}button,select{font:inherit}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.16;overflow-wrap:anywhere}h1{font-size:clamp(2.45rem,5.5vw,5.1rem);font-weight:740;letter-spacing:-.055em;max-width:14ch}h2{font-size:clamp(1.8rem,3.6vw,3rem);letter-spacing:-.035em}h3{font-size:1.13rem;letter-spacing:-.01em}p{overflow-wrap:anywhere}p+p{margin-top:1rem}.shell{width:min(1200px,calc(100% - 3rem));margin-inline:auto}.skip{position:absolute;left:1rem;top:-10rem;z-index:9;background:var(--ink);color:white;padding:.75rem}.skip:focus{top:1rem}a:focus-visible,select:focus-visible,video:focus-visible{outline:3px solid #00796f;outline-offset:5px}header{border-bottom:1px solid var(--line);background:rgba(242,246,247,.95)}.nav{display:flex;align-items:center;gap:2rem;min-height:100px}.nav nav{display:flex;gap:1.5rem;margin-left:auto}.nav nav a{text-decoration:none;font-size:.9rem;padding:.8rem 0}.language{display:flex;align-items:center;gap:.6rem;font-size:.85rem}.language select{max-width:190px;min-height:48px;border:1px solid var(--line);border-radius:6px;background:white;color:var(--ink);padding:.55rem 2rem .55rem .7rem}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px);gap:clamp(2rem,8vw,7rem);align-items:center;padding-block:4.5rem}.hero-copy{min-width:0}.eyebrow{font-size:.76rem;letter-spacing:.17em;font-weight:700;margin-bottom:1.6rem;display:flex;align-items:center;gap:.85rem}.eyebrow img{border-radius:8px}.lead{font-size:1.13rem;color:var(--muted);margin-top:1.75rem;max-width:57ch}.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}.button{display:inline-flex;align-items:center;justify-content:center;gap:1rem;padding:.85rem 1.4rem;border-radius:7px;text-decoration:none;min-height:52px;font-weight:650;line-height:1.35;text-align:center}.primary{background:var(--teal);color:white}.secondary{border:1px solid #8a9ca6;background:transparent}.button:hover{filter:brightness(.95)}.price-note{font-size:.78rem;color:var(--muted);margin-top:1rem}.purchase{font-size:.93rem;margin-top:1.6rem;max-width:58ch}.hero-phone{max-width:300px;justify-self:center}.hero-phone>img{border-radius:24px;box-shadow:0 20px 55px #12232e25;border:6px solid var(--ink)}.hero-phone figcaption{text-align:center;font-size:.73rem;color:var(--muted);padding-top:.7rem}.trust{border-block:1px solid var(--line);background:white}.trust ul{list-style:none;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-block:1.2rem;padding-left:0;font-size:.88rem;font-weight:650}.trust li::before{content:'✓';color:var(--teal);margin-right:.65rem}.section{padding-block:5rem}.section-heading{max-width:790px;margin-bottom:2.5rem}.section-heading p:not(.eyebrow){margin-top:1.2rem;color:var(--muted)}.section-heading .eyebrow{margin-bottom:1rem}.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem}.feature-grid article{padding:2rem;background:white;border-top:3px solid var(--teal);border-radius:0 0 8px 8px;min-width:0}.number{font-family:Consolas,monospace;color:var(--teal);font-size:.85rem;display:block;margin-bottom:1.1rem}.feature-grid h3{margin-bottom:1rem}.feature-grid p{color:var(--muted)}.cinema{background:var(--ink);color:var(--paper)}.cinema .section-heading p:not(.eyebrow),.video-note{color:#bccfd7}.cinema video{width:100%;background:#081219;border:1px solid #38505d;border-radius:12px}.video-note{margin-top:1.3rem;font-size:.88rem;max-width:95ch}.video-links{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:.9rem;font-size:.9rem}.video-links a{min-height:44px;display:inline-flex;align-items:center;color:var(--mint)}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}.gallery figure{min-width:0}.gallery a{display:block;position:relative;text-decoration:none}.gallery img{border:1px solid var(--line);border-radius:10px;width:100%;background:white}.gallery .open{display:block;padding:.7rem 0;color:var(--teal);font-size:.77rem;min-height:44px}.gallery figcaption{border-top:1px solid var(--line);padding-top:1rem}.gallery .number{margin-bottom:.55rem}.limits{display:grid;grid-template-columns:1fr 1.6fr;gap:4rem;border-top:1px solid var(--line)}.limits p{color:var(--muted)}.limits .eyebrow{color:var(--ink)}.language-section{background:white;border-block:1px solid var(--line)}.language-section p{max-width:850px;margin-top:1.2rem;color:var(--muted)}.language-links{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin-top:1.5rem}.language-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--teal)}.language-links [aria-current]{font-weight:750}.closing{display:flex;justify-content:space-between;gap:2rem;align-items:center}.closing p{margin-top:1rem;color:var(--muted);max-width:670px}.closing .button{flex-shrink:0;max-width:330px}footer{border-top:1px solid var(--line);display:flex;gap:1.5rem;justify-content:space-between;padding-block:2rem;font-size:.76rem;color:var(--muted)}footer div{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}footer a{min-height:44px;display:inline-flex;align-items:center}body:lang(ja) h1,body:lang(ko) h1,body:lang(zh-TW) h1{max-width:15ch;letter-spacing:-.035em;font-size:clamp(2.3rem,4.4vw,4.4rem)}@media(min-width:1450px){.hero{padding-block:5.5rem}}@media(max-width:900px){.nav{gap:1rem}.nav nav{display:none}.language{margin-left:auto}.hero{gap:2rem;grid-template-columns:minmax(0,1fr) 230px}.hero-phone{max-width:230px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}.gallery figure{max-width:340px}.limits{gap:2rem}.closing{align-items:flex-start;flex-direction:column}}@media(max-width:640px){.shell{width:calc(100% - 2rem)}.nav{min-height:82px;flex-wrap:wrap;gap:.5rem}.language>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.language select{max-width:155px}.hero{grid-template-columns:1fr;padding-block:2.5rem;gap:2rem}.hero h1{max-width:17ch}.hero-phone{max-width:255px}.hero .eyebrow{margin-bottom:1.3rem}.lead{font-size:1.03rem}.actions{gap:.6rem}.button{padding:.85rem 1rem;font-size:.92rem}.trust ul{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;font-size:.8rem}.section{padding-block:3rem}.feature-grid{grid-template-columns:1fr;gap:1rem}.feature-grid article{padding:1.5rem}.section-heading{margin-bottom:1.7rem}.gallery{gap:1.5rem 1rem}.gallery h3{font-size:1rem}.limits{grid-template-columns:1fr;gap:1.5rem}.closing{gap:1.5rem}footer{flex-direction:column;gap:.3rem}}@media(max-width:350px){.gallery{grid-template-columns:1fr}.gallery figure{max-width:240px;margin-inline:auto}.language select{max-width:125px}.trust ul{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media(forced-colors:active){.button,.hero-phone>img{border:1px solid CanvasText}}

.hero-phrase{display:inline-block}


/* Matches src/components/HeaderNav.astro and Layout.astro on cairo-plus.com.
   JSON Workshop only. Exact glyph outlines and metrics verified against the main site on2026-10-04.
   Self-hosted logo-only subset of Zen Kaku Gothic New Light (SIL OFL 1.1). */
@font-face {
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/json-workshop-brand-70eba3118340.woff2") format("woff2");
  unicode-range: U+43, U+61, U+69, U+6F, U+72, U+FF0B;
}
.masthead .cairo-brand {
  display: inline-block;
  flex: 0 0 auto;
  padding: 8px 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  font-synthesis: none;
  line-height: 28px;
  letter-spacing: .22em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  color: #1e293b;
}
.masthead .brand-plus {
  font-size: .6em;
  vertical-align: super;
  line-height: 0;
  color: hsl(199, 89%, 48%);
}
.masthead .cairo-brand:focus-visible {
  outline: 2px solid #1e293b;
  outline-offset: 5px;
  border-radius: 2px;
}
@media (min-width: 768px) {
  .masthead .cairo-brand { font-size: 24px; line-height: 32px; padding: 6px 0; }
}