/* ============================================================
   THE GALLERY — amber
   A long wall in the light of a museum at dinner. The one place in the
   house that is allowed a colour of its own, because it is the one place
   a person stands in front of a thing and decides. Warm plaster, a brass
   lamp over each work, a pool of light on the wall, dust in the beam, and
   a polished floor that gives the frame back.

   No rules between rooms: the wall does not stop.
   ============================================================ */
[data-tone="amber"]{
  --fg:#F6E4C4; --fg2:rgba(246,228,196,.74); --fg3:rgba(246,228,196,.46); --rule:rgba(246,228,196,.18);
  --halo:rgba(26,12,2,.72); --deb-hi:rgba(255,214,150,.2); --deb-lo:rgba(0,0,0,.7);
  --amb:#E9A04A; --amb-hi:#FFC86B; --amb-deep:#B8641E;
  --emb-strong:0 1px 0 rgba(255,214,150,.16), 0 -1px 0 rgba(0,0,0,.65), 0 3px 30px rgba(255,140,40,.26), 0 2px 6px rgba(20,8,0,.6);
  --emb-mid:0 1px 0 rgba(255,214,150,.10), 0 2px 12px rgba(20,8,0,.6);
  --emb-fine:0 1px 2px rgba(20,8,0,.7);
}
body[data-tone="amber"]{ background:#0D0703; }
.door-amber{ background:radial-gradient(90% 120% at 50% 0%, #2E1A0B 0%, #150C05 60%, #0D0703 100%); color:#F6E4C4; }
.door-amber .door-k, .door-amber .door-line{ color:rgba(246,228,196,.62); }

.gx{ position:relative; background:#0D0703; color:var(--fg); }
.gx-wall{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 54% at 50% 40%, rgba(255,176,80,.30) 0%, rgba(224,124,42,.16) 34%, rgba(120,60,14,.06) 60%, rgba(0,0,0,0) 78%),
    radial-gradient(120% 70% at 50% 108%, rgba(0,0,0,.66) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #0F0804 0%, #241409 44%, #2C190A 74%, #150B05 100%);
}
.gx-wall::after{ content:""; position:absolute; inset:0; background-image:var(--fibre); background-size:180px; mix-blend-mode:soft-light; opacity:.7; }

/* the door in */
.gx-open{ position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden; padding:calc(var(--nav-h) + 10vh) var(--gutter) clamp(60px,12vh,140px); }
.gx-open .gx-ghost{ top:46%; }
.gx-open-in{ position:relative; z-index:2; display:grid; gap:clamp(14px,2.6vh,26px); max-width:min(46em,100%); opacity:0; transform:translateY(24px); transition:opacity 1.4s var(--ease), transform 1.6s var(--swift); }
.gx-open-in.is-in{ opacity:1; transform:none; }
.gx-kicker{ color:var(--amb); font-size:9.5px; letter-spacing:.3em; margin:0; }
.gx-h{ font-size:clamp(64px,13vw,220px); line-height:.86; letter-spacing:-.025em; margin:0 0 0 -.03em; }
.gx-h2{ font-size:clamp(34px,5vw,84px); line-height:.95; letter-spacing:-.018em; margin:0; max-width:14em; }
.gx-p{ color:var(--fg2); max-width:40ch; margin:0; }
.gx-cue{ margin:8px 0 0; color:var(--fg3); font-size:9px; letter-spacing:.3em; }

/* the ghost: the work's own words, pressed into the plaster and lit from above */
.gx-ghost{ position:absolute; left:var(--gutter); right:var(--gutter); top:50%; transform:translateY(-50%); z-index:0; pointer-events:none; user-select:none;
  display:flex; flex-direction:column; gap:.04em; font-size:clamp(90px,17vw,300px); line-height:.82; letter-spacing:-.03em; text-transform:lowercase; color:rgba(255,196,110,.040);
  text-shadow:0 2px 1px rgba(255,214,150,.07), 0 -2px 2px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; }
.gx-ghost span:last-child{ text-align:right; }
.gx-ghost span{ transform:translateX(calc(var(--rake, 0)*-1.4vw)); }
.gx-ghost span:last-child{ transform:translateX(calc(var(--rake, 0)*1.9vw)); }

/* a room */
.gx-room{ position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:center; overflow:hidden; background:transparent; padding:calc(var(--nav-h) + 4vh) var(--gutter) 9vh; gap:0 clamp(24px,4vw,70px); }
.gx-room .gx-wall{ background:
    radial-gradient(42% 50% at 34% 44%, rgba(255,176,80,.34) 0%, rgba(224,124,42,.17) 38%, rgba(120,60,14,.05) 66%, rgba(0,0,0,0) 80%),
    radial-gradient(120% 60% at 40% 106%, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #0F0804 0%, #241409 40%, #2C190A 72%, #150B05 100%); }
.gx-stage{ position:relative; z-index:2; justify-self:center; padding-top:clamp(46px,8vh,90px); }
.gx-lamp{ position:absolute; left:50%; top:0; width:48%; transform:translateX(-50%); height:clamp(46px,8vh,90px); opacity:0; transition:opacity 1.4s var(--ease) .2s; z-index:3; }
.gx-lamp.is-in{ opacity:1; }
.gx-arm{ position:absolute; left:50%; bottom:22px; width:1.5px; height:60%; margin-left:-1px; background:linear-gradient(180deg, #5b3a18, #c89a4a); }
.gx-bar{ position:absolute; left:0; right:0; bottom:8px; height:14px; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg, #F2D08A 0%, #B98632 45%, #6A4514 100%); box-shadow:0 1px 0 rgba(255,236,190,.5) inset, 0 6px 10px rgba(0,0,0,.6); }
.gx-glow{ position:absolute; left:6%; right:6%; bottom:-4px; height:14px; background:#FFE2A6; border-radius:50%; filter:blur(7px); opacity:.95; box-shadow:0 0 44px 18px rgba(255,180,80,.55); }
.gx-cone{ position:absolute; left:14%; width:40%; top:calc(var(--nav-h) + 4vh + 60px); bottom:12%; pointer-events:none; z-index:1; overflow:hidden;
  -webkit-clip-path:polygon(36% 0, 64% 0, 100% 100%, 0 100%); clip-path:polygon(36% 0, 64% 0, 100% 100%, 0 100%);
  background:linear-gradient(180deg, rgba(255,196,110,.30) 0%, rgba(255,170,80,.10) 55%, rgba(255,150,60,0) 100%); mix-blend-mode:screen; }
.gx-cone i{ position:absolute; bottom:-6px; border-radius:50%; background:#FFE0A0; opacity:0; animation:gx-mote linear infinite; }
@keyframes gx-mote{ 0%{ transform:translate3d(0,0,0); opacity:0; } 12%{ opacity:.85; } 88%{ opacity:.5; } 100%{ transform:translate3d(14px,-72vh,0); opacity:0; } }
.gx-frame{ position:relative; padding:clamp(10px,1.1vw,16px); background:linear-gradient(135deg, #1B120A, #0A0603); opacity:0; transform:translateY(22px) scale(.985); transition:opacity 1.3s var(--ease), transform 1.6s var(--swift);
  box-shadow:inset 0 0 0 1px rgba(255,214,150,.18), inset 0 0 0 4px rgba(0,0,0,.6), 0 34px 70px -20px rgba(0,0,0,.85), 0 0 120px rgba(255,150,50,.12);
  -webkit-box-reflect:below 8px linear-gradient(transparent 62%, rgba(0,0,0,.34)); }
.gx-frame.is-in{ opacity:1; transform:none; }
.gx-mat{ padding:clamp(22px,3vw,48px); background:#EBE1CB var(--paper-photo, none); background-size:760px; background-blend-mode:multiply; box-shadow:inset 0 0 0 1px rgba(60,40,10,.14), inset 0 2px 8px rgba(60,40,10,.22); display:grid; place-items:center; }
.gx-mat .gw-hung{ margin:0; }

/* the card beside it */
.gx-card{ position:relative; z-index:3; display:grid; gap:clamp(10px,1.6vh,16px); align-content:center; max-width:32em; opacity:0; transform:translateY(26px); transition:opacity 1.2s var(--ease) .15s, transform 1.5s var(--swift) .15s; }
.gx-card.is-in{ opacity:1; transform:none; }
.gx-card > *{ margin:0; }
.gx-no{ color:var(--amb); font-size:9.5px; letter-spacing:.28em; }
.gx-title{ font-size:clamp(40px,5vw,84px); line-height:.9; letter-spacing:-.02em; margin-left:-.03em !important; }
.gx-line{ color:var(--fg2); font-size:10px; letter-spacing:.2em; }
.gx-dim{ color:var(--fg3); font-size:9.5px; letter-spacing:.2em; }
.gx-verdict{ font-size:clamp(22px,2.3vw,34px); line-height:1.08; font-style:italic; color:#FFDFA8; margin-top:6px !important; max-width:16em; }
.gx-facts{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; row-gap:6px; font-size:9.5px; letter-spacing:.18em; color:var(--fg2); }
.gx-facts dt{ color:var(--fg3); font-size:8.5px; letter-spacing:.22em; } .gx-facts dd{ margin:0; color:var(--fg); }
.gx-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:clamp(10px,2vh,22px) !important; }
.gx-btn{ position:relative; display:inline-flex; align-items:center; gap:14px; padding:16px 22px 15px; font-size:10.5px; letter-spacing:.26em; color:#1A0C02; overflow:hidden;
  background:linear-gradient(180deg, #F7B85A 0%, #E9A04A 55%, #C97A28 100%); box-shadow:0 0 0 1px rgba(255,220,150,.5) inset, 0 10px 30px -6px rgba(233,140,40,.55), 0 0 42px rgba(255,160,60,.22); text-shadow:0 1px 0 rgba(255,236,190,.55);
  transition:transform .5s var(--swift), box-shadow .5s var(--ease); }
.gx-btn i{ font-style:normal; font-size:15px; transition:transform .5s var(--swift); }
.gx-btn::after{ content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,246,220,.6), rgba(255,255,255,0)); transform:skewX(-18deg); transition:left .9s var(--swift); }
.gx-btn:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,230,170,.7) inset, 0 16px 40px -6px rgba(233,140,40,.7), 0 0 60px rgba(255,160,60,.34); }
.gx-btn:hover i{ transform:translateX(6px); } .gx-btn:hover::after{ left:120%; }
.gx-btn-big{ padding:22px 34px 21px; font-size:12px; }
.gx-alt{ color:var(--fg2); font-size:9.5px; letter-spacing:.22em; padding:6px 0 5px; border-bottom:1px solid rgba(246,228,196,.24); transition:color .3s, border-color .3s; }
.gx-alt:hover, .gx-alt:focus-visible{ color:#FFE3B0; border-bottom-color:var(--amb); }
.gx-certwrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .8s var(--swift); }
.gx-certwrap.is-open{ grid-template-rows:1fr; }
.gx-certin{ min-height:0; overflow:hidden; }
.gx-certwrap.is-open .gx-certin{ padding:14px 0 6px; }
.gx-certin .cert{ width:min(320px,100%); transform:rotate(-1.4deg); }
.gx-travels{ color:var(--fg3); font-size:8.5px; letter-spacing:.22em; line-height:1.9; max-width:40ch; margin-top:6px !important; }
.gx-sides{ position:absolute; inset:0; pointer-events:none; z-index:4; }
.gx-side{ position:absolute; top:50%; pointer-events:auto; color:var(--fg3); font-size:9px; letter-spacing:.26em; padding:14px 8px; }
.gx-side:hover{ color:var(--fg); }
.gx-side.is-prev{ left:6px; writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg); } .gx-side.is-next{ right:6px; writing-mode:vertical-rl; transform:translateY(-50%); }
.gx-room .gw-label{ display:none; }
.gx-room.is-single{ min-height:88vh; }
.gx-room.is-single .gw-label{ display:block; position:relative; left:auto; bottom:auto; width:auto; z-index:3; color:var(--fg); }
.gx-room.is-single .gw-label a{ color:var(--amb); }

/* what comes with a work */
.gx-recv{ position:relative; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(30px,6vw,110px); align-items:center; padding:clamp(80px,16vh,180px) var(--gutter); overflow:hidden;
  background:linear-gradient(180deg, #150B05 0%, #22130A 50%, #150B05 100%); }
.gx-recv-in, .gx-recv-art, .gx-how, .gx-close{ opacity:0; transform:translateY(28px); transition:opacity 1.2s var(--ease), transform 1.5s var(--swift); }
.gx-recv-in.is-in, .gx-recv-art.is-in, .gx-how.is-in, .gx-close.is-in{ opacity:1; transform:none; }
.gx-recv-in{ display:grid; gap:clamp(20px,4vh,40px); }
.gx-recv-list{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(20px,3.4vh,34px); }
.gx-recv-list li{ display:grid; grid-template-columns:3em minmax(0,1fr); column-gap:16px; row-gap:4px; align-items:baseline; }
.gx-recv-list .mono{ color:var(--amb); grid-row:1 / span 2; font-size:9.5px; letter-spacing:.24em; }
.gx-recv-list h3, .gx-steps h3{ font-size:clamp(24px,2.6vw,38px); line-height:1; margin:0; letter-spacing:-.012em; text-shadow:var(--emb-strong); }
.gx-recv-list p, .gx-steps p{ margin:0; color:var(--fg2); max-width:44ch; font-size:16px; }
.gx-recv-art{ justify-self:center; }
.gx-recv-art .cert{ width:min(360px,80vw); transform:rotate(2.4deg); }
.gx-how{ position:relative; padding:clamp(60px,12vh,140px) var(--gutter); background:#150B05; display:grid; gap:clamp(24px,5vh,50px); }
.gx-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(20px,3vw,50px); }
.gx-steps li{ display:grid; gap:8px; align-content:start; }
.gx-steps .mono{ color:var(--amb); font-size:9.5px; letter-spacing:.24em; }
.gx-after{ padding:clamp(60px,12vh,140px) var(--gutter) clamp(90px,16vh,180px); background:linear-gradient(180deg, #150B05 0%, #0D0703 100%); }
.gx-kicker-2{ margin-top:12vh !important; }
.gx-placed{ margin-top:4vh; }
.gx-plc{ border-top:0 !important; color:var(--fg) !important; }
.gx-plc .gw-plc-name{ color:var(--fg) !important; } .gx-plc .mono{ color:var(--fg2) !important; }
.gx-after .gw-plc-link{ color:var(--amb) !important; border-bottom-color:rgba(233,160,74,.4) !important; }
.gx-edition{ border-bottom:0 !important; border-top:0 !important; }
.gx-edition .display{ color:var(--fg); } .gx-edition .mono{ color:var(--fg2); }
.gx-close{ display:grid; gap:clamp(20px,4vh,36px); justify-items:start; margin-top:14vh; }
.gx-comm{ color:var(--fg3); font-size:9px; letter-spacing:.24em; margin:0; }
.gx-none{ min-height:60vh; display:grid; place-items:center; }
.gx-flow{ background:linear-gradient(180deg, #150B05, #0D0703); color:var(--fg); }
.gx-flow .reading, .gx-flow .mono, .gx-flow label{ color:var(--fg2); }
.gx-flow .rule-button{ border-color:rgba(246,228,196,.35); color:var(--fg); } .gx-flow .rule-button:hover{ border-color:var(--amb); color:#FFE3B0; }
.gx-flow input, .gx-flow textarea{ background:rgba(255,220,160,.05); border-color:rgba(246,228,196,.3); color:var(--fg); }
@media (max-width:1000px){
  .gx-room{ grid-template-columns:1fr; gap:34px; padding-top:calc(var(--nav-h) + 3vh); }
  .gx-cone{ left:10%; width:80%; } .gx-card{ max-width:none; } .gx-recv{ grid-template-columns:1fr; }
  .gx-steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){ .gx-steps{ grid-template-columns:1fr; } .gx-frame{ -webkit-box-reflect:none; } }
@media (prefers-reduced-motion:reduce){ .gx-cone i{ animation:none; } }
.gx-room, .gx-open, .gx-recv, .gx-how, .gx-after{ color:var(--fg); }
.gx-cone{ filter:blur(9px); }
.gx-note{ font-size:15px; line-height:1.55; color:var(--fg2); max-width:34ch; font-style:italic; }
.gx-note{ font-size:15px; line-height:1.55; color:var(--fg2); max-width:34ch; font-style:italic; }
[data-tone="amber"]{ --fg2:rgba(246,228,196,.82); --fg3:rgba(246,228,196,.64); }