/* Artwork pages in 7 chapters (app/components/lunaris/ArtworkChapters.tsx) – phone first, desktop layouts at the end */
.sm{display:block;background:#1a0b10;color:#f6ebe2;font-family:'Cormorant','Times New Roman',Georgia,serif;font-weight:500;overflow-x:clip}

.sm-ch{padding:0;position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.sm-ch__bg{position:absolute;inset:-7% 0;z-index:-1;background:#1a0b10 center/cover no-repeat;will-change:transform}
.sm-ch__bg video{width:100%;height:100%;object-fit:cover;display:block}
.sm-ch__inner{position:relative;flex:1;padding:clamp(26px,7vw,40px) 22px 56px;display:flex;flex-direction:column}
.sm-ch__inner>div,.sm-ch__inner>footer{width:100%}

/* type */
.sm-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.sm-word>span{display:inline-block}
.sm-kicker{margin:0;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:#e4c69a}
.sm-kicker--center{text-align:center}
.sm-h1{margin:14px 0 0;font-weight:400;font-size:clamp(34px,10vw,44px);line-height:1.05;text-align:center;color:#fbefe6}
.sm-h2{margin:16px 0 0;font-weight:400;font-size:clamp(30px,8.6vw,38px);line-height:1.1;color:#fbefe6}
.sm-h3{margin:22px 0 12px;font-weight:400;font-size:clamp(26px,7.4vw,32px);color:#fbefe6}
.sm-h4{margin:0 0 10px;font-weight:400;font-size:19px;color:#fbefe6}
.sm-sub{margin:10px 0 0;font-style:italic;font-size:15.5px;line-height:1.45;color:#e4c69a}
.sm-sub--center{text-align:center;max-width:22em;margin-inline:auto}
.sm-note{margin:0;font-size:13px;line-height:1.5;color:rgba(246,235,226,.78)}
.sm-rule{border:0;height:1px;margin:0 0 22px;background:rgba(228,198,154,.55);transform-origin:left center}
.sm-rule--soft{margin:24px 0;background:rgba(246,235,226,.18)}
.sm-center{display:flex;flex-direction:column;align-items:center;text-align:center}

/* hero */
.sm-top{display:flex;justify-content:space-between;align-items:flex-start}
.sm-logo{display:grid;justify-items:center;color:#f4e3cc;text-decoration:none;line-height:1}
.sm-logo svg{transform:rotate(-30deg);margin-bottom:3px;color:#f2d7a4}
.sm-logo strong{font-weight:400;font-size:21px;letter-spacing:.24em}
.sm-logo small{font-size:8px;letter-spacing:.3em;margin-top:4px;color:#e4c69a}
.sm-artist{font-style:italic;font-size:15px;color:#f0d9b5;text-decoration:none;margin-top:12px}
.sm-hero__text{margin-top:clamp(22px,7vw,40px)}
.sm-hero__art{margin-top:clamp(18px,5vw,26px)}
.sm-frame{position:relative;padding:5px;background:linear-gradient(135deg,#b8893a,#f0d589 28%,#a87a2e 55%,#e9c977 80%,#9b6d26);box-shadow:0 18px 40px rgba(20,4,8,.55)}
/* border-box: the 7px mat is part of the width – otherwise a full-width painting sticks out of its frame by 14px */
.sm-frame>.la-art{box-sizing:border-box;border:7px solid #f3ece0;outline:1px solid rgba(120,80,30,.6)}
.sm-frame--wall{margin:26px 0 0;padding:7px;box-shadow:0 22px 40px rgba(70,50,30,.28)}
.sm-zoom img{transform:scale(var(--z,1));transform-origin:var(--spot,50% 50%)}
.sm-zoom--live img{transition:transform 1s cubic-bezier(.22,1,.36,1),transform-origin 1s cubic-bezier(.22,1,.36,1)}
.sm-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
.sm-thumb{padding:0;border:2px solid rgba(201,166,110,.75);background:none;cursor:pointer;opacity:.82;transition:opacity .4s,border-color .4s}
.sm-thumb.is-active{opacity:1;border-color:#f0d589}
.sm-thumb .la-art{display:block}
.sm-hero__buy{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;align-items:center}
.sm-price{margin:0 0 18px;font-size:19px;color:#fbefe6}
.sm-price--big{font-size:24px;margin:20px 0 4px}
.sm-fine{margin:0 0 20px;font-size:11px;color:#7b6c66}

/* buttons */
.sm-btn,.sm-btn-wrap button,.sm-btn-wrap a{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 26px;border:0;border-radius:1px;font:inherit;font-size:15px;cursor:pointer;text-decoration:none;transition:transform .3s,filter .3s}
.sm-btn:active,.sm-btn-wrap button:active{transform:scale(.97)}
.sm-btn-wrap--gold button,.sm-btn-wrap--gold a{background:linear-gradient(180deg,#e2cb98,#cfb47e);color:#2a1418;min-height:52px;padding:0 36px;font-size:17px}
.sm-btn-wrap--plum button,.sm-btn-wrap--plum a{background:#4a2326;color:#f6e9e0;font-size:13px}
.sm-btn--navy{background:#26384a;color:#eef1f4;font-size:13px}
.sm-btn--ghost{background:rgba(40,22,18,.55);color:#f2e1cc;border:1px solid rgba(228,198,154,.55);font-size:13px}

/* 02 */
.sm-fig{margin:28px 0 0}
.sm-fig figcaption{margin-top:12px;font-size:10px}
.sm-bordered{border:3px solid #b9a483}
.sm-bordered--gold{border:2px solid #d6b98e}
.sm-ch--2 .sm-rule:not(:first-child){margin-top:30px}
.sm-table{margin:0}
.sm-table>div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(246,235,226,.22);font-size:16px}
.sm-table dt{color:#e4c69a}
.sm-table dd{margin:0;color:#fbefe6}

/* 03 */
.sm-pair{display:grid;grid-template-columns:1.12fr 1fr;gap:16px;align-items:start;margin-top:28px}
.sm-pair--rev{grid-template-columns:1fr 1.12fr;align-items:center;margin-top:0}
.sm-pair>div:first-child+div h3{margin-top:12px}

/* light chapters */
.sm-light{color:#2b2323}
.sm-light .sm-h2,.sm-light .sm-h3{color:#2b2525}
.sm-light .sm-kicker{color:#7d6f66}
.sm-light .sm-sub{color:#6c5f58}
.sm-light .sm-rule{background:rgba(70,55,45,.35)}
.sm-light .sm-price{color:#2b2525}
.sm-caption{margin:22px 0 0;font-style:italic;font-size:15px;color:#3a302e}

/* cards */
.sm-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:32px 0 44px;align-items:start}
.sm-cards>div:nth-child(2){margin-top:22px}
.sm-card{display:block;padding:5px 5px 12px;background:#faf7f2;color:#2b2525;text-decoration:none;box-shadow:0 10px 26px rgba(80,60,40,.14)}
.sm-card__img{display:block;aspect-ratio:.82;overflow:hidden;background:#cfd8de}
.sm-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.sm-card:active .sm-card__img img{transform:scale(1.05)}
.sm-card strong{display:block;margin:10px 4px 2px;font-weight:400;font-size:13.5px;line-height:1.25}
.sm-card em{display:block;margin:0 4px;font-size:10.5px;color:#8a7d73}
.sm-cards--dark .sm-card{background:none;padding:0;box-shadow:none;color:#fbefe6}
.sm-cards--dark .sm-card__img{border:3px solid #d8b47a;box-shadow:0 16px 34px rgba(0,0,0,.5)}
.sm-cards--dark .sm-card em{color:#d9bf98}

/* 07 footer */
.sm-foot .sm-ch__inner{justify-content:flex-start;padding-top:40px}
.sm-foot__brand{display:grid;justify-items:center;margin-top:10px;color:#f4e3cc}
.sm-foot__brand svg{transform:rotate(-30deg);margin-bottom:12px}
.sm-foot__brand strong{font-weight:400;font-size:27px;letter-spacing:.3em;padding-left:.3em}
.sm-foot__brand small{font-size:8.5px;letter-spacing:.32em;margin-top:8px;color:#bfa889}
.sm-foot__claim{margin:26px 0 26px;text-align:center;font-style:italic;font-size:19px;color:#f8ebde}
.sm-foot__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:4px 10px 30px}
.sm-foot__cols p{margin:0 0 12px;font-size:16px;color:#e8d3b6}
.sm-foot__cols a{display:block;margin:0 0 10px;font-size:13px;color:#f6ebe2;text-decoration:none}
.sm-foot__legal{text-align:center;font-size:12px;color:#d8c7b4}
.sm-foot__legal p{margin:0 0 10px}
.sm-foot__legal a{color:#bfae9b;text-decoration:none;font-size:11px}
.sm-totop{margin-top:24px;background:none;border:0;color:#bfa889;font:inherit;font-size:10px;letter-spacing:.28em;cursor:pointer}

@media (prefers-reduced-motion:reduce){.sm-ch__bg video{display:none}}

/* ---------- AI-generated still backgrounds, brought to life (ArtworkChapters.tsx) ---------- */
.sm-ch__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
/* readability veil in the artwork's own tone + a slow wandering light */
.sm-ch__light{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at var(--lx,30%) var(--ly,25%),rgba(255,228,180,.16),transparent 70%),
    linear-gradient(180deg,color-mix(in srgb,var(--sm-tone,#1a0b10) 45%,transparent),color-mix(in srgb,var(--sm-tone,#1a0b10) 18%,transparent) 45%,color-mix(in srgb,var(--sm-tone,#1a0b10) 55%,transparent));
  animation:sm-light 22s ease-in-out infinite alternate}
.sm-light .sm-ch__light{background:
    radial-gradient(60% 40% at var(--lx,30%) var(--ly,25%),rgba(255,255,255,.35),transparent 70%),
    linear-gradient(180deg,rgba(250,246,240,.55),rgba(250,246,240,.25) 45%,rgba(250,246,240,.6))}
@property --lx{syntax:'<percentage>';inherits:false;initial-value:30%}
@property --ly{syntax:'<percentage>';inherits:false;initial-value:25%}
@keyframes sm-light{0%{--lx:22%;--ly:18%}50%{--lx:72%;--ly:38%}100%{--lx:40%;--ly:70%}}
/* floating dust motes */
.sm-ch__dust{position:absolute;inset:-10% 0;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,236,200,.9),transparent 60%),
    radial-gradient(1px 1px at 68% 14%,rgba(255,236,200,.8),transparent 60%),
    radial-gradient(2px 2px at 82% 58%,rgba(255,236,200,.7),transparent 60%),
    radial-gradient(1px 1px at 34% 76%,rgba(255,236,200,.85),transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 44%,rgba(255,236,200,.6),transparent 60%),
    radial-gradient(1px 1px at 90% 88%,rgba(255,236,200,.8),transparent 60%);
  background-size:100% 50%;animation:sm-dust 26s linear infinite}
.sm-light .sm-ch__dust{opacity:.25}
@keyframes sm-dust{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.sm-ch__light,.sm-ch__dust{animation:none}}

/* preview ribbon for unpublished atelier uploads */
.la-preview-note{position:fixed;left:50%;bottom:14px;z-index:9999;transform:translateX(-50%);margin:0;padding:8px 16px;background:#2b1a1d;color:#f3e3c8;font:13px/1.3 'Cormorant',Georgia,serif;letter-spacing:.06em;border:1px solid #c79a46;box-shadow:0 8px 24px rgba(0,0,0,.35);white-space:nowrap}

/* chapter whose background is still being painted (preview): the artwork's own tone + a soft shimmer */
.sm-ch__bg--empty{background:linear-gradient(165deg,color-mix(in srgb,var(--sm-tone,#2a1420) 85%,#fff 6%),color-mix(in srgb,var(--sm-tone,#2a1420) 70%,#000 40%))}
.sm-light .sm-ch__bg--empty{background:linear-gradient(165deg,#f6f1ea,#ece3d6)}
.sm-ch__bg--empty::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);background-size:240% 100%;animation:sm-shimmer 1.8s linear infinite}
@keyframes sm-shimmer{from{background-position:130% 0}to{background-position:-130% 0}}
.sm-ch__img{animation:sm-imgin 1.2s ease both}
@keyframes sm-imgin{from{opacity:0}to{opacity:1}}

/* ---------- /vorschau: the visitor's 7-chapter page ---------- */
.pv{min-height:100vh;background:#110a10;color:#f3e9e1;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.pv .sm{display:block!important}
.pv-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:rgba(17,10,16,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}
.pv-bar a{color:inherit;text-decoration:none}
.pv-bar__status{display:inline-flex;align-items:center;gap:8px;color:rgba(243,233,225,.8)}
.pv-bar__status i{width:8px;height:8px;border-radius:50%;background:#e3b45e;animation:at-pulse 1.4s ease-out infinite;box-shadow:0 0 0 0 rgba(227,180,94,.6)}
@keyframes at-pulse{to{box-shadow:0 0 0 8px rgba(227,180,94,0)}}
.pv-bar__cta{padding:9px 16px;border-radius:10px;background:#4f3ff0;color:#fff!important;font-weight:700;white-space:nowrap}
.pv-empty{display:grid;place-items:center;min-height:80vh;padding:40px 20px;text-align:center}
.pv-empty a{color:#cfc4ff}
@media(min-width:900px){
  .pv-layout{display:grid;grid-template-columns:1fr 430px 1fr;gap:40px}
  .pv-layout .sm{grid-column:2;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  .pv-side{grid-column:1;justify-self:end;position:sticky;top:90px;align-self:start;max-width:320px;padding-top:40px}
  .pv-side h1{margin:0 0 12px;font-weight:800;font-size:34px;line-height:1.08;letter-spacing:-.02em}
  .pv-side p{margin:0 0 18px;color:rgba(243,233,225,.75);line-height:1.5}
}
@media(max-width:899px){.pv-side{display:none}}

/* ================= desktop: the same 7 chapters, laid out for wide screens ================= */
.sm-nav{display:none}
@media (min-width:980px){
  .sm-ch{min-height:100vh;justify-content:center}
  .sm-ch__inner{flex:none;width:100%;max-width:1200px;margin:0 auto;padding:clamp(70px,9vh,110px) 56px;justify-content:center}
  .sm-ch__bg{inset:-5% 0}
  .sm-ch__bg::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.35))}
  .sm-light .sm-ch__bg::before{background:none}

  /* type scale */
  .sm-kicker{font-size:12.5px}
  .sm-h1{font-size:clamp(52px,4.8vw,76px);text-align:left}
  .sm-h2{font-size:clamp(46px,4vw,64px)}
  .sm-h3{font-size:34px}
  .sm-h4{font-size:26px}
  .sm-sub{font-size:21px}
  .sm-note{font-size:17px}
  .sm-table>div{font-size:19px;padding:15px 0}

  /* 01 – hero: painting left, text + price right, navigation in the header */
  .sm-hero .sm-ch__inner{display:grid;grid-template-columns:1.12fr 1fr;grid-template-rows:auto 1fr auto;column-gap:70px;padding-top:28px;min-height:100vh}
  .sm-top{grid-column:1/-1;align-items:center;margin-bottom:34px}
  .sm-nav{display:flex;gap:30px;margin-left:auto;margin-right:38px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;letter-spacing:.04em}
  .sm-nav a{color:rgba(246,235,226,.85);text-decoration:none;transition:color .3s}
  .sm-nav a:hover{color:#f2d7a4}
  .sm-artist{margin-top:0}
  .sm-hero__art{grid-column:1;grid-row:2/4;align-self:center;margin:0}
  .sm-hero__text{grid-column:2;grid-row:2;align-self:end;margin:0}
  .sm-kicker--center,.sm-sub--center{text-align:left;margin-left:0}
  .sm-hero__buy{grid-column:2;grid-row:3;align-self:start;align-items:flex-start;margin:0;padding-top:30px}
  .sm-price{font-size:26px}
  .sm-thumbs{max-width:560px}

  /* 02 – motif: text + work details left, detail image right */
  .sm-ch--2 .sm-ch__inner>div{display:grid;grid-template-columns:1fr 1.25fr;column-gap:80px;align-items:start}
  .sm-ch--2 .sm-ch__inner>div>*{grid-column:1}
  .sm-ch--2 .sm-fig{grid-column:2;grid-row:1/span 9;margin:0;align-self:center}
  .sm-ch--2 .sm-rule:not(:first-child){margin-top:34px}

  /* 03 – two details side by side, each image above its text */
  .sm-ch--3 .sm-ch__inner>div{display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
  .sm-ch--3 .sm-ch__inner>div>:not(.sm-pair){grid-column:1/-1}
  .sm-ch--3 .sm-rule--soft{display:none}
  .sm-pair,.sm-pair--rev{grid-template-columns:1fr;gap:22px;margin-top:40px;align-items:start}
  .sm-pair--rev>:last-child{order:-1}
  .sm-pair .sm-zoom{aspect-ratio:1.45!important}

  /* 04 – the whole work: framed work left, price + purchase right */
  .sm-ch--4 .sm-ch__inner>div{display:grid;grid-template-columns:1.3fr 1fr;column-gap:80px;align-items:center}
  .sm-ch--4 .sm-ch__inner>div>:not(.sm-frame--wall):not(.sm-center){grid-column:1/-1}
  .sm-ch--4 .sm-frame--wall{grid-column:1;margin-top:34px}
  .sm-ch--4 .sm-center{grid-column:2;align-items:flex-start;text-align:left}
  .sm-price--big{font-size:44px}
  .sm-caption{font-size:21px}

  /* 05 + 06 – heading and button on one side, works on the other */
  .sm-ch--5 .sm-ch__inner>div,.sm-ch--6 .sm-ch__inner>div{display:grid;grid-template-columns:1fr 1.35fr;column-gap:80px;align-items:center}
  .sm-ch--5 .sm-ch__inner>div>*,.sm-ch--6 .sm-ch__inner>div>*{grid-column:1}
  .sm-ch--5 .sm-cards,.sm-ch--6 .sm-cards{grid-column:2;grid-row:1/span 6;margin:0}
  .sm-ch--6 .sm-ch__inner>div{grid-template-columns:1.35fr 1fr}
  .sm-ch--6 .sm-ch__inner>div>*{grid-column:2}
  .sm-ch--6 .sm-cards{grid-column:1}
  .sm-center{align-items:flex-start;text-align:left}
  .sm-cards{gap:28px}
  .sm-card strong{font-size:17px}
  .sm-card em{font-size:12.5px}
  .sm-btn,.sm-btn-wrap button,.sm-btn-wrap a{font-size:16px;min-height:52px;padding:0 32px}

  /* 07 – footer: brand left, columns right */
  .sm-foot .sm-ch__inner{min-height:0;padding-top:90px;padding-bottom:60px}
  .sm-foot footer{display:grid;grid-template-columns:1fr 1fr;column-gap:80px;align-items:start}
  .sm-foot footer>*{grid-column:1/-1}
  .sm-foot__brand{grid-column:1;justify-items:start}
  .sm-foot__claim{grid-column:1;text-align:left;font-size:24px}
  .sm-foot__cols{grid-column:2;grid-row:2/5;padding:6px 0 0}
  .sm-foot__cols p{font-size:19px}
  .sm-foot__cols a{font-size:15px}
  .sm-foot footer>.sm-rule:nth-of-type(2){grid-column:1}
  .sm-foot__legal{display:flex;gap:30px;justify-content:space-between;align-items:center;text-align:left}
  .sm-foot__legal p{margin:0}
  .sm-totop{margin:0}

  /* preview page: chapters full width on desktop too */
  .pv-layout{display:block}
  .pv-side{display:none}
  .pv-layout .sm{box-shadow:none}
}
@media (min-width:980px){.sm-ch--4 .sm-frame--wall,.sm-ch--4 .sm-center{grid-row:5}}
/* specificity: these must win over the ">*{grid-column:…}" defaults above */
@media (min-width:980px){
  .sm-ch--2 .sm-ch__inner>div>.sm-fig{grid-column:2;grid-row:1/span 9}
  .sm-ch--5 .sm-ch__inner>div>.sm-cards{grid-column:2;grid-row:1/span 6}
  .sm-ch--6 .sm-ch__inner>div>.sm-cards{grid-column:1;grid-row:1/span 6}
  .sm-foot footer>.sm-foot__brand,.sm-foot footer>.sm-foot__claim{grid-column:1}
  .sm-foot footer>.sm-foot__cols{grid-column:2;grid-row:2/5}
  .sm-foot footer>.sm-rule:nth-of-type(2){grid-column:1}
}

/* desktop: a painting never grows taller than the screen – height is capped, width follows its own
   proportions (--ar is set by ArtworkImage), so portrait works stay beside their title and price */
@media (min-width:980px){
  .sm-hero__art{display:flex;flex-direction:column;align-items:center}
  .sm-hero .sm-frame,.sm-ch--4 .sm-frame--wall{width:fit-content;max-width:100%;justify-self:center}
  .sm-hero .sm-frame>.la-art{width:calc(66vh * var(--ar,1.33));max-width:100%}
  .sm-ch--4 .sm-frame--wall>.la-art{width:calc(62vh * var(--ar,1.33));max-width:100%}
  .sm-hero .sm-thumbs{width:100%;max-width:520px}
}
@media (min-width:980px){
  .sm-hero .sm-frame>.la-art{width:calc(58vh * var(--ar,1.33))}
  .sm-hero .sm-top{margin-bottom:20px}
}
@media (min-width:980px){
  .sm-hero .sm-ch__inner{grid-template-rows:auto auto auto;align-content:center}
  .sm-hero__text{align-self:end}
  .sm-hero__buy{align-self:start;padding-top:24px}
}

/* ---------- painting proportions ---------- */
/* phones: the hero painting never takes more than ~60% of the screen height */
.sm-hero .sm-frame{width:fit-content;max-width:100%;margin-inline:auto}
.sm-hero .sm-frame>.la-art{width:calc(60svh * var(--ar,1.33));max-width:100%}
.sm--tall .sm-thumbs{max-width:min(100%,360px);margin-inline:auto}

@media (min-width:980px){
  /* very tall works: painting + vertical thumbnail strip, text moves in beside them */
  .sm--tall .sm-hero .sm-ch__inner{grid-template-columns:auto minmax(0,520px);justify-content:center;column-gap:90px}
  .sm--tall .sm-hero__art{flex-direction:row;align-items:center;gap:18px}
  .sm--tall .sm-hero .sm-frame>.la-art{width:calc(66vh * var(--ar,1.33))}
  .sm--tall .sm-thumbs{grid-template-columns:1fr;width:96px;max-width:none;margin:0;gap:12px}
  .sm--tall .sm-ch--4 .sm-ch__inner>div{grid-template-columns:auto minmax(0,460px);justify-content:center}
  .sm--tall .sm-ch--4 .sm-frame--wall>.la-art{width:calc(66vh * var(--ar,1.33))}
  /* very wide works (panoramas): painting gets the larger share */
  .sm--wide .sm-hero .sm-ch__inner{grid-template-columns:1.5fr 1fr}
}
@media (min-width:980px){.sm-hero .sm-frame>.la-art{width:calc(58vh * var(--ar,1.33));max-width:100%}}

/* chapter header: pinned to the top edge like the site header – never part of the centred content */
.sm-logo{display:inline-flex}
@media (min-width:980px){
  .sm-hero .sm-ch__inner{grid-template-rows:auto auto;padding-top:120px}
  .sm-hero .sm-top{position:absolute;top:0;left:56px;right:56px;margin:0;padding:26px 0;z-index:3}
  .sm-hero__art{grid-row:1/3}
  .sm-hero__text{grid-row:1}
  .sm-hero__buy{grid-row:2}
}

/* ---- chapters 5 + 6: the works as real canvases on their own stage (no snapshot cards) ---- */
.sm-card--art{background:none!important;padding:0!important;box-shadow:none!important}
.sm-card--art .lx-staged{margin:8% 6% 0}
.sm-card__canvas{display:block;transition:transform .9s cubic-bezier(.22,1,.36,1),box-shadow .9s;
  box-shadow:0 0 0 1px rgba(0,0,0,.05),3px 4px 0 -1px rgba(60,40,20,.18),0 24px 30px -14px rgba(50,30,15,.5),0 60px 80px -40px rgba(50,30,15,.45)}
.sm-card--art:hover .sm-card__canvas{transform:translateY(-6px)}
.sm-card--art strong{margin:18px 2px 3px;font-size:15px;letter-spacing:.01em}
.sm-card--art em{margin:0 2px}
.sm-cards--dark .sm-card--art .sm-card__canvas{box-shadow:0 0 0 4px #c9a24a,0 0 0 5px #5e4520,0 26px 44px rgba(0,0,0,.6)}
.sm-cards--dark .sm-card--art{padding-top:10px!important}
.sm-cards:has(.sm-card--art){align-items:end}
@media (min-width:980px){.sm-card--art strong{font-size:19px}.sm-card--art .lx-staged{margin:6% 1% 0}.sm-cards:has(.sm-card--art){gap:44px}}