/* Type rules measured from CJK references (Hoshinoya, Snow Peak, Toraya, pidan):
   CJK headings small (~2.5vw), positive tracking, heading:body about 2:1; Latin used large as image.
   Five type sizes only. Text starts on grid column 2; images run the full grid.
   Shape motif: the arch, taken from the pebble-shaped butler.
   Fonts: fonts/web/*.woff2 are subsets made by tools/subset_fonts.py — re-run it after copy edits. */
@font-face{font-family:"RHR";font-weight:350;font-display:swap;src:url(../fonts/web/rhr-normal.woff2) format("woff2")}
@font-face{font-family:"RHR";font-weight:400;font-display:swap;src:url(../fonts/web/rhr-regular.woff2) format("woff2")}
@font-face{font-family:"RHR";font-weight:500;font-display:swap;src:url(../fonts/web/rhr-medium.woff2) format("woff2")}
/* Fraunces (OFL), self-hosted from Google Fonts: SOFT/WONK pinned at 100/0, optical size kept variable */
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/web/fraunces-italic-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/web/fraunces-italic-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/web/fraunces-normal-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/web/fraunces-normal-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  --paper:#FBF8F4; --sand:#F3ECE3; --line:#E7DED2;
  --ink:#2B2A28; --text:#5A544D; --mute:#847A70; --tan:#E3D4C2; --tan-2:#D5C2AC;
  --apricot:#E8955A;        /* dots, icons, accents that are not text */
  --apricot-text:#B8652E;   /* apricot used as text, readable on paper */
  --cn:"RHR","PingFang SC","Microsoft YaHei",sans-serif;
  --en:"Fraunces",Georgia,serif;
  --m:64px; --gap:24px;
  --col:calc((100vw - 2 * var(--m) - 11 * var(--gap)) / 12);
  --col2:calc(var(--m) + var(--col) + var(--gap));   /* left edge of text */
  --h1:clamp(24px,2.5vw,36px);
  --giant:clamp(56px,10.7vw,154px);
  --arch:999px 999px 24px 24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--cn);font-weight:350;font-size:18px;line-height:1.9;letter-spacing:.05em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
p{text-wrap:pretty}
.nw{white-space:nowrap}

/* five sizes: h1 36 · t 20 · body 18 · small 15 · eyebrow 12 */
.h1{font-weight:400;font-size:var(--h1);line-height:1.55;letter-spacing:.07em;text-wrap:balance}
.t{font-weight:400;font-size:20px;line-height:1.6;letter-spacing:.06em}
.body{color:var(--text)}
.small{font-size:15px;line-height:1.85;color:var(--text)}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.28em;color:var(--mute)}
.en{font-family:var(--en);font-style:italic;font-weight:300;font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.01em}
.giant{font-family:var(--en);font-style:italic;font-weight:300;font-variation-settings:"SOFT" 100,"WONK" 0;font-size:var(--giant);line-height:1;letter-spacing:-.035em;color:var(--tan-2);white-space:nowrap;pointer-events:none;user-select:none}
.key{color:var(--apricot-text)}
.arch{border-radius:var(--arch);overflow:hidden;background:var(--sand);position:relative}
.arch img,.frame img,.arch video,.frame video{display:block;width:100%;height:100%;object-fit:cover}
/* photos are pre-graded by tools/grade_photos.py; inside their arch/frame they drift slowly on scroll.
   loops (tools/make_videos.py) already move, so they sit still at full sharpness */
