/* Hero experiment. Dark chapter, cream and Geist are existing Amia design tokens. */
.hero.hero-loom {
  --loom-background:#252e28;
  background:var(--loom-background);
  color:var(--cream);
  height:auto;
  /* Fill the window, but let the content establish a larger minimum when needed. */
  min-height:max(760px,calc(100svh - 32px));
  min-height:max(760px,calc(100dvh - 32px));
  display:flex;
  flex-direction:column;
  max-height:none;
  margin:16px 16px 0;
  border-radius:20px;
  padding-top:106px;
  overflow:hidden;
}
.loom-stage {flex:2 0 auto;position:relative;height:clamp(300px,44svh,440px);width:100%;background:var(--loom-background);cursor:grab;touch-action:pan-y pinch-zoom;user-select:none;overflow:hidden}
.loom-stage.is-dragging{cursor:grabbing}
.loom-stage canvas {position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none}
.loom-stage.loom-ready canvas {opacity:1}
.loom-fallback {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:26px;overflow:hidden;pointer-events:none}
.loom-fallback img{flex:0 0 auto;width:auto;height:82%;max-height:370px;aspect-ratio:3/4;object-fit:cover;border-radius:12px}
.loom-fallback img:nth-child(n+4){display:none}
.loom-ready .loom-fallback{visibility:hidden}
.hero-loom .hero-content {flex:1 0 auto;display:grid;grid-template-columns:1.5fr 1fr;align-items:center;gap:7%;height:auto;padding-top:22px;padding-bottom:40px;width:100%}
.hero-loom h1{font-size:clamp(62px,6.3vw,104px);line-height:1;letter-spacing:-.062em;max-width:none;animation:none}
.hero-loom h1>span{white-space:nowrap}
.hero-loom .hero-bottom {display:flex;flex-direction:column;align-items:flex-start;gap:22px;margin:0;animation:none}
.hero-loom .hero-description{font-size:clamp(16px,1.35vw,19px);line-height:1.65;max-width:370px;margin:0;color:#d2d7cf}
.hero-loom .button{min-height:54px;padding:14px 23px;border-radius:999px;font-size:14px;gap:35px}
.hero-loom .loom-foot{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;min-height:72px;padding-block:14px 22px;width:100%}
.hero-loom .loom-foot::before{content:'';position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:#f6f4f12b}
.hero-loom .hero-note{font-size:12px;line-height:1.6;color:#c6ccc3;min-width:0;margin:0;padding:0;border:0;display:block}
.hero-loom .hero-note span{margin-left:5px}
.loom-toggle{display:inline-flex;align-items:center;gap:9px;min-height:44px;min-width:82px;border:0;background:transparent;padding:8px 0 8px 12px;color:#d2d7cf;font-size:12px}
.loom-toggle:hover{color:#fff}
.loom-toggle-icon{display:block;width:10px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor}
.loom-toggle[aria-pressed=true] .loom-toggle-icon{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor;border-right:0}
.hero-loom :is(a,button):focus-visible{outline-color:#b0bfa7;outline-offset:5px}
@media(min-width:1600px){.hero-loom .hero-content{padding-top:30px;padding-bottom:48px}}
@media(max-width:1000px){
 .hero-loom .hero-content{grid-template-columns:1.35fr 1fr;gap:5%}
 .hero-loom h1{font-size:clamp(49px,6.3vw,64px)}
 .hero-loom .hero-description{font-size:16px}
}
@media(max-width:700px){
 .hero.hero-loom{min-height:max(760px,calc(100svh - 20px));min-height:max(760px,calc(100dvh - 20px));margin:10px 10px 0;border-radius:16px;padding-top:82px}
 .loom-stage{height:clamp(270px,36svh,310px)}
 .loom-fallback{gap:22px}
 .hero-loom .hero-content{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:22px;padding:15px 24px 30px}
 .hero-loom h1{font-size:clamp(40px,10.5vw,68px);line-height:1.025;letter-spacing:-.062em}
 .hero-loom .hero-bottom{gap:22px}
 .hero-loom .hero-description{font-size:16px;line-height:1.6;max-width:400px}
 .hero-loom .button{min-height:52px;font-size:14px;padding:13px 22px;gap:36px}
 .hero-loom .loom-foot{padding:12px 24px 18px;min-height:76px;gap:12px}
 .hero-loom .loom-foot::before{left:24px;right:24px}
 .hero-loom .hero-note{font-size:11px}
 .hero-loom .hero-note span{display:block;margin:0}
 .loom-toggle{font-size:11px;min-width:73px}
}
@media(max-width:370px){
 .hero-loom .hero-content{padding-inline:20px}
 .hero-loom h1{font-size:10.4vw}
 .hero-loom .hero-description{font-size:15px}
 .hero-loom .loom-foot{padding-inline:20px}
 .hero-loom .loom-foot::before{left:20px;right:20px}
}
@media(prefers-reduced-motion:reduce){.loom-stage{cursor:default}}
/* The legacy hero entrance has higher specificity; keep the reading area still. */
.ready .hero-loom h1,.ready .hero-loom .hero-bottom{animation:none}

/* Reversible global photo grade: soften yellow/amber while retaining warm skin.
   Apply only to the photographic layers, including the no-WebGL fallback. */
.loom-stage canvas,.loom-fallback img{filter:saturate(.68) hue-rotate(-6deg) brightness(1.04)}

/* Match the per-portrait texture orientation in the static fallback. */
.loom-fallback img[data-flip-x]{transform:scaleX(-1)}