/* ==== lastmill-studio-v1.css ==== */
/* Last Mill — a brand-led case. Stage, bands and shards follow the 2016 graphic standards manual:
   Pantone Black on white, big diagonal shards, the mill's sails thrown out like light. */
@property --burst{syntax:'<number>';inherits:true;initial-value:0}
@property --tier{syntax:'<color>';inherits:true;initial-value:#e3b54a}
.lm-studio{--lm-ink:#0d0d0d;--lm-paper:#f2f0eb;--lm-text:#f2f0e9;--lm-mute:#c1c1b9;--lm-label:#ddd8c9;--lm-line:#f2f0eb24;color:var(--lm-text)}
.lm-sprite{position:absolute;width:0;height:0;}
.lm-studio img{height:auto}   /* width/height attributes only reserve the ratio */
.lm-logo{display:block;width:100%;height:auto;}

/* Stage: the manual's cover, live */
.lm-stage{position:relative;overflow:hidden;isolation:isolate;display:grid;place-items:center;align-content:center;gap:clamp(18px,2.6vw,34px);min-height:clamp(340px,58svh,620px);padding:clamp(60px,8vw,112px) clamp(22px,7vw,100px);background:var(--lm-paper);color:var(--lm-ink);transition:background .6s ease,color .6s ease}
.lm-shards{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lm-shards i{position:absolute;inset:-3%;background:var(--lm-ink);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),background .6s ease;transform:translate(calc(var(--px,0) * var(--d) * 1px),calc(var(--py,0) * var(--d) * 1px))}
.lm-shards i:nth-child(1){clip-path:polygon(0 0,36% 0,0 50%);--d:-18}
.lm-shards i:nth-child(2){clip-path:polygon(60% 0,100% 0,100% 66%);--d:24}
.lm-shards i:nth-child(3){clip-path:polygon(0 100%,0 66%,27% 100%);--d:14}
.lm-shards i:nth-child(4){clip-path:polygon(100% 100%,76% 100%,100% 84%);--d:-10}
.lm-stage-mark{width:min(100%,820px);position:relative}
.lm-stage-logo{cursor:pointer;animation:lm-assemble 1.5s .2s cubic-bezier(.2,.8,.2,1) backwards}
.lm-stage-logo .lm-word{animation:lm-fade .9s .1s ease backwards}
.lm-stage-logo .lm-blade{transform-box:fill-box;transform-origin:50% 50%;transition:transform .9s cubic-bezier(.2,.8,.2,1);transform:translate(calc(var(--bx) * var(--burst)),calc(var(--by) * var(--burst))) rotate(calc(var(--br) * var(--burst)))}
.lm-blade--right{--bx:64px;--by:48px;--br:22deg}
.lm-blade--top{--bx:26px;--by:-62px;--br:-16deg}
.lm-blade--left{--bx:-70px;--by:-42px;--br:-24deg}
.lm-stage-logo.is-spun{animation:lm-spin 1s cubic-bezier(.2,.8,.2,1)}
@keyframes lm-assemble{from{--burst:3.4}}
@keyframes lm-spin{38%{--burst:2.6}}
@keyframes lm-fade{from{opacity:0}}
.lm-tagline{display:flex;align-items:center;gap:16px;margin:0;font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;text-align:center}
.lm-tagline::before,.lm-tagline::after{content:"";flex:0 0 42px;height:1px;background:currentColor;opacity:.55}
.lm-switch{position:absolute;right:clamp(14px,2.4vw,30px);bottom:clamp(14px,2.4vw,26px);display:flex;gap:4px;padding:4px;border:1px solid currentColor;border-radius:999px;background:var(--lm-paper)}
.lm-switch button{font:inherit;font-size:12px;letter-spacing:.06em;padding:6px 12px;border:0;border-radius:999px;background:none;color:inherit;cursor:pointer}
.lm-switch button[aria-pressed="true"]{background:var(--lm-ink);color:var(--lm-paper)}
.lm-stage[data-tone="negative"]{background:var(--lm-ink);color:var(--lm-paper)}
.lm-stage[data-tone="negative"] .lm-shards i{background:#262626}
.lm-stage[data-tone="negative"] .lm-switch{background:var(--lm-ink)}
.lm-stage[data-tone="negative"] .lm-switch button[aria-pressed="true"]{background:var(--lm-paper);color:var(--lm-ink)}

/* Intro and chapters */
.lm-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 80px;align-items:end;margin-top:56px}
.lm-kicker,.lm-num{margin:0 0 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--lm-label)}
.lm-intro h1{margin:0;font-size:clamp(58px,8.4vw,124px);font-weight:800;line-height:.88;letter-spacing:-.035em;text-transform:uppercase}
.lm-intro-copy p{margin:0 0 14px;max-width:46ch;font-size:15px;line-height:1.7;color:var(--lm-mute)}
.lm-intro-copy .lm-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--lm-text)}
.lm-studio .lm-index{float:none;display:flex;flex-wrap:wrap;gap:8px 28px;width:100%;margin-top:46px;padding:16px 0;border-block:1px solid var(--lm-line);font-size:12px}
.lm-index a{color:var(--lm-label);text-decoration:none}
.lm-index a:hover,.lm-index a:focus-visible{color:var(--lm-text);text-decoration:underline;text-underline-offset:4px}