.arch img,.frame img{transform:translateY(var(--py,0px)) scale(var(--s,1.08));will-change:transform}
.frame{border-radius:24px;overflow:hidden;position:relative;background:var(--sand)}
.concept{position:absolute;z-index:2;font-size:11px;font-weight:500;letter-spacing:.12em;padding:4px 10px;border-radius:99px;background:rgba(251,248,244,.88);color:var(--text)}
.wrap{padding:0 var(--m)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.mb{display:none}

/* nav */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:30px var(--m) 22px;transition:background .4s,padding .4s,box-shadow .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.nav.away{transform:translateY(-100%)}
.nav .links a:not(.cta){position:relative}
.nav .links a:not(.cta):after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.nav .links a:not(.cta):hover:after{transform:scaleX(1);transform-origin:left}

/* hero entrance: arch rises open, copy follows, the Latin line slides in last */
@keyframes rise{from{clip-path:inset(100% 0 0 0 round 999px 999px 24px 24px)}to{clip-path:inset(0 0 0 0 round 999px 999px 24px 24px)}}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}
.hero .photo{animation:rise 1.6s cubic-bezier(.65,0,.25,1) both}
.hero .copy .eyebrow,.hero .copy .h1,.hero .copy .body{animation:up 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero .copy .eyebrow{animation-delay:.5s}.hero .copy .h1{animation-delay:.65s}.hero .copy .body{animation-delay:.8s}
.hero .giant{animation:slide 1.6s cubic-bezier(.2,.7,.2,1) 1s both}
.nav.scrolled{background:rgba(251,248,244,.9);backdrop-filter:blur(12px);padding-top:18px;padding-bottom:16px;box-shadow:0 1px 0 var(--line)}
.nav img{height:26px}
.nav .links{display:flex;gap:34px;font-size:15px;letter-spacing:.08em;color:var(--text)}
.nav .links a{transition:color .25s}
.nav .links a:hover{color:var(--ink)}
.nav .links .cta{color:var(--ink);display:flex;align-items:center;gap:8px}
.nav .links .cta:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--apricot)}
/* language switch: the other language's own page, not a script toggle, so each is indexed */
.nav .links .lang{padding-left:24px;border-left:1px solid var(--line);color:var(--mute)}

/* 1 hero: copy on column 2, arch photo on the right, giant Latin ends on the photo's right edge and bites into it */
.hero{position:relative;height:max(100svh,760px);overflow:hidden}
.hero .photo{position:absolute;right:var(--m);top:118px;width:33vw;max-width:540px;bottom:150px}
/* product cut-out (transparent PNG from gpt-image-2.5) with a CSS light pool and contact shadow.
   It sits between the copy and the arch; the giant Latin line passes over it, as it does over the photo */
.hero .product{position:absolute;z-index:1;bottom:104px;right:calc(var(--m) + min(33vw,540px) + 3vw);width:min(16.5vw,262px);animation:up 1.4s cubic-bezier(.2,.7,.2,1) .9s both}
.hero .product img{position:relative;z-index:1;width:100%;height:auto}
/* soft light behind it and a warm contact shadow under the stone base */
.hero .product:before{content:"";position:absolute;left:-30%;right:-30%;top:5%;bottom:0;background:radial-gradient(closest-side,rgba(255,252,246,.75),rgba(255,252,246,0));z-index:0}
.hero .product:after{content:"";position:absolute;left:16%;right:12%;bottom:3.5%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(74,56,40,.34),rgba(74,56,40,0));filter:blur(3px);z-index:0}
.hero .photo video{object-position:50% 50%}
.hero .copy{position:absolute;left:var(--col2);top:50%;transform:translateY(-62%)}
/* the h1 carries the product category (eyebrow) and the slogan, so search engines read both */
.hero h1{font-size:inherit;font-weight:inherit}
.hero h1 .eyebrow,.hero h1 .h1{display:block}
.hero .copy .h1{margin-top:26px}
.hero .copy .body{margin-top:24px}
.hero .giant{position:absolute;right:var(--m);bottom:162px;z-index:2;color:var(--tan-2);mix-blend-mode:multiply}

/* 2 poem */
.poem{padding:26vh var(--m) 24vh;text-align:center}
.poem .en{font-size:22px;color:var(--apricot-text)}
.poem .h1{margin-top:28px}
.poem .lines{margin-top:9vh;line-height:2.4;letter-spacing:.06em;color:var(--text)}
.poem .lines p{opacity:0;transform:translateY(10px);transition:opacity 1.3s ease,transform 1.3s ease}
.poem .lines p+p{margin-top:1.6em}
.poem .lines.in p{opacity:1;transform:none}
.poem .lines.in p:nth-child(2){transition-delay:.45s}
.poem .lines.in p:nth-child(3){transition-delay:.9s}
.poem .mark{width:44px;margin:9vh auto 0;opacity:.85}

