/* Their First Art's page. Base type, buttons, framed screens and the chrome come from
   family.css and product.css; this sheet hangs the pictures. The three rooms are the app's own
   walls (src/theme/walls.ts in the Art repo): parchment and walnut, mist and painted blue-grey,
   sage and pale honey oak. Paper is the app's warm sheet with its tan cut lines. */
.product-art{--accent:#8C6240;--tint:#E8DCC6;
  --wall-art:#E8DCC6;--ink-art:#4A3A2A;--muted-art:#6B5A46;--wood-art-top:#976A45;--wood-art-bottom:#7F5737;--lip-art:#7B5333;--mat-art:#ECE2CE;
  --wall-cities:#D3DFE6;--ink-cities:#2E4654;--muted-cities:#466070;--wood-cities-top:#567285;--wood-cities-bottom:#466173;--lip-cities:#334A59;--mat-cities:#DDE3E6;
  --wall-nature:#D9E2D0;--ink-nature:#354B37;--muted-nature:#50654A;--wood-nature-top:#B09065;--wood-nature-bottom:#9C7D50;--lip-nature:#7A5D3A;--mat-nature:#E7E4D2;
  --paper:#F6EFE2;--paper-line:#C9B48F}
.product-art h2 em{color:var(--ink)}

/* ---- A picture frame, as the app draws one: a two-step moulding and a mat. Bands are a share
   of the frame's own width (container units), so every frame keeps the app's proportions. ---- */
.hung{margin:0;container-type:inline-size}
.frame{display:block;position:relative;background:linear-gradient(var(--wood-top,var(--wood-art-top)),var(--wood-bottom,var(--wood-art-bottom)));padding:var(--band,5.5cqi);border-radius:2px;box-shadow:inset 0 1px 0 rgba(255,236,210,.35),inset 0 -1px 0 rgba(40,25,10,.25),inset 0 0 0 1px rgba(255,236,210,.18),0 1px 2px rgba(50,35,20,.25),0 10px 22px -8px rgba(50,35,20,.45);text-decoration:none;color:inherit}
.frame::before{content:"";position:absolute;inset:calc(var(--band,5.5cqi) * .72);box-shadow:inset 0 0 0 calc(var(--band,5.5cqi) * .28) var(--lip,var(--lip-art));pointer-events:none}
.frame .mat{display:block;background:var(--mat,var(--mat-art));padding:var(--mat-band,6.5cqi);box-shadow:inset 0 0 0 1px rgba(60,40,20,.14)}
.frame .picture{display:block;position:relative;box-shadow:0 0 0 1.5px #FFFDF7,0 0 0 2.5px rgba(60,40,20,.12)}
.frame img{display:block;width:100%;height:auto}
.frame.cities{--wood-top:var(--wood-cities-top);--wood-bottom:var(--wood-cities-bottom);--lip:var(--lip-cities);--mat:var(--mat-cities)}
.frame.nature{--wood-top:var(--wood-nature-top);--wood-bottom:var(--wood-nature-bottom);--lip:var(--lip-nature);--mat:var(--mat-nature)}
a.frame{transition:transform var(--dur-fast,.12s) var(--ease),box-shadow var(--dur-base,.16s)}
a.frame:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,236,210,.35),inset 0 -1px 0 rgba(40,25,10,.25),0 2px 3px rgba(50,35,20,.25),0 22px 34px -12px rgba(50,35,20,.5)}
/* The app's paper: the warm sheet with a faint grain, tan cut lines, and a torn front edge that
   casts a shadow onto the paint. A tap lifts a piece. */