/* Sections */
.lm-section{clear:both;margin-top:clamp(84px,10vw,140px);}
.lm-heading{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:16px 80px;align-items:end;margin-bottom:44px}
.lm-heading .lm-num{grid-column:1/-1;margin:0}
.lm-heading h2{margin:0;font-size:clamp(36px,4.4vw,62px);font-weight:600;line-height:.98;letter-spacing:-.035em}
.lm-heading>p:last-child{margin:0;max-width:46ch;font-size:15px;line-height:1.7;color:var(--lm-mute)}
.lm-band{position:relative;overflow:hidden;isolation:isolate;padding:clamp(46px,6vw,88px) clamp(22px,5vw,72px);background:var(--lm-paper);color:var(--lm-ink)}
.lm-band::before{content:"";position:absolute;top:0;right:0;z-index:-1;width:16%;height:100%;background:var(--lm-ink);clip-path:polygon(28% 0,100% 0,100% 100%)}
.lm-band .lm-num{color:#5a5a55}
.lm-band .lm-heading>p:last-child{color:#4a4a46}
.lm-caption{margin:18px 0 0;font-size:12px;color:var(--lm-mute)}

/* 01 The mark: four official versions */
.lm-versions{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.lm-tile{display:grid;place-items:center;align-content:center;gap:22px;min-height:230px;margin:0;padding:clamp(36px,5vw,66px) clamp(24px,4vw,58px)}
.lm-tile--light{background:var(--lm-paper);color:var(--lm-ink)}
.lm-tile--dark{background:#000;color:var(--lm-paper);box-shadow:inset 0 0 0 1px var(--lm-line)}
.lm-tile .lm-logo{width:min(100%,540px)}
.lm-tile--v .lm-logo{width:min(78%,300px)}
.lm-tile figcaption{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.62}

/* 02 The rules */
.lm-rule-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,1fr);gap:clamp(30px,5vw,70px);align-items:center}
.lm-clear{margin:0}
.lm-clear .lm-logo{color:var(--lm-ink)}
.lm-clear-rect{fill:none;stroke:currentColor;stroke-width:5;stroke-dasharray:26 18;opacity:.5}
.lm-clear-mark{stroke:currentColor;stroke-width:5;fill:none}
.lm-clear-x{font-size:92px;font-style:italic;font-weight:600;fill:currentColor}
.lm-clear figcaption,.lm-chip span{font-size:12px;color:#4a4a46}
.lm-clear figcaption{display:flex;gap:12px;margin-top:16px}
.lm-clear figcaption b,.lm-manual figcaption b{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--lm-ink)}
.lm-colours{display:grid;gap:12px}
.lm-chip{display:grid;grid-template-columns:62px minmax(0,1fr);gap:3px 18px;align-content:start;padding:18px;border:1px solid #0d0d0d26}
.lm-chip::before{content:"";grid-row:1/4;aspect-ratio:1;background:var(--chip);box-shadow:inset 0 0 0 1px #0d0d0d33}
.lm-chip strong{font-size:15px;font-weight:700}
.lm-chip span{font-variant-numeric:tabular-nums}
.lm-chip p{margin:6px 0 0;font-size:13px;line-height:1.5;color:#33332f}
.lm-manual{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(250px,32vw,440px);gap:22px;margin-top:34px;padding:6px 2px 22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#f2f0eb44 transparent}
.lm-manual figure{margin:0;scroll-snap-align:start}
.lm-manual img{display:block;width:100%;height:auto;box-shadow:0 18px 34px #0008}
.lm-manual figcaption{display:flex;gap:10px;margin-top:12px;font-size:12px;color:var(--lm-mute)}
.lm-manual figcaption b{color:var(--lm-label)}
.lm-manual:focus-visible{outline:1px solid var(--lm-label);outline-offset:6px}

/* 03 Print: a small stack of cards that opens on hover or focus */
.lm-cards{position:relative;height:clamp(250px,34vw,500px);outline:none}
.lm-card{position:absolute;top:50%;left:50%;width:min(56%,640px);aspect-ratio:1600/772;margin:0;border-radius:clamp(6px,.8vw,11px);overflow:hidden;box-shadow:0 34px 60px -18px #000d,inset 0 0 0 1px #ffffff14;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.lm-card img{display:block;width:100%;height:100%;object-fit:cover}
.lm-card:nth-child(1){transform:translate(-50%,-50%) translate(-24%,-20%) rotate(-7deg)}
.lm-card:nth-child(2){z-index:2;transform:translate(-50%,-50%) rotate(1.5deg)}
.lm-card:nth-child(3){z-index:1;transform:translate(-50%,-50%) translate(24%,21%) rotate(7deg)}
.lm-cards:hover .lm-card:nth-child(1),.lm-cards:focus-visible .lm-card:nth-child(1){transform:translate(-50%,-50%) translate(-38%,-26%) rotate(-10deg)}
.lm-cards:hover .lm-card:nth-child(2),.lm-cards:focus-visible .lm-card:nth-child(2){transform:translate(-50%,-50%) translate(0,-4%) rotate(0)}
.lm-cards:hover .lm-card:nth-child(3),.lm-cards:focus-visible .lm-card:nth-child(3){transform:translate(-50%,-50%) translate(38%,27%) rotate(10deg)}

/* 04 VIP: tiers swap the card and the light around it */
.lm-vip{--tier:#e3b54a;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,90px);align-items:center;padding:clamp(40px,6vw,84px);background:radial-gradient(ellipse at 28% 58%,color-mix(in srgb,var(--tier) 30%,transparent),transparent 62%),#0f100f;box-shadow:inset 0 0 0 1px var(--lm-line);transition:--tier .8s ease}
.lm-vip[data-tier="silver"]{--tier:#cfd3d8}
.lm-vip[data-tier="bronze"]{--tier:#c9783a}
.lm-vip-card{position:relative;margin:0;aspect-ratio:1;border-radius:clamp(8px,1vw,14px);overflow:hidden;transform:rotate(-4deg);box-shadow:0 40px 70px -20px #000,0 0 0 1px #ffffff1a}
.lm-vip-card img{display:block;width:100%;height:100%;object-fit:cover}
.lm-vip-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff38 calc(var(--sheen,40%) - 6%),transparent calc(var(--sheen,40%) + 14%));mix-blend-mode:screen;pointer-events:none;transition:opacity .4s}
.lm-vip-side{display:grid;gap:26px}
.lm-vip-wide{margin:0;border-radius:clamp(6px,.8vw,11px);overflow:hidden;box-shadow:0 30px 50px -18px #000c;transform:rotate(2deg)}
.lm-vip-wide img{display:block;width:100%;height:auto}
.lm-tiers{display:flex;flex-wrap:wrap;gap:8px}
.lm-tiers button{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 10px;font:inherit;font-size:12px;letter-spacing:.06em;color:var(--lm-text);background:#ffffff08;border:1px solid var(--lm-line);border-radius:999px;cursor:pointer}
.lm-tiers button::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--dot)}
.lm-tiers button[aria-pressed="true"]{border-color:var(--dot);background:#ffffff14}

/* 05 Screen: channel art as it appears */
.lm-channel{overflow:hidden;border-radius:14px;background:#0b0b0b;box-shadow:inset 0 0 0 1px var(--lm-line)}
.lm-channel-banner{display:block;width:100%;aspect-ratio:2560/600;object-fit:cover;object-position:50% 52%}
.lm-channel-bar{display:flex;align-items:center;gap:20px;padding:22px clamp(18px,3vw,34px) 26px}
.lm-channel-avatar{box-sizing:border-box;flex:0 0 auto;width:clamp(64px,7vw,96px);aspect-ratio:1;margin-top:clamp(-58px,-4.5vw,-36px);padding:clamp(8px,1vw,14px);border-radius:50%;background:var(--lm-paper);box-shadow:0 0 0 4px #0b0b0b;object-fit:contain}
.lm-channel-bar strong{display:block;font-size:18px;font-weight:700}
.lm-channel-bar span{font-size:12px;color:var(--lm-mute)}

/* 06 Productions */
.lm-family{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,4vw,56px);align-items:end;margin:0;padding:0;list-style:none}
.lm-family figure{display:grid;gap:18px;margin:0}
.lm-family img{display:block;width:100%;height:clamp(90px,10vw,140px);object-fit:contain;object-position:50% 100%}
.lm-family figcaption{padding-top:12px;border-top:1px solid #0d0d0d26;font-size:12px;color:#4a4a46}
.lm-family figcaption b{display:block;margin-bottom:2px;font-size:14px;color:var(--lm-ink)}
.lm-studio .project-source{margin-top:34px}

@media (max-width:760px){
  .lm-stage{min-height:300px;padding:72px 18px 84px}
  .lm-shards i:nth-child(1){clip-path:polygon(0 0,46% 0,0 30%)}
  .lm-shards i:nth-child(2){clip-path:polygon(66% 0,100% 0,100% 36%)}
  .lm-shards i:nth-child(3){clip-path:polygon(0 100%,0 80%,36% 100%)}
  .lm-tagline{gap:10px;letter-spacing:.2em}
  .lm-tagline::before,.lm-tagline::after{flex-basis:18px}
  .lm-intro,.lm-heading,.lm-rule-grid,.lm-vip{grid-template-columns:1fr}
  .lm-intro{gap:18px;margin-top:40px}
  .lm-heading{gap:14px}
  .lm-versions{grid-template-columns:1fr}
  .lm-band::before{width:20%;height:46%}
  .lm-cards{height:clamp(210px,62vw,320px)}
  .lm-card{width:72%}
  .lm-vip-card{width:78%;margin-inline:auto}
  .lm-family{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
}