/* 3 butler: "Meet miwo." overlaps the top of the product photo on purpose */
.butler{position:relative;padding-top:4vh;overflow-x:clip}
.butler .giant{position:relative;z-index:2;margin-left:calc(var(--col2) + var(--col) + var(--gap));margin-bottom:-.42em;mix-blend-mode:multiply}
.butler .lead{grid-column:2/6;align-self:center}
.butler .lead .h1{margin-top:22px}
.butler .lead .body{margin-top:22px}
.butler .pic{grid-column:6/13;aspect-ratio:7/5;z-index:1}
.butler .pic .concept{top:18px;right:18px}
.abilities-head{margin:10vh 0 0 var(--col2)}
/* what it does: four items in a 2x2 grid under one rule */
.abilities{margin-top:22px;padding-top:34px;border-top:1px solid var(--line);row-gap:44px}
.abilities .it:nth-child(odd){grid-column:2/7}
.abilities .it:nth-child(even){grid-column:7/12}
.abilities .it{padding-right:8%}
.abilities .n{font-family:var(--en);font-style:italic;font-weight:300;font-variation-settings:"SOFT" 100;font-size:36px;line-height:1;color:var(--apricot-text);letter-spacing:-.02em}
.abilities .t{margin-top:20px}
.abilities .small{margin-top:8px}

/* 4 night: the emotional peak — big time, full-bleed photo on the right */
.night{padding:32vh 0 0;overflow-x:clip}
.night .txt{grid-column:2/6;align-self:end;padding-bottom:4px}
.night .time{font-family:var(--en);font-style:italic;font-weight:300;font-variation-settings:"SOFT" 100;font-size:clamp(80px,10vw,150px);line-height:.9;letter-spacing:-.04em;color:var(--apricot-text)}
.night .time small{font-size:.22em;letter-spacing:0;margin-left:.3em;color:var(--mute)}
.night .h1{margin-top:30px}
.night .body{margin-top:18px}
.night .pic .concept{top:18px;left:18px;background:rgba(43,42,40,.55);color:#F3ECE3}
.night .pic{grid-column:6/13;margin-right:calc(-1 * var(--m));aspect-ratio:3/2;border-radius:24px 0 0 24px}

/* 5 daily: three arches on one baseline */
.daily{padding:32vh 0 0}
.daily .head{text-align:center}
.daily .head .h1{margin-top:22px}
.daily .it .no{margin-top:26px;font-family:var(--en);font-style:italic;font-weight:300;font-variation-settings:"SOFT" 100;font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--apricot-text)}
.daily .it .no+.t{margin-top:12px}
.daily .cols{margin-top:9vh}
.daily .it{grid-column:span 4}
.daily .it .arch{aspect-ratio:4/5}
.daily .it .concept{bottom:16px;left:16px}
.daily .it .t{margin-top:24px}
.daily .it .small{margin-top:6px}

