/* a model's own page, generated by tools/build_pages.py. Same night and same type as the landing, one moment: the door lifts off the car */
:root{--black:#000;--paper:#F2F2EF;--steel:#8D9298;--graphite:#15171A;--line:rgba(255,255,255,.12);--glow:#9DB4D6;
  --gut:clamp(16px,4vw,48px);--edge:max(var(--gut),calc((100vw - 1180px)/2 + var(--gut)));--f:"Archivo",system-ui,sans-serif;--d:"Big Shoulders Display",Impact,sans-serif;--m:"Michroma","Archivo",sans-serif;--ease:cubic-bezier(.2,.75,.1,1)}
*{box-sizing:border-box;margin:0}
html{scrollbar-width:none;background:var(--black);color:var(--paper);font:400 16px/1.55 var(--f);-webkit-text-size-adjust:100%}
body{background:var(--black);overflow-x:hidden}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}
.nc{text-transform:none}
.top{position:absolute;inset:0 0 auto;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:18px var(--edge);font:400 .62rem/1 var(--m);letter-spacing:.06em;text-transform:uppercase}
.top a{text-decoration:none;padding-block:12px}

.stand{position:relative;height:min(100svh,920px);min-height:560px;overflow:hidden;display:grid;align-items:end}
.stand::before{content:"";position:absolute;inset:auto -10% 0;height:62%;background:radial-gradient(50% 72% at 50% 100%,color-mix(in oklab,var(--glow) 34%,transparent),transparent)}
/* the name fills the width whatever its length, --n is its letter count and .47em a letter of this face */
.word{position:absolute;left:0;right:0;top:calc(44% - .8em);text-align:center;font:900 min(calc(92vw/(var(--n)*.47)),42svh)/.8 var(--d);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;
  background:linear-gradient(180deg,#fff 10%,#3b3e43 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* --r and --pad come from the build: the tyres sit on the floor line and the baked reflection falls past it */
.stand img{position:absolute;left:50%;bottom:30%;width:min(100vw,1240px,calc(60svh/var(--r)));height:auto;translate:-50% calc(var(--pad)*100%);-webkit-mask:linear-gradient(#000 calc(100% - var(--pad)*100% + 2%),transparent);mask:linear-gradient(#000 calc(100% - var(--pad)*100% + 2%),transparent)}
.floor{position:absolute;left:0;right:0;bottom:30%;height:2px;background:#fff;box-shadow:0 0 18px 3px rgba(255,255,255,.75)}
/* a blurred shadow this wide ends on a hard line, a gradient fades all the way out */
.floor::after{content:"";position:absolute;inset:-170px 0;background:linear-gradient(transparent 30%,color-mix(in oklab,var(--glow) 13%,transparent) 50%,transparent 75%)}
.lift{position:absolute;inset:0 0 30%;z-index:1;background:#000;background-image:repeating-linear-gradient(180deg,#0c0d0f 0 calc(100%/14 - 2px),#000 calc(100%/14 - 2px) calc(100%/14));translate:0 -102%;
  animation:lift 1.5s cubic-bezier(.65,0,.25,1) .25s backwards}
@keyframes lift{from{translate:0 0}}
.plate{position:absolute;inset:auto 0 0;z-index:3;height:30%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 32px;padding:20px var(--edge)}
h1{font:800 clamp(1.9rem,4.4vw,3.6rem)/1 var(--d);text-transform:uppercase}
.plate p{color:var(--steel);font-size:.9rem;margin-top:6px}
.price{text-align:right}
.price small{display:block;color:var(--steel);font-size:.8rem}
.price b{display:block;font:900 clamp(2.4rem,6vw,5rem)/1 var(--d);background:linear-gradient(180deg,#fff 15%,#8d9298 92%);-webkit-background-clip:text;background-clip:text;color:transparent}

.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:12px;background:var(--paper);color:#000;font-weight:700;text-decoration:none;transition:background .25s}
.btn:hover{background:#fff}
.sec{padding-block:clamp(56px,9vw,112px);border-top:1px solid var(--line)}
.sec h2{font:900 clamp(2.4rem,6vw,4.6rem)/.95 var(--d);text-transform:uppercase;margin-bottom:28px}
.lede{max-width:62ch;color:#c9ccd0;font-size:clamp(1rem,1.4vw,1.15rem)}

.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 40px;margin-top:40px}
.specs dt{font:400 .62rem/1.4 var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--steel);padding-top:10px;border-top:1px solid var(--line)}
.specs dd{margin:6px 0 0;font:800 clamp(2.2rem,4.5vw,3.4rem)/1 var(--d)}
.specs dd small{font:800 .4em/1 var(--d);margin-left:4px;color:var(--steel)}
.specs dd.text{font:500 1rem/1.4 var(--f);padding-top:8px}

.type{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.type small{display:block;color:var(--steel);font-size:.78rem}
.type b{font:400 clamp(.86rem,1.5vw,1.05rem) var(--m)}
.type a{font-size:.9rem;font-weight:700;text-decoration:none;color:#25D366;padding:8px 0}
.type a:hover{text-decoration:underline}
.note{margin-top:18px;color:var(--steel);font-size:.84rem;max-width:80ch}
.note a{white-space:nowrap}

.others{display:flex;flex-wrap:wrap;gap:8px 28px}
.others a{font:800 clamp(1.3rem,2.6vw,2rem)/1.2 var(--d);text-transform:uppercase;text-decoration:none;color:var(--steel);transition:color .25s;padding-block:4px}
.others a:hover{color:var(--paper)}
/* the credit page: no hero, so the first section clears the nav */
.credit .sec:first-child{border-top:0;padding-top:clamp(112px,16vw,180px)}
.credit h1{font:900 clamp(3.4rem,11vw,9rem)/.9 var(--d);margin-bottom:24px}
.credit .specs dd.text{color:#c9ccd0;font-size:.92rem}
.source{padding-block:22px;border-top:1px solid var(--line)}
.source h3{font:800 clamp(1.4rem,2.6vw,2rem)/1.1 var(--d);text-transform:uppercase;margin-bottom:12px}
.source dl{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px 24px;font-size:.9rem;color:#c9ccd0}
.source dt{color:var(--steel)}
.source dd{margin:0}
.source a,.claims a{display:inline-block;padding:4px 3px}
.claims{padding:0;list-style:none;border-top:1px solid var(--line)}
.claims li{padding:14px 0;border-bottom:1px solid var(--line);color:#c9ccd0;font-size:.92rem}
footer{border-top:1px solid var(--line);padding-block:28px 40px;color:var(--steel);font-size:.8rem}
footer p+p{margin-top:8px}

@media (max-width:700px){
  .stand{height:100svh;min-height:600px}
  .word{top:calc(40% - .8em)}
  .stand img{bottom:34%;width:min(118vw,calc(46svh/var(--r)))}
  .floor{bottom:34%}
  .lift{bottom:34%}
  .plate{height:34%;grid-template-columns:1fr;align-content:center;gap:10px}
  .price{text-align:left}
  .type{grid-template-columns:1fr auto;gap:2px 16px}
  .type b{grid-column:1;grid-row:2}
  .type a{grid-column:2;grid-row:1/3}
  .source dl{grid-template-columns:1fr;gap:2px}
  .source dd{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){.lift{animation:none}}