/* A real invitation, with readable choices in the same quiet paper room. */
.hero .hero-copy{position:relative}

.hero .hero-stage,.hero .hero-stage:has(.hero-main.is-live){height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;overflow:visible;padding:30px 23px 22px;background:transparent;border:1px solid transparent;border-radius:20px}
.hero .hero-stage::before{display:none}
.hero .hero-stage-top{display:none}
.hero .hero-main,.hero .hero-main.is-live{position:relative;left:auto;top:auto;transform:none;width:min(100% - 24px,280px);margin:0 auto}
.hero .hero-main.is-live .hero-live-toolbar{position:relative;top:auto;inset-inline:auto;margin:9px 0 0;justify-content:space-between;gap:8px;min-height:44px;line-height:1.6;font-size:10px;direction:inherit}
.hero .hero-phone-controls,.hero .hero-stage:has(.hero-main.is-live) .hero-phone-controls{position:relative;inset:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:390px;margin:24px auto 0;direction:inherit}
.hero .hero-work-dot{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-width:0;width:100%;min-height:102px;padding:11px 7px 10px;border:1px solid var(--theme-rule,#d0bcb3);background:var(--theme-surface,#faf7f2);border-radius:8px;color:var(--theme-muted,#604047);font-size:12px;line-height:1.5;text-align:center;position:relative}
.hero .hero-work-dot>img{width:31px;height:49px;object-fit:cover;object-position:top;border-radius:2px;box-shadow:0 2px 4px var(--theme-shadow-a26,#3c271e26)}
.hero .hero-work-dot .hero-work-name{display:block;font:500 12px/1.5 var(--body);white-space:normal;overflow-wrap:normal}
html[lang=en] .hero .hero-work-dot .hero-work-name{font:500 11px/1.5 var(--latin)}
.hero .hero-work-dot.selected{border:1px solid var(--theme-accent,#60212c);box-shadow:inset 0 -3px var(--theme-shadow,#60212c);background:var(--theme-surface,#fffdfa);color:var(--theme-accent,#60212c)}
.hero .hero-enlarge{grid-column:1/-1;justify-self:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;height:auto;width:auto;margin:0;padding:9px 15px;border:0;border-bottom:1px solid var(--theme-rule,#ac8588);border-radius:0;background:none;font-size:12px;color:var(--theme-accent,#60212c)}
.hero .hero-device-note{position:static;margin:12px 0 0;direction:inherit;font-size:10px;line-height:1.6;text-align:center;color:var(--theme-muted,#725b5d);display:block}
.hero .hero-stage:has(.hero-main.is-live) .hero-device-note{display:none}
@media(min-width:761px) and (max-width:1100px){.hero .hero-stage{padding:25px 15px 18px}.hero .hero-main,.hero .hero-main.is-live{width:min(100% - 22px,256px)}.hero .hero-phone-controls{gap:7px}.hero .hero-work-dot .hero-work-name{font-size:11px}html[lang=en] .hero .hero-work-dot .hero-work-name{font-size:10px}}
@media(max-width:760px){.hero .hero-stage,.hero .hero-stage:has(.hero-main.is-live){padding:25px 14px 17px;border-radius:15px}.hero .hero-main,.hero .hero-main.is-live{width:min(100% - 24px,264px)}.hero .hero-phone-controls{margin-top:23px;gap:8px}.hero .hero-work-dot{min-height:103px;padding:10px 6px}.hero .hero-work-dot>img{width:30px;height:47px}.hero .hero-work-dot .hero-work-name{font-size:12px}.hero .hero-enlarge{font-size:12px;min-height:44px}.hero .hero-device-note{font-size:10px}}
@media(max-width:360px){.hero .hero-stage,.hero .hero-stage:has(.hero-main.is-live){padding:22px 12px 15px}.hero .hero-phone-controls{gap:6px}.hero .hero-work-dot{padding-inline:4px;min-height:108px}.hero .hero-work-dot .hero-work-name{font-size:11px}html[lang=en] .hero .hero-work-dot .hero-work-name{font-size:10px}}
@media(hover:hover) and (pointer:fine){.hero .hero-work-dot:hover{background:var(--theme-surface,#fffdfa);border-color:var(--theme-rule,#8d5e64)}.hero .hero-enlarge:hover{color:var(--theme-accent,#481821);background:transparent;border-color:var(--theme-accent,#60212c)}}
/* Owner refinement: a shorter laptop preview with one compact selector row. */
@media(min-width:761px){
 .hero .hero-stage,.hero .hero-stage:has(.hero-main.is-live){padding:20px 23px 18px}
 .hero .hero-main,.hero .hero-main.is-live{width:min(100% - 24px,240px)}
 .hero .hero-phone-controls,.hero .hero-stage:has(.hero-main.is-live) .hero-phone-controls{margin-top:16px;gap:8px}
 .hero .hero-work-dot{flex-direction:row;align-items:center;justify-content:center;gap:8px;min-height:62px;padding:9px 8px}
 .hero .hero-work-dot>img{width:23px;height:38px;flex:none}
 .hero .hero-work-dot .hero-work-name{min-width:0;overflow-wrap:anywhere}
 .hero .hero-enlarge{padding-block:7px}
 .hero .hero-device-note{margin-top:8px}
}
@media(min-width:761px) and (max-width:1100px){
 .hero .hero-stage,.hero .hero-stage:has(.hero-main.is-live){padding-inline:15px}
 .hero .hero-work-dot{gap:6px;padding-inline:6px}
}

/* The studio location belongs in the first impression, in readable type. */
.hero .hero-copy>.eyebrow{font-size:12px;line-height:1.7;letter-spacing:0}
html[lang=en] .hero .hero-copy>.eyebrow{font-size:11px;line-height:1.7;letter-spacing:.06em}
@media(max-width:760px){.hero .hero-copy>.eyebrow{font-size:11px}}

/* Give the opening chapter the full first view. Content can grow naturally on
   short windows, mobile and text zoom; the statement begins after this group. */
.hero-introduction{display:grid;grid-template-rows:1fr auto;min-height:calc(100svh - 88px);background:var(--paper);isolation:isolate}
@media(max-width:760px){.hero-introduction{min-height:calc(100svh - 73px)}}