/* Amaete Cutaways: the public pages (home, See all, groups, attributions).
   One shape runs the system: the outline of an isometric cube, the cut-open cube of the logo.
   It holds the live drawing, shapes the button, bullets every cutaway and closes the page as the mark.
   Cool grey ground, near-black ink, one cobalt accent. The viewer keeps engine/style.css. */
:root{
  --bg:#f3efe7;--surface:#ebe5d9;--surface-2:#e0d8c8;--ink:#1d1a16;--muted:#5c544a;
  --accent:#c8552b;--accent-ink:#fff;--accent-hover:#9a3d1c;
  --shape:#c8552b;--field:#9a3d1c;--field-ink:#fff;--field-muted:#f3d9cc;
  --step-small:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-hero:clamp(2.75rem,6vw,6rem);
  --m:clamp(16px,3vw,40px);
  /* content sits in a 1440px column; colour fields still run to the edges */
  --side:max(var(--m),calc((100vw - 90rem) / 2));
  --gap:clamp(96px,14vw,200px);
  --font:"Roundo",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#15130f;--surface:#1d1a16;--surface-2:#28241f;--ink:#f1ebe0;--muted:#b9af9f;
  --accent:#ec7a4b;--accent-ink:#15130f;--accent-hover:#f0a27e;--shape:#c8552b;--field:#7a2f15;--field-ink:#f1ebe0;--field-muted:#f3d9cc;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#15130f;--surface:#1d1a16;--surface-2:#28241f;--ink:#f1ebe0;--muted:#b9af9f;
  --accent:#ec7a4b;--accent-ink:#15130f;--accent-hover:#f0a27e;--shape:#c8552b;--field:#7a2f15;--field-ink:#f1ebe0;--field-muted:#f3d9cc;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{font-weight:500;letter-spacing:-.025em;line-height:1.05;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the shape at button size */
.hexbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:3.5rem;padding:0 2.75rem;background:var(--accent);color:var(--accent-ink);font:600 var(--step-body)/1 var(--font);text-decoration:none;border:0;cursor:pointer;clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,18px 100%,0 50%);transition:background-color .2s,transform .2s}
.hexbtn:hover{background:var(--accent-hover)}
.hexbtn:active{transform:scale(.97)}
.hexbtn.light{background:var(--field-ink);color:var(--field)}
.hexbtn.light:hover{background:var(--field-muted)}
.hexbtn.small{min-height:44px;padding:0 30px;font-size:var(--step-small);clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%)}

/* bar: wordmark, three links, the theme switch */
.bar{position:relative;z-index:5;display:flex;align-items:center;gap:24px;padding:22px var(--side)}
.mark{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font:600 var(--step-body)/1 var(--font);letter-spacing:-.02em}
.mark svg{width:1.9rem;height:2.1rem;flex:none}
.bar nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.bar nav a{padding:10px 12px;text-decoration:none;font-size:var(--step-body);color:var(--ink);transition:color .2s}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--accent)}
.bar nav a[aria-current]{font-weight:600}
.theme{all:unset;cursor:pointer;width:2.75rem;height:2.75rem;display:grid;place-items:center;color:var(--ink)}
.theme svg{width:22px;height:22px}
.theme:hover{color:var(--accent)}

/* ---------- hero: the giant cube outline holds the live drawing ---------- */
.hero{position:relative;min-height:min(92svh,980px);display:grid;grid-template-columns:repeat(12,1fr);align-items:center;padding:0 var(--side) 40px;overflow:hidden}
.hero-text{grid-column:1/9;position:relative;z-index:2;padding:40px 0;max-width:min(50rem,56vw)}
.hero h1{font-size:var(--step-hero);letter-spacing:-.03em;line-height:1;margin-bottom:28px}
.hero-text>p{font-size:var(--step-lead);line-height:1.4;max-width:30ch;margin-bottom:36px}
.hero-shape{position:absolute;z-index:1;top:50%;left:calc(50% + min(42vw,50rem));height:min(116vh,72rem);aspect-ratio:.866;transform:translate(-50%,-50%);background:var(--shape);clip-path:var(--hex);animation:shutter 1.1s cubic-bezier(.2,.8,.2,1) both}
@keyframes shutter{from{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%)}to{clip-path:var(--hex)}}
.reel-track{position:absolute;left:7%;right:38%;top:20%;bottom:20%;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.reel-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;position:relative;display:block;text-decoration:none}
.slide img,.slide canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.slide.live img{opacity:0;transition:opacity .4s}
.hero-live{grid-column:1/7;position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 18px;max-width:560px;padding-bottom:24px}
.now{grid-column:1/-1;font-size:var(--step-body)}
.now b{font-weight:600}
.now span{color:var(--muted)}
.cut{display:contents}
.cut span{font-weight:600}
.cut input{width:100%;accent-color:var(--accent);height:28px;cursor:pointer}
.steps{display:flex;gap:6px}
.stepb{all:unset;cursor:pointer;width:3rem;height:3rem;display:grid;place-items:center;background:var(--surface);color:var(--ink);clip-path:var(--hex);font:500 var(--step-lead)/1 var(--font);transition:background-color .2s,color .2s}
.stepb:hover{background:var(--accent);color:var(--accent-ink)}