.paper{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:url(#fibre) drop-shadow(0 1px .5px rgba(60,40,20,.45)) drop-shadow(0 4px 6px rgba(60,40,20,.22));touch-action:manipulation}
.paper:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.paper path{fill:var(--paper);stroke:var(--paper-line);stroke-width:1.25px;vector-effect:non-scaling-stroke;stroke-linejoin:round;cursor:pointer;transform-box:fill-box;transform-origin:center;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.paper path.edge{transform:translateY(-1.5%) rotate(-.6deg)}
.paper.still path{cursor:default}
@media (hover:hover){.paper:not(.still) path:hover{fill:#FBF6EC}}
.paper path.gone{opacity:0;transform:scale(.88) translateY(-6%);pointer-events:none}
/* One piece on each live picture wiggles twice, so the paper says it can be touched. */
.hung.covered .paper path:first-of-type{animation:nudge 2.4s var(--ease) 1.6s 2}
@keyframes nudge{50%{transform:translateY(-4%) rotate(-2deg)}}
@keyframes breathe{50%{transform:scale(1.02)}}
.hung.covered.done .picture{animation:breathe .9s var(--ease)}
/* Wall labels, close to a museum card: the title in light italic, the maker in small sans. */
.hung .label{display:block;margin-top:9px;font:600 12.5px/1.4 var(--sans);letter-spacing:.02em;color:var(--ink-3);text-align:center}
.hung .label b{display:block;font:italic 500 16px/1.3 var(--serif);letter-spacing:0;color:var(--ink)}
.hung .label .more{display:none;margin-top:6px;font:800 13px/1.3 var(--sans);letter-spacing:0;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:1px}
.hung .label .more .arrow{font-size:1.2em}
.hung.covered .label{opacity:0;transform:translateY(4px);transition:opacity .5s var(--ease) .15s,transform .5s var(--ease) .15s}
.hung.covered.done .label{opacity:1;transform:none}
.hung.covered.done .label .more{display:inline-block}

/* ---- Hero copy: short, so the museum is the first thing seen ---- */
.art-hero{padding:0 0 16px}
.art-hero .wrap{max-width:1120px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px 48px;align-items:end}
/* Kicker and headline stack in the left column; the lede and button sit beside them. */
.product-art .kicker{grid-column:1;grid-row:1;align-self:end;margin:0;font:800 12.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.art-hero h1{grid-column:1;grid-row:2;align-self:start;font-size:clamp(38px,4.4vw,58px);line-height:1;letter-spacing:-.03em;max-width:20ch;margin:0}
.art-hero .hero-side{grid-column:2;grid-row:1/3;align-self:center}
.art-hero h1 em{display:block;color:var(--accent)}
.art-hero .lede{margin:0;max-width:44ch;font-size:clamp(16px,1.5vw,17.5px)}
.art-hero .product-actions{margin-top:14px}
.art-hero .free-line{margin-top:10px}

/* ---- The museum: three walls full width, pictures hung at the app's scale ---- */
.museum{margin:0}
.walls{display:grid;grid-template-columns:1.5fr 1fr 1fr}
.wall{position:relative;overflow:hidden;background-image:radial-gradient(rgba(120,95,55,.06) .5px,transparent .6px);background-size:7px 7px}
.wall.art{background-color:var(--wall-art);--room-ink:var(--ink-art);--room-muted:var(--muted-art)}
.wall.cities{background-color:var(--wall-cities);--room-ink:var(--ink-cities);--room-muted:var(--muted-cities)}
.wall.nature{background-color:var(--wall-nature);--room-ink:var(--ink-nature);--room-muted:var(--muted-nature)}
/* Room corners: the next wall turns away in a little shadow. */
.wall.cities,.wall.nature{box-shadow:inset 22px 0 28px -22px rgba(40,30,20,.16)}
.wall-inner{position:relative;height:clamp(360px,35vw,450px)}
/* A soft skirting at the floor, so the wall reads as a room rather than a colour block. */
.wall-inner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9%;background:linear-gradient(rgba(60,45,25,0),rgba(60,45,25,.07));pointer-events:none}
.wall .hung{position:absolute;margin:0;left:var(--l);top:var(--t);width:var(--w)}
.wall .hung .frame{--band:max(4px,5cqi);--mat-band:max(5px,6cqi)}
.wall .hung.small .frame{--band:max(4px,6cqi);--mat-band:max(5px,7cqi)}
.wall .hung .label{position:absolute;left:0;right:0;top:100%}
.wall .hung .label b,.wall .hung .label{color:var(--room-ink)}
/* The instruction sits under the live frame, in the wall's own ink. */
.wall-text{position:absolute;left:5%;top:77%;width:54%;margin:0;font:500 14px/1.4 var(--sans);color:var(--room-muted)}
.wall-text b{display:block;font:italic 700 clamp(19px,1.8vw,24px)/1.2 var(--serif);color:var(--room-ink);margin-bottom:3px}
.wall.art:has(.hung.done) .wall-text{display:none}
/* The room's label sits on the floor line under its wall, as in a museum. */
.plaque{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 5%;padding:13px 0 16px;text-decoration:none;color:var(--room-ink);font:600 13.5px/1.2 var(--sans);border-top:1px solid rgba(60,40,20,.14)}
.plaque b{font:700 15px/1 var(--serif);letter-spacing:.02em}
.plaque span{color:var(--room-muted);min-width:0}
.plaque .arrow{font-size:1.3em;line-height:1;color:var(--room-muted);margin-left:auto}
.plaque:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--room-muted)}
.product-art .museum-note{display:none;text-align:center;margin:0 auto 10px;padding:0 var(--gutter);font-size:14.5px;color:var(--ink-3);font-weight:600}
.wall-dots{display:none;justify-content:center;gap:4px;padding:8px 0 0}
.wall-dots button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.wall-dots button::after{content:"";position:absolute;left:8px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--hairline);transition:background var(--dur-base,.16s)}
.wall-dots button.on.art::after{background:#8C6240}.wall-dots button.on.cities::after{background:#4E6A7C}.wall-dots button.on.nature::after{background:#A8885C}
.wall-dots button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:50%}

/* ---- Three rooms: a short hang on the wall's own colour, standing on the museum floor ---- */
.rooms{padding:0}
.room{padding:48px 0;color:var(--room-ink)}
.room.art{background:var(--wall-art);--room-ink:var(--ink-art);--room-muted:var(--muted-art);--room-wood:var(--wood-art-bottom)}
.room.cities{background:var(--wall-cities);--room-ink:var(--ink-cities);--room-muted:var(--muted-cities);--room-wood:var(--wood-cities-bottom)}
.room.nature{background:var(--wall-nature);--room-ink:var(--ink-nature);--room-muted:var(--muted-nature);--room-wood:var(--wood-nature-bottom)}
.room .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:48px;align-items:center}
.room.flip .wrap{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr)}
.room.flip .wrap>.room-copy{order:2}
.room-copy .eyebrow{color:var(--room-muted)}
.room-copy h3{font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);line-height:1.06;letter-spacing:-.02em;color:var(--room-ink)}
.room-copy p{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--room-ink);max-width:42ch;text-wrap:pretty}
.room-copy p b{font-weight:800}
.room-copy .open{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:18px;font-weight:800;color:var(--room-ink);text-decoration:none;border-bottom:2px solid var(--room-wood);padding-bottom:1px}
.room-copy .open:hover{border-bottom-color:var(--room-ink)}
.room-copy .open .arrow{font-size:1.3em;line-height:1}
.room-hang{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:6%;align-items:center}
.room-hang .hung.big{width:100%;max-width:340px;justify-self:end}
.room.art .room-hang .hung.big{max-width:300px}
.room-hang .side{display:grid;gap:26px;align-content:center}
.room-hang .side .hung{width:100%;max-width:220px}
.room-hang .label,.room-hang .label b{color:var(--room-ink)}
.room-hang .label{color:var(--room-muted)}
.room.flip .room-hang .hung.big{justify-self:start;order:2}
.room.flip .room-hang{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.room.flip .room-hang .side{justify-items:end}

/* ---- What a tap does: one picture, four frames ---- */
.tap-band{padding-top:72px}
.tap-band .sec-head{max-width:760px}
.tap-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;align-items:start;max-width:1000px;margin:0 auto}
.tap-strip .label b{font-style:normal;font-weight:700}
.tap-band .glance-row{margin-top:64px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.tap-band .glance-head{background:none;box-shadow:none;padding:0}
.tap-band .glance{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.tap-band .glance>div{padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.tap-band .glance dd{font-weight:600;color:var(--ink-2)}
.glance-phone{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.glance-phone .screen.phone{width:min(100%,220px)}
.glance-phone figcaption{font-size:13px;font-weight:700;color:var(--ink-3)}

/* ---- The salon: the collection hung close on the parchment wall, oldest first, at the
   scales of a real salon hang, rows on a shared centre line ---- */
.salon{padding:72px 0;background:var(--wall-art);color:var(--ink-art)}
.salon .sec-head{margin-bottom:38px}
.salon .sec-head h2,.salon .sec-head .lede{color:var(--ink-art)}
.salon .sec-head .eyebrow{color:var(--muted-art)}
.salon-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 24px;align-items:center;justify-items:center}
.salon-wall .hung{width:calc(var(--s,.85) * 100%)}
.salon-wall .frame{--band:4.2cqi;--mat-band:7cqi}
.salon-wall .label{color:var(--muted-art)}
.salon-wall .label b{color:var(--ink-art)}
.product-art .gallery-note{text-align:center;font-size:14px;color:var(--muted-art);font-weight:600;margin-top:44px}

/* ---- The deep wall: one great picture on the family navy ---- */
.deep{padding:72px 0 64px;background:var(--ink);color:#F6EFE2}
.deep .wrap{display:flex;flex-direction:column;align-items:center;gap:36px}
.deep .hung.wave{width:min(100%,640px)}
.deep .hung .label{color:#C5D0D8}
.deep .hung .label b{color:#F6EFE2}
.deep .frame{box-shadow:0 2px 4px rgba(0,0,0,.4),0 30px 60px -20px rgba(0,0,0,.7)}
.product-art .deep .quote{margin:0;max-width:22ch;text-align:center;font:italic 700 clamp(26px,3.2vw,40px)/1.2 var(--serif);color:#F6EFE2;text-wrap:balance}

/* ---- Parents ask: a short coda, left-aligned to break the centred rhythm ---- */
.product-art .questions .sec-head{text-align:left;margin-left:0}
.product-art .questions .qa{max-width:1040px;margin:0}

/* ---- Closing: the page ends on the wall, with one more picture to uncover ---- */
.closing-wall{background:var(--wall-art);padding:80px 0;scroll-margin-top:16px}
.closing-wall .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.closing-wall .hung.last{width:min(100%,380px);justify-self:end}
.closing-wall .hung .label{color:var(--muted-art)}
.closing-wall .hung .label b{color:var(--ink-art)}
.closing-copy h2{color:var(--ink-art)}
.closing-copy p{margin-top:12px;font-size:17px;color:var(--muted-art)}
.closing-copy .product-actions{margin-top:20px}
.closing-copy .tip{margin-top:12px;text-align:left}
.product-art .resources{background:var(--wall-art);border-top:1px solid rgba(60,40,20,.12);border-bottom:1px solid rgba(60,40,20,.12)}

/* ---- Responsive ---- */
@media (max-width:1000px){
  .room .wrap{gap:32px}
  .salon-wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px}
  .tap-strip{gap:18px}
  /* The three walls become rooms to swipe between. Only each wall's first three frames hang. */
  .product-art .museum-note{display:block}
  .walls{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;gap:0}
  .walls::-webkit-scrollbar{display:none}
  .wall{flex:0 0 min(84vw,520px);scroll-snap-align:start}
  .wall-inner{height:clamp(300px,86vw,400px)}
  .wall .hung{left:var(--pl,var(--l));top:var(--pt,var(--t));width:var(--pw,var(--w))}
  .wall .hung.small:nth-of-type(n+4){display:none}
  .wall-text{left:5%;top:auto;bottom:4%;width:64%;font-size:13px}
  .wall-text b{font-size:18px}
  .wall-dots{display:flex}
}
@media (max-width:820px){
  /* The toy first: the walls come straight after the headline, the words after the walls. */
  .product-art main{display:flex;flex-direction:column}
  .product-art main>*{order:5}
  .product-art main>.crumb-wrap{display:none}
  .product-art main>.art-hero{display:contents}
  .art-hero .wrap{display:contents}
  .product-art .kicker{margin:14px auto 8px;padding:0 var(--gutter);width:min(1120px,100%)}
  .art-hero h1{margin:0 auto 14px;padding:0 var(--gutter);width:min(1120px,100%);max-width:none}
  .hero-side{order:3;padding:22px var(--gutter) 0;width:min(1120px,100%);margin:0 auto}
  .product-art main>.museum{order:2}
  .product-art main>.rooms{margin-top:26px}
  .tap-band .glance-row{grid-template-columns:minmax(0,1fr)}
  .glance-phone{display:none}
  .closing-wall .wrap{grid-template-columns:minmax(0,1fr);gap:28px;text-align:center}
  .closing-wall .hung.last{justify-self:center;width:min(70vw,300px)}
  .closing-copy .product-actions{align-items:center}
  .closing-copy .tip{text-align:center}
  .salon,.tap-band{padding-top:56px}
  .deep{padding:56px 0 48px}
}
@media (max-width:700px){
  .room .wrap,.room.flip .wrap{grid-template-columns:minmax(0,1fr);gap:26px}
  .room.flip .wrap>.room-copy{order:0}
  .room-copy p{max-width:58ch}
  .room-hang,.room.flip .room-hang{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:6%}
  .room-hang .hung.big,.room.flip .room-hang .hung.big,.room.art .room-hang .hung.big{max-width:360px;justify-self:center;order:0}
  .room.flip .room-hang .side{justify-items:start}
  .room-hang .side .hung{max-width:240px}
}
@media (max-width:559px){
  .art-hero h1{font-size:38px}
  .hero-side .product-actions,.hero-side .product-actions .btn-lg{width:100%}
  .wall-inner{height:clamp(280px,80vw,360px)}
  .room{padding:40px 0}
  .room-hang,.room.flip .room-hang{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:5%}
  .room-hang .hung.big,.room.flip .room-hang .hung.big,.room.art .room-hang .hung.big{max-width:none}
  .room-hang .side{gap:14px}
  .room-hang .side .hung{max-width:none}
  .tap-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
  /* Twelve works on a phone; the rest hang in the app. */
  .salon-wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;align-items:end}
  .salon-wall .hung:nth-child(n+13){display:none}
  .salon-wall .hung{width:calc(max(var(--s,.85),.78) * 100%)}
  .salon-wall .hung .label{font-size:12px}
  .salon-wall .hung .label b{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .paper path,.hung.covered .label,a.frame{transition:none}
  .paper path.gone{transform:none}
  a.frame:hover{transform:none}
  .hung.covered .paper path:first-of-type,.hung.covered.done .picture{animation:none}
}