/* "Kinematic for Archviz artists": a hero with a sun study rendered in Kinematic (and a dot that rides
   its time of day), a walkthrough and a drawing, the numbers archviz artists work in, six deliverables with a
   panorama that turns, the deadline commands, three bands of what is new for them (the site, simulation, the live
   meeting), files and gear, tutorials and demos, honest gaps, and the download. Class names start with av-. */

/* hero */
.av-hero{position:relative;padding-block:calc(var(--barh) + var(--navh) + 48px) 56px;overflow:hidden}
.av-hero canvas{position:absolute;inset:0;width:100%;height:100%}
.av-hwrap{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.av-hero h1{font-size:clamp(44px,5.2vw,84px);line-height:.95;letter-spacing:-.05em}
.av-hero h1 i{font-style:normal;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.av-hero .sub{margin-top:24px;font-size:clamp(18px,1.45vw,21px);line-height:1.45;max-width:540px}
.av-who{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.av-who span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;color:var(--fg)}
.av-who i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.av-hero .ctas{margin-top:26px}
.av-hmeta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;color:var(--mute)}
.av-hmeta span{display:flex;align-items:center;gap:8px}
.av-hmeta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.av-hmedia{display:grid;gap:10px;min-width:0}
.av-sun,.av-tile{position:relative;margin:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#000;min-width:0}
.av-sun{aspect-ratio:16/10;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.av-sun video,.av-tile video,.av-tile img{width:100%;height:100%;object-fit:cover;display:block}
.av-sun figcaption,.av-tile figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);font-family:var(--mono);font-size:11px;color:var(--fg);background:rgba(6,8,11,.84);padding:4px 8px;border-radius:2px;line-height:1.35}
.av-sun figcaption b,.av-tile figcaption b{color:var(--accent);font-weight:500;margin-right:6px}
.av-track{position:relative;display:flex;justify-content:space-between;margin:2px 4px 6px;padding-top:12px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.av-track::before{content:"";position:absolute;left:0;right:0;top:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,#3a4b6b,#f2b35e 50%,#3a4b6b)}
.av-track i{position:absolute;top:0;left:62%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#ffd38a;box-shadow:0 0 0 3px rgba(255,211,138,.18),0 0 14px rgba(255,190,90,.7)}
.av-hsmall{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.av-tile{aspect-ratio:16/10}
.av-paper{background:#fff}
.av-paper img{object-fit:contain}

/* facts strip */
.av-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.av-fc{padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--line);min-width:0}
.av-fc:first-child{padding-left:0}
.av-fc:last-child{border-right:0}
.av-fc .k{font-size:15px;color:var(--fg);letter-spacing:.02em;padding:7px 11px;align-self:flex-start;border:1px solid var(--line-2);border-radius:6px;background:linear-gradient(#141a22,#0f141a);white-space:nowrap}
.av-fc p{color:var(--mute);font-size:15.5px;line-height:1.45}
.av-fc p b{color:var(--fg);font-weight:500}

/* the work */
.av-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.av-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--ink-2);overflow:hidden;min-width:0;transition:border-color .2s}
.av-card:hover{border-color:var(--line-2)}
.av-card > figure{position:relative;margin:0;aspect-ratio:16/10;background:#000;border-bottom:1px solid var(--line);overflow:hidden}
.av-card > figure img,.av-card > figure video{width:100%;height:100%;object-fit:cover;display:block}
.av-card > figure.av-white{background:#fff}
.av-card > figure.av-white img{object-fit:contain}
.av-card figcaption,.av-shot figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);font-family:var(--mono);font-size:10.5px;color:var(--fg);background:rgba(6,8,11,.84);padding:3px 7px;border-radius:2px;line-height:1.35}
.av-sun4{display:grid !important;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:var(--line) !important}
.av-sun4 div{position:relative;overflow:hidden;min-width:0;min-height:0}
.av-sun4 img{width:100%;height:100%;object-fit:cover;display:block}
.av-sun4 span{position:absolute;left:6px;bottom:6px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--fg);background:rgba(6,8,11,.82);padding:2px 6px;border-radius:2px}
.av-card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.av-tag{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.av-tag i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.av-card h3,.av-ptext h3{font-size:clamp(21px,1.75vw,25px);letter-spacing:-.03em;line-height:1.1}
.av-card p,.av-ptext p{color:var(--mute);font-size:15px;line-height:1.5}
.av-pills{font-size:11px}
.av-pills span{padding:4px 7px}
.av-pills b{color:var(--dim)}
.av-go{align-self:flex-start;margin-top:auto;font-size:14.5px;color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.av-go span{color:var(--c,var(--accent))}
.av-go:hover{border-color:var(--c,var(--accent))}

/* panorama */
.av-pano{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,40px);margin-top:14px;padding:clamp(20px,2.6vw,32px);border:1px solid var(--line);border-radius:8px;background:var(--ink-2);align-items:center}
.av-ptext{display:flex;flex-direction:column;gap:12px;min-width:0}
.av-strip{--h:clamp(150px,17vw,250px);position:relative;margin:0;height:var(--h);border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#9fbad0;min-width:0}
.av-roll{position:absolute;inset:0;background-repeat:repeat-x;background-size:auto 100%;background-position:calc(var(--h) * -2.6) 0;animation:av-pan 70s linear infinite}
.av-strip figcaption{position:absolute;left:10px;top:10px;max-width:calc(100% - 80px);font-family:var(--mono);font-size:10.5px;color:var(--fg);background:rgba(6,8,11,.84);padding:3px 7px;border-radius:2px}
.av-strip::after{content:"360°";position:absolute;right:10px;top:10px;font-family:var(--mono);font-size:11px;color:var(--fg);background:rgba(6,8,11,.84);padding:3px 7px;border-radius:2px}
@keyframes av-pan{from{background-position:calc(var(--h) * -2.6) 0}to{background-position:calc(var(--h) * -7.478) 0}}
@media (prefers-reduced-motion:reduce){.av-roll{animation:none}}

/* deadline */
.av-dead{border-top:1px solid var(--line)}
.av-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line-2)}
.av-d{display:flex;flex-direction:column;gap:10px;padding:22px 26px 24px 0;border-bottom:1px solid var(--line);min-width:0}
.av-d:nth-child(2n){padding-left:26px;padding-right:0;border-left:1px solid var(--line)}
.av-d h3{font-size:20px;letter-spacing:-.02em;line-height:1.15}
.av-d p{color:var(--mute);font-size:15px;line-height:1.5}
.av-d .code{margin-top:4px}
.av-d .code pre{font-size:12.5px}
.av-dmore{margin-top:18px;font-size:15px}
.av-dmore a{color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.av-dmore span{color:var(--accent)}

/* shots */
.av-shot{position:relative;margin:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:#000;min-width:0}
.av-shot video,.av-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* bands */
.av-band{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.5vw,72px);align-items:center;padding-block:clamp(56px,6vw,96px);border-top:1px solid var(--line)}
.av-band.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.av-band.flip .av-btext{order:2}
.av-btext{display:flex;flex-direction:column;gap:18px;min-width:0}
.av-btext .eyebrow{display:flex;align-items:center;gap:9px;margin:0;color:var(--mute)}
.av-btext .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.av-btext h2{font-size:clamp(34px,3.9vw,60px);line-height:.98;letter-spacing:-.045em}
.av-btext > p{color:var(--mute);font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.55;max-width:560px}
.av-btext > p b{color:var(--fg);font-weight:500}
.av-ticks{list-style:none;display:grid;gap:9px;border-top:1px solid var(--line);padding-top:16px}
.av-ticks li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:15px;color:var(--fg);line-height:1.45}
.av-ticks li::before{content:"";width:8px;height:8px;margin-top:.5em;border-radius:2px;background:var(--c)}
.av-bgo{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14.5px}
.av-bgo a{color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.av-bgo a:hover{border-color:var(--c)}
.av-m3{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:10px;min-width:0}
.av-m3 .a{grid-row:1/3;aspect-ratio:auto;min-height:100%}
.av-m3 .b,.av-m3 .c{aspect-ratio:16/10}
.av-credit{grid-column:1/-1;margin:2px 0 0;color:var(--dim);font-size:11px}

/* how it fits */
.av-files{border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.av-files .r{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,3fr) minmax(0,3fr);border-top:1px solid var(--line)}
.av-files .r:first-child{border-top:0}
.av-files .r > div{padding:14px 18px;min-width:0;font-size:15px;color:var(--mute);line-height:1.45}
.av-files .r > div:first-child{color:var(--fg);font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em}
.av-files .r > div:first-child small{display:block;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:0;color:var(--dim);margin-top:3px}
.av-files .hd > div{font-family:var(--mono) !important;font-weight:400 !important;font-size:11.5px !important;letter-spacing:.06em !important;text-transform:uppercase;color:var(--dim) !important;background:var(--ink-2);padding-block:11px !important}
.av-files .r .out{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.av-fnote{margin-top:12px;padding:14px 18px;border-left:2px solid var(--accent);background:var(--ink-2);color:var(--mute);font-size:15px;border-radius:0 4px 4px 0}
.av-fnote b{color:var(--fg);font-weight:500}
.av-fnote a{color:var(--fg);border-bottom:1px solid var(--line-2);margin-left:4px}
.av-gear{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:36px;border-top:1px solid var(--line-2)}
.av-gear div{display:flex;flex-direction:column;gap:6px;padding:18px 22px 18px 0;border-bottom:1px solid var(--line);min-width:0}
.av-gear div:not(:nth-child(3n+1)){padding-left:22px;border-left:1px solid var(--line)}
.av-gear b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em}
.av-gear span{color:var(--mute);font-size:15px;line-height:1.45}
.av-from{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:28px}
.av-from a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:6px;background:var(--ink-2);transition:border-color .2s;min-width:0}
.av-from a:hover{border-color:var(--c)}
.av-from b{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.02em}
.av-from b i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)}
.av-from span{color:var(--mute);font-size:14px}

/* where to start */
.av-lessons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.av-lesson{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--ink-2);overflow:hidden;min-width:0;transition:border-color .2s}
.av-lesson:hover{border-color:var(--accent)}
.av-lesson .pic{aspect-ratio:16/10;background:#000;overflow:hidden;border-bottom:1px solid var(--line)}
.av-lesson .pic img{width:100%;height:100%;object-fit:cover;display:block}
.av-lesson .pic.contain img{object-fit:contain}
.av-lesson .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px}
.av-lesson .body span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.av-lesson h3{font-size:19px;letter-spacing:-.02em;line-height:1.15}
.av-lesson p{color:var(--mute);font-size:14.5px;line-height:1.5}
.av-how{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin:22px 0 40px;color:var(--mute);font-size:15px}
.av-how a{color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.av-how a:hover{border-color:var(--accent)}
.av-demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.av-demo{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--ink-2);overflow:hidden;min-width:0;transition:border-color .2s}
.av-demo:hover{border-color:var(--accent)}
.av-demo .pic{aspect-ratio:16/9;background:#000;overflow:hidden;border-bottom:1px solid var(--line)}
.av-demo .pic img{width:100%;height:100%;object-fit:cover;display:block}
.av-demo .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.av-demo h3{font-size:21px;letter-spacing:-.025em;line-height:1.1}
.av-demo p{color:var(--mute);font-size:14.5px;line-height:1.5}
.av-demo .need{font-size:11px;color:var(--dim)}
.av-demo .open{margin-top:auto;padding-top:6px;display:flex;align-items:center;gap:9px;font-size:14px;color:var(--mute)}
.av-demo .open i{width:0;height:0;border-left:7px solid var(--accent);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}

/* gaps */
.av-gaps{border-top:1px solid var(--line)}
.av-gwrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:start}
.av-gwrap .lede{margin-top:18px}
.av-gwrap .lede a{color:var(--fg);border-bottom:1px solid var(--line-2)}
.av-gwrap ul{list-style:none;border-top:1px solid var(--line-2)}
.av-gwrap li{padding:15px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:17px}
.av-gwrap li::before{content:"";width:10px;height:10px;margin-top:8px;border-radius:50%;border:1.5px solid var(--mute)}
.av-gwrap li span{display:block;color:var(--mute);font-size:15px;margin-top:3px}

/* the end */
.av-end{padding-top:0}
.av-band-end{margin-top:0;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--accent2) 8%,transparent) 60%,transparent)}
.av-band-end h3{font-size:clamp(30px,3.4vw,48px);letter-spacing:-.045em}
.av-endgo{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.av-reach{color:var(--fg);border-bottom:1px solid var(--line-2);padding-bottom:2px;font-size:15.5px}
.av-reach:hover{border-color:var(--accent)}

@media (max-width:1180px){
  .av-grid,.av-demos{grid-template-columns:1fr 1fr}
  .av-lessons{grid-template-columns:1fr 1fr}
  .av-from{grid-template-columns:1fr 1fr}
}
@media (max-width:1080px){
  .av-hwrap,.av-band,.av-band.flip,.av-gwrap,.av-pano{grid-template-columns:1fr}
  .av-band.flip .av-btext{order:0}
  .av-facts{grid-template-columns:1fr 1fr}
  .av-fc:nth-child(2){border-right:0}
  .av-fc:nth-child(3){padding-left:0}
  .av-fc:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .av-gear{grid-template-columns:1fr 1fr}
  .av-gear div:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .av-gear div:nth-child(2n){padding-left:22px;border-left:1px solid var(--line)}
}
@media (max-width:760px){
  .av-grid,.av-demos,.av-lessons{grid-template-columns:1fr}
  .av-facts{grid-template-columns:1fr}
  .av-fc,.av-fc:nth-child(3){padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}
  .av-fc:last-child{border-bottom:0}
  .av-m3{grid-template-columns:1fr 1fr}
  .av-m3 .a{grid-column:1/-1;grid-row:auto;aspect-ratio:16/10;min-height:0}
  .av-dgrid{grid-template-columns:1fr}
  .av-d,.av-d:nth-child(2n){padding:20px 0;border-left:0}
  .av-files .r{grid-template-columns:1fr}
  .av-files .r > div{padding:8px 16px}
  .av-files .r > div:first-child{padding-top:14px}
  .av-files .r > div:last-child{padding-bottom:14px}
  .av-files .hd{display:none !important}
  .av-files .r > div[data-h]::before{content:attr(data-h);display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
  .av-gear{grid-template-columns:1fr}
  .av-gear div,.av-gear div:nth-child(2n){padding-left:0;border-left:0}
  .av-from{grid-template-columns:1fr}
  .av-tile figcaption span{display:none}
  .av-tile figcaption b{margin-right:0}
  .av-pano{padding:18px}
  .av-band-end{padding:22px 20px}
  .av-fc .k{white-space:normal}
}