/* 6 privacy */
.privacy{margin-top:26vh;background:var(--sand);padding:18vh 0 18vh}
.privacy .pic{grid-column:2/6;aspect-ratio:1/1;align-self:center;background:#e9e0d4}
.privacy .pic img{object-position:50% 60%}
.privacy .pic .concept{bottom:16px;left:16px}
.privacy .copy{grid-column:7/12;align-self:center}
.privacy .copy .h1{margin-top:22px}
.privacy .copy .body{margin-top:18px}
.plist{margin-top:40px;border-top:1px solid #DDD1C2}
.plist .row{display:grid;grid-template-columns:36px 1fr;column-gap:18px;padding:20px 0;border-bottom:1px solid #DDD1C2}
.plist svg{width:22px;height:22px;stroke:var(--apricot);fill:none;stroke-width:1.4;margin-top:5px}
.plist .t{display:block}
.plist .small{display:block;margin-top:2px}

/* 7 app */
.app{padding:26vh 0 0;text-align:center;overflow:hidden}
.app .h1{margin-top:22px}
.app .head .body{margin:18px auto 0}
.fan{position:relative;height:clamp(420px,46vw,660px);margin-top:9vh}
.phone{position:absolute;left:50%;top:0;width:clamp(160px,17vw,250px);aspect-ratio:1206/2622;border-radius:clamp(24px,2.6vw,38px);overflow:hidden;border:clamp(4px,.42vw,6px) solid #2B2A28;background:#2B2A28;box-shadow:0 40px 60px -32px rgba(90,70,50,.45);transform:translateX(-50%);transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.phone img{width:100%;height:100%;object-fit:cover}
.p3{z-index:3}.p2,.p4{z-index:2}
.fan.open .p1{transform:translateX(-50%) translateX(-176%) rotate(-10deg) translateY(12%)}
.fan.open .p2{transform:translateX(-50%) translateX(-90%) rotate(-5deg) translateY(3%)}
.fan.open .p4{transform:translateX(-50%) translateX(90%) rotate(5deg) translateY(3%)}
.fan.open .p5{transform:translateX(-50%) translateX(176%) rotate(10deg) translateY(12%)}
.app .notes{display:flex;justify-content:center;gap:56px;margin-top:2vh;padding:0 var(--m)}
.app .notes>div{max-width:230px}
/* app: four screens, each with its own title and line */
.app .screens{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;max-width:1240px;margin:9vh auto 0}
.app .shot .phone{position:relative;left:auto;top:auto;transform:none;transition:none;width:min(100%,232px);margin:0 auto}
.app .shot .t{margin-top:28px}
.app .shot .small{margin-top:6px}
.app .later{max-width:620px;margin:52px auto 0;padding:0 var(--m);color:var(--mute)}
.app .notes .small{margin-top:4px}
.app .soon{margin-top:52px}

/* 8 lifetime: smaller square arches, lighter than the product */
.life{padding:26vh 0 0}
.life .head{align-items:end}
.life .head .left{grid-column:2/7}
.life .head .left .h1{margin-top:22px}
.life .head .right{grid-column:8/12}
.life .cards{margin-top:8vh}
.life .card{grid-column:span 3}
.life .card .arch{aspect-ratio:1/1}
.life .card .row{display:flex;align-items:baseline;gap:14px;margin-top:20px}
.life .card .n{font-family:var(--en);font-style:italic;font-weight:300;font-variation-settings:"SOFT" 100;font-size:22px;color:var(--apricot-text)}
.life .card .small{margin-top:4px}

/* what it looks like: copy left, macro arch right */
.look{padding:26vh 0 0;overflow-x:clip}
.look .copy{grid-column:2/6;align-self:center}
.look .copy .h1{margin-top:22px}
.look .copy .body{margin-top:18px}
.look .note{margin-top:18px;color:var(--mute)}
.look .pic{grid-column:6/13;margin-right:calc(-1 * var(--m));aspect-ratio:3/2;border-radius:24px 0 0 24px}
.look .pic .concept{top:18px;left:18px}

/* faq: thin-ruled list, answers open in place */
.faq{padding:26vh 0 0}
.faq .left{grid-column:2/5}
.faq .left .h1{margin-top:22px}
.faq .list{grid-column:6/12;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";flex:none;width:11px;height:11px;border-right:1.4px solid var(--mute);border-bottom:1.4px solid var(--mute);transform:rotate(45deg) translateY(-3px);transition:transform .4s}
.faq details[open] summary:after{transform:rotate(-135deg) translateY(-3px)}
.faq summary:hover .t{color:var(--apricot-text)}
.faq .t{transition:color .25s}
.faq .small{padding:0 48px 26px 0;margin-top:-6px}

/* 9 hello */
.hello{position:relative;padding:28vh var(--m) 20vh;text-align:center;overflow:hidden}
.hello .giant{color:var(--ink);font-size:clamp(56px,9vw,130px);white-space:normal;mix-blend-mode:normal}
.hello .giant .dot{color:var(--apricot)}
.hello .h1{margin-top:34px}
.hello .body{margin:12px auto 0}
.form{display:flex;gap:10px;justify-content:center;margin:42px auto 0;max-width:500px}
.form input{flex:1;min-width:0;padding:15px 24px;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:15px;letter-spacing:.04em}
.form input::placeholder{color:#B3A99E}
.form input:focus{outline:none;border-color:var(--apricot)}
.form button{padding:0 30px;border-radius:99px;background:var(--ink);color:var(--paper);font-weight:500;font-size:15px;letter-spacing:.12em;transition:background .25s}
.form button:hover{background:#4a4642}
.msg{margin-top:14px;min-height:22px;font-size:13px;color:var(--apricot-text)}
.form-note{margin-top:4px;font-size:12px;color:var(--mute)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form button:disabled{opacity:.6;cursor:default}

footer{padding:0 var(--m) 40px}
.foot{border-top:1px solid var(--line);padding-top:30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;letter-spacing:.06em;color:var(--mute)}
.foot img{height:22px}
.foot nav{display:flex;gap:28px}
.foot a:hover{color:var(--ink)}
/* ICP and public-security filing numbers: required on sites hosted in mainland China, both languages */
.legal{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:22px;font-size:12px;letter-spacing:.04em;color:var(--mute)}
.legal a:hover{color:var(--ink)}

.rv{opacity:0;transform:translateY(22px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

@media (max-width:1024px){
  :root{--m:32px;--gap:16px;--col2:var(--m)}
  .butler .lead,.night .txt,.privacy .copy,.life .head .left,.life .head .right{grid-column:1/-1}
  .butler .pic,.privacy .pic{grid-column:1/-1;margin-top:36px}
  .night .pic{grid-column:1/-1;margin-top:36px}
  .privacy .pic{max-width:520px}
  .privacy .copy{margin-top:40px}
  .abilities .it:nth-child(n){grid-column:1/-1;padding:0}
  .abilities-head{margin-left:var(--m)}
  .look .copy,.look .pic{grid-column:1/-1}
  .look .pic{margin-top:36px}
  .app .screens{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px;padding:0 var(--m)}
  .app .notes{flex-wrap:wrap;gap:32px 40px}
  .daily .it{grid-column:span 6}
  .daily .it:nth-child(3){grid-column:1/-1;max-width:50%}
  .life .card{grid-column:span 6;margin-bottom:32px}
  .life .head .right{margin-top:18px}
  .app .notes{gap:48px}
  .faq .left,.faq .list{grid-column:1/-1}
  .faq .list{margin-top:36px}
}
@media (max-width:640px){
  :root{--m:20px}
  body{font-size:16px}
  .small{font-size:14px}
  .t{font-size:18px}
  .pc{display:none}.mb{display:inline}
  .nav{padding:20px var(--m) 16px}
  .nav .links a:not(.cta):not(.lang){display:none}
  .nav .links{gap:18px}
  .nav .links .lang{padding-left:18px}
  .hero{height:auto;padding:96px var(--m) 0}
  .hero .photo,.hero .copy,.hero .giant{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none}
  .hero .photo{width:100%;max-width:none;aspect-ratio:4/5}
  .hero .product{position:relative;right:auto;bottom:auto;width:48%;margin:22px auto 0;animation:none}
  .hero .copy{margin-top:34px}
  .hero .giant{margin-top:22px;font-size:40px;white-space:normal;text-wrap:balance}
  .butler .giant{margin-left:calc(var(--m) - .06em)}
  .poem{padding:16vh var(--m)}
  .butler .giant{font-size:56px;margin-bottom:12px}
  .night{padding-top:20vh}
  .night .pic{margin-right:calc(-1 * var(--m))}
  .daily,.app,.life,.look{padding-top:18vh}
  .app .notes>div{max-width:none}
  .daily .it,.daily .it:nth-child(3){grid-column:1/-1;max-width:none;margin-bottom:40px}
  .privacy{margin-top:18vh;padding:12vh 0}
  .life .card{grid-column:span 6;margin-bottom:26px}
  .life .card .row{margin-top:14px;gap:8px}
  .app .notes{flex-direction:column;gap:18px}
  .fan.open .p1,.fan.open .p5{opacity:0}
  .fan.open .p2{transform:translateX(-50%) translateX(-50%) rotate(-5deg) translateY(4%)}
  .fan.open .p4{transform:translateX(-50%) translateX(50%) rotate(5deg) translateY(4%)}
  .form{flex-direction:column}.form button{padding:15px}
  .hello{padding:18vh var(--m) 14vh}
}
@media (max-width:640px){.faq{padding-top:18vh}.faq .small{padding-right:0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.rv,.poem .lines p{opacity:1;transform:none}.arch img,.frame img{--py:0px!important}}

/* English page: Latin wants tighter tracking and leading than the CJK-tuned defaults above */
html[lang="en"] body{letter-spacing:.005em;line-height:1.7}
html[lang="en"] .h1{font-size:clamp(26px,2.7vw,40px);line-height:1.3;letter-spacing:0}
html[lang="en"] .t{letter-spacing:0;line-height:1.45}
html[lang="en"] .small{line-height:1.7}
html[lang="en"] .nav .links{letter-spacing:.02em}
html[lang="en"] .poem .lines{line-height:1.9;letter-spacing:0}
html[lang="en"] .foot{letter-spacing:.02em}
html[lang="en"] .form input{letter-spacing:0}
html[lang="en"] .form button{letter-spacing:.06em}