/* ---------- sections ---------- */
section{padding:0 var(--side)}
.after{margin-top:var(--gap)}

/* showcase: one shelf at a time, a square plate and spare text */
.show>*{min-width:0}
.show{display:grid;grid-template-columns:1fr 1fr;min-height:88svh;background:var(--surface);padding:0 var(--side)}
.show-plate{display:grid;place-items:center;padding:40px 40px 40px 0}
.show-plate .hexframe{width:min(100%,40rem);aspect-ratio:1;display:grid;place-items:center}
.hexframe{position:relative}
.hexframe i{position:absolute;inset:0 6.7%;background:var(--bg);clip-path:var(--hex)}
.hexframe img{position:relative;width:80%;height:80%;object-fit:contain}
.show-text{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:56px 0 0}
.tabs{display:flex;flex-wrap:wrap;gap:4px 22px}
.tabs button{all:unset;cursor:pointer;font-size:var(--step-body);color:var(--muted);padding:6px 0;transition:color .2s}
.tabs button[aria-selected="true"]{color:var(--ink);font-weight:600}
.tabs button:hover{color:var(--accent)}
.show h2{font-size:var(--step-head);margin-bottom:24px}
.show-body p{max-width:34ch;font-size:var(--step-lead);line-height:1.4}
.show-body .where{font-size:var(--step-body);color:var(--muted);margin-top:16px}
.cells{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.cells a{display:flex;align-items:center;padding:0 1.5rem;min-height:5rem;text-decoration:none;font-weight:600;transition:background-color .2s}
.cells a:first-child{background:var(--ink);color:var(--bg)}
.cells a:first-child:hover{background:var(--accent);color:var(--accent-ink)}
.cells a:last-child{background:var(--surface-2)}
.cells a:last-child:hover{background:var(--bg)}

/* how it works: many parts into one story into every part named */
.how-head{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.how-head h2{grid-column:1/6;font-size:var(--step-head);margin-bottom:20px}
.how-head p{grid-column:1/6;max-width:44ch}
.how-svg{display:block;width:100%;height:auto;margin:56px 0 32px}
.how-svg.tall{display:none}
.how-svg .a{fill:var(--surface-2)}.how-svg .b{fill:var(--muted);opacity:.55}.how-svg .c{fill:var(--accent)}.how-svg .d{fill:var(--ink)}
.how-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.how-cols b{display:block;font-size:var(--step-body);font-weight:600;margin-bottom:6px}
.how-cols p{max-width:30ch}

/* the list: each cutaway with its drawing in the cube shape as the bullet */
.list-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:40px}
.list-head h2{font-size:var(--step-head)}
.list-head span{color:var(--muted)}
.menu{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 64px}
.menu a{display:grid;grid-template-columns:4.5rem 1fr;gap:4px 20px;align-items:start;padding:14px 0;text-decoration:none}
.menu .hexframe{grid-row:1/4;width:4.5rem;height:5.2rem}
.menu .hexframe i{inset:0;background:var(--surface)}
.menu .hexframe img{position:absolute;inset:12%;width:76%;height:76%}
.menu .row1{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:6px}
.menu .row1 b{font-weight:600;font-size:var(--step-body);transition:color .2s}
.menu .row1 span{color:var(--muted);font-size:var(--step-small);text-align:right}
.menu p{color:var(--muted);font-size:var(--step-body);line-height:1.45;max-width:46ch}
.menu em{font-style:normal;color:var(--accent);font-size:var(--step-small);font-weight:600}
.menu a:hover b{color:var(--accent)}
.menu a:hover .hexframe i{background:var(--accent)}
.menu a .hexframe i{transition:background-color .25s}

/* about: an inset cobalt field */
.about{margin:var(--gap) 20px 0;padding:0 max(0px,calc(var(--side) - 20px));background:var(--field);color:var(--field-ink);min-height:min(110svh,1000px);position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.about-l{padding:3.5rem}
.about h2{font-size:var(--step-head);margin-bottom:48px}
.about .hexframe{width:38vw;max-width:620px;aspect-ratio:.866;position:absolute;left:calc(max(0px,var(--side) - 20px) + 56px);bottom:-12%}
.about .hexframe i{inset:0;background:var(--field-ink)}
.about .hexframe img{position:absolute;inset:14%;width:72%;height:72%}
.about-r{padding:3.5rem 3.5rem 3.5rem 0;display:flex;flex-direction:column;gap:56px;justify-content:flex-start;max-width:420px;justify-self:end;width:100%}
.about-r h3{font-size:var(--step-lead);font-weight:600;letter-spacing:-.01em;margin-bottom:10px}
.about-r p{color:var(--field-ink);max-width:38ch}

/* the browse pages */
.page-head{padding-top:clamp(24px,6vw,72px)}
.page-head h1{font-size:var(--step-hero);letter-spacing:-.03em;margin-bottom:20px}
.page-head>p{font-size:var(--step-lead);max-width:40ch;line-height:1.4}
.browse{position:sticky;top:0;z-index:4;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:16px var(--side);margin:40px calc(var(--side) * -1) 0;background:var(--bg)}
.search{display:flex;align-items:center;gap:12px;flex:1 1 280px;max-width:30rem;padding:0 18px;min-height:3.25rem;background:var(--surface)}
.search svg{width:20px;height:20px;color:var(--muted);flex:none}
.search input{all:unset;flex:1;min-width:0;font:400 var(--step-body) var(--font);color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.found{color:var(--muted);margin-left:auto}
.shelf{margin-top:72px}
.none{margin-top:56px;font-size:var(--step-lead)}
.page-text{max-width:760px}
.credit-list{margin-top:56px;display:grid;gap:48px}
.credit-list h2{font-size:var(--step-lead);margin-bottom:20px}
.credit-list dl{margin:0;display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:16px 32px}
.credit-list dt{font-weight:600}
.credit-list dt a{text-decoration:none;color:var(--accent)}
.credit-list dt a:hover{text-decoration:underline}
.credit-list dd{margin:0;max-width:56ch}
.credit-list .lic{display:block;color:var(--muted);font-size:var(--step-small);margin-top:4px}

/* ---------- footer: the mark, built large ---------- */
.foot{margin-top:var(--gap);background:var(--surface);padding:clamp(40px,6vw,80px) var(--side) calc(32px + env(safe-area-inset-bottom,0px))}
.foot-mark{display:flex;align-items:flex-end;gap:clamp(16px,3vw,40px)}
.foot-mark svg{height:clamp(120px,30svh,300px);width:auto;flex:none}
.foot-mark b{font-size:clamp(2.5rem,9vw,9rem);font-weight:500;letter-spacing:-.04em;line-height:.85}
.foot-cols{display:grid;grid-template-columns:repeat(12,1fr);gap:32px 24px;margin-top:56px}
.foot-col{grid-column:span 3;display:flex;flex-direction:column;gap:10px}
.foot-col h2{font-size:var(--step-body);font-weight:600;letter-spacing:0;margin-bottom:4px}
.foot-col a{text-decoration:none;color:var(--ink);font-size:var(--step-small);width:fit-content;display:inline-flex;align-items:center;gap:8px}
.foot-col a:hover{color:var(--accent)}
.foot-col svg{width:16px;height:16px}
.foot-about{grid-column:10/13}
.foot-about p{font-size:var(--step-small);margin-bottom:8px}
.foot-end{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;font-size:var(--step-small);color:var(--muted)}

/* ---------- motion: parts of each section arrive in turn ---------- */
.rise{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;transform:none}
.no-js .rise{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .hero-shape{animation:none}
  *{scroll-behavior:auto!important}
}

/* ---------- big screens (a 27-inch iMac is 2560 wide): everything grows together ---------- */
@media (min-width:1800px){html{font-size:112.5%}}
@media (min-width:2300px){html{font-size:125%}}

/* ---------- phone: its own composition ---------- */
@media (max-width:860px){
  .bar{padding:16px var(--side);gap:12px}
  .bar nav a:not(.all){display:none}
  .hero{display:flex;flex-direction:column;min-height:auto;padding-bottom:0}
  .hero-live{order:2}
  .hero-shape{order:3}
  .hero-text{padding:18px 0 20px;max-width:none}
  .hero h1{font-size:11.5vw;margin-bottom:16px}
  .hero-text>p{font-size:var(--step-body);margin-bottom:24px}
  .hero-live{max-width:none;padding-bottom:16px}
  .hero-shape{position:relative;top:auto;left:50%;transform:translateX(-50%);height:auto;width:130vw;margin:8px 0 -26vw;aspect-ratio:.866}
  .reel-track{left:24%;right:24%;top:20%;bottom:30%}
  .show{grid-template-columns:1fr;min-height:0;padding-bottom:24px}
  .show-plate{padding:24px 0 8px}
  .show-text{padding:8px 0 0;gap:28px}
  .tabs{gap:2px 18px}
  .cells{grid-template-columns:1fr}
  .cells a{min-height:60px}
  .how-head h2,.how-head p{grid-column:1/-1}
  .how-body{display:grid;grid-template-columns:1fr 42vw;gap:16px;align-items:stretch;margin-top:32px}
  .how-svg.wide{display:none}
  .how-svg.tall{display:block;margin:0}
  .how-cols{grid-template-columns:1fr;gap:0;align-content:space-between}
  .how-cols p{font-size:var(--step-small)}
  .menu{grid-template-columns:1fr;gap:0}
  .menu a{grid-template-columns:56px 1fr;gap:2px 16px}
  .menu .hexframe{width:56px;height:65px}
  .about{margin:var(--gap) 10px 0;grid-template-columns:1fr;min-height:0;padding-bottom:62vw}
  .about-l{padding:32px 24px 0}
  .about h2{font-size:8.5vw;margin-bottom:28px}
  .about-r{padding:0 24px 24px;max-width:none;gap:28px;justify-self:stretch}
  .about .hexframe{width:76vw;left:50%;transform:translateX(-50%);bottom:-14vw}
  .browse{gap:10px 16px}
  .found{margin-left:0}
  .credit-list dl{grid-template-columns:1fr;gap:4px}
  .credit-list dd{margin-bottom:16px}
  .foot-mark{flex-direction:column;align-items:flex-start;gap:20px}
  .foot-mark svg{height:18svh}
  .foot-mark b{font-size:14vw}
  .foot-col{grid-column:span 6}
  .foot-about{grid-column:1/-1}
}

/* phone held sideways: words on the left, the live cutaway on the right, all on one short screen */
@media (max-width:960px) and (orientation:landscape) and (max-height:540px){
  .hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;column-gap:16px;min-height:calc(100svh - 76px);align-content:center}
  .hero-text{grid-column:1;grid-row:1;padding:4px 0 10px}
  .hero h1{font-size:5.2vw;margin-bottom:10px}
  .hero-text>p{font-size:var(--step-small);margin-bottom:14px;max-width:38ch}
  .hexbtn{min-height:46px;padding:0 32px}
  .hero-live{grid-column:1;grid-row:2;order:0;padding-bottom:0}
  .hero-shape{grid-column:2;grid-row:1/3;order:0;position:absolute;width:auto;height:150svh;left:auto;right:-14vw;top:50%;transform:translateY(-50%);margin:0}
  .reel-track{left:6%;right:36%;top:26%;bottom:26%}
}

/* ---------- portrait phone: centred, whole shapes ---------- */
@media (max-width:860px) and (orientation:portrait),(max-width:600px){
  /* the hero hexagon: whole, centred, the drawing centred inside it */
  .hero-shape{position:relative;left:auto;top:auto;transform:none;width:min(88vw,520px);height:auto;margin:20px auto 32px;align-self:center}
  .reel-track{left:9%;right:9%;top:24%;bottom:24%}
  /* the panel: a whole white hexagon centred under the words */
  .about{padding-bottom:40px}
  .about .hexframe{position:relative;left:auto;bottom:auto;transform:none;display:block;width:min(70vw,360px);margin:8px auto 36px}
  .about-r .hexbtn{display:flex;width:fit-content;margin:0 auto}
  /* the footer: centred */
  .foot{text-align:center}
  .foot-mark{align-items:center}
  .foot-cols{grid-template-columns:1fr;justify-items:center}
  .foot-col{grid-column:1/-1;align-items:center}
  .foot-about{grid-column:1/-1}
  .foot-end{flex-direction:column;gap:20px}
}

/* ---------- the 60-second film ---------- */
.filmlink{display:block;width:fit-content;margin-top:18px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.filmlink:hover{color:var(--accent)}
.film-head{display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px;margin-bottom:40px}
.film-head h2{grid-column:1/7;font-size:var(--step-head)}
.film-head p{grid-column:7/13;align-self:end;max-width:44ch}
.film-frame{position:relative;background:var(--ink);aspect-ratio:16/9;overflow:hidden}
.film-frame video{display:block;width:100%;height:100%;object-fit:cover}
.film-play{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center;background:rgba(29,26,22,.18);transition:background-color .25s}
.film-play:hover{background:rgba(29,26,22,.05)}
.film-play .hexbtn{min-height:4.5rem;padding:0 3.5rem;font-size:var(--step-lead)}
.film-play:hover .hexbtn{background:var(--accent-hover)}
.film-play:focus-visible .hexbtn{outline:3px solid var(--paper,#fff)}
.film-frame.on .film-play{display:none}
.film-credit{margin-top:14px;color:var(--muted);font-size:var(--step-small)}
@media (max-width:860px){
  .film-head{grid-template-columns:1fr;gap:14px;margin-bottom:24px}
  .film-head h2,.film-head p{grid-column:1/-1}
  .film-frame{margin:0 calc(var(--side) * -1)}
  .film-play .hexbtn{min-height:3.5rem;padding:0 2.5rem;font-size:var(--step-body)}
}