/* Kolin Din Art — rebuilt home page.
   Tokens/structure ported from the Cargo rendering: nav 25%, main 77%,
   h2 2.2rem, bodycopy 1.4rem, caption 1.2rem, strip gutter 4rem,
   gallery gutter 2rem, nav padding 4rem/6rem, slideshow 57rem. */
:root{
  --background-color:#ffffff;
  --text-color:#000000;
  --accent-color:#ef1a3a;
  --border-lines:rgba(213,213,213,.75);
}
*{box-sizing:border-box}
/* ROOT LAW (decisions #8, #25): the root font size follows the WINDOW WIDTH
   ONLY. Cargo's live site grows the type on tall windows (height boost) —
   that boost is dead in the rebuild. 0.0081 = Cargo's desktop 9/1000 rule. */
html{font-size:clamp(10.02px, min(100vw * 0.0081, 31.104px), 31.104px)}
body{margin:0;background:var(--background-color);color:var(--text-color);
  font-family:"Diatype Variable","Helvetica Neue",Arial,sans-serif;font-weight:333;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent-color)}
.bodycopy{display:block;font-size:1.4rem;font-weight:333;line-height:1.2em}
h1{font-size:3.2rem;font-weight:300;line-height:1.2em;color:rgba(0,0,0,.75);margin:0}
h2{font-size:2.2rem;font-weight:300;line-height:1.2em;color:rgba(0,0,0,.75);margin:0}
.caption{display:block;font-size:1.2rem;font-weight:300;line-height:1;color:rgba(0,0,0,.85);margin:.5em 0 2em}
.caption a{color:inherit}
small,.small{display:block;font-size:1.2rem;font-weight:333;color:rgba(0,0,0,.5);line-height:1.3em}
/* Kolin 2026-10-28: artwork meta line is normal black, not Cargo grey. */
.art-meta{color:#000}
small a{color:rgba(0,0,0,.8)}
hr{border:0;height:1px;background:var(--border-lines);margin:1rem 0}
.link-wall{margin-top:4rem}
.text-icon{width:1em;height:1em;display:inline-block;vertical-align:-.18em}

/* layout: pinned 25% nav overlay + 77% main (flex-end, as Cargo renders) */
.layout{position:relative}
nav.page.pinned{position:fixed;left:0;top:0;width:25%;min-height:100vh;
  background:var(--background-color);z-index:398}
nav.page.pinned .page-content{padding:4rem 0 4rem 6rem}
.logo-wrap{display:block}
.logo{display:block;width:38.9%;max-width:100%}
.logo-wrap h2{margin-top:.2rem}
nav .menu{display:block;font-size:1.3rem;color:rgba(0,0,0,.75);line-height:1.5em}
nav .menu a{color:#000}
nav.page a.active{color:#ff0000}  /* #32: current-page nav item red — scoped to nav so toggle glyphs keep #47 colors */
nav .desk-menu{display:block;margin-bottom:1rem}
nav.page small,nav.page .small{font-size:1.4rem}  /* nav-bottom lines follow the 1.4rem meta standard (#41/#68) */
main.page.main{display:flex;justify-content:flex-end}
main.page.main .page-layout{width:77%}  /* decision #57: width, not max-width — with auto width the layout shrink-to-fits its content, so after a phone->desktop resize the stale inline img width from fitHero() locks the columns narrower; refresh was the only cure */
main.page.main .page-content{padding:4rem}
/* top gap for the dot/dots toggle row = equal to the toggle→gallery gap
   (decision #35, 2026-10-27: "I feel it should be equal to toggle → gallery
   gap"), i.e. 1.8rem, not the arch 1rem or the inherited Cargo 4rem.
   Left/right/bottom stay 4rem. */
main.page.main .page-content:has(.view-toggle){padding-top:1rem}

/* hero slideshow — Cargo track engine, same as arch local (measured live
   2026-10-27): photos slide sideways in a horizontal track (0.5s), autoplay
   every 3s, pause while the pointer is over the frame, and the nav arrows
   (30px circles, 15px inset, bg rgba(87,87,87,.35), white chevron stroke
   1.5px — the theme's ::part(slideshow-nav) tokens) appear ON HOVER only.
   Frame = main column width, 57rem max height, each photo fitted — never
   cropped; captions sit below the photo, left aligned. */
.gallery-slideshow{position:relative;width:var(--ssw,100%)}
.ss-frame{position:relative;overflow:clip}
.ss-track{display:flex;overflow:visible;transition:transform .5s cubic-bezier(.24,0,.29,1);will-change:transform}
.ss-slide{flex:0 0 100%;width:100%;display:flex;flex-direction:column}
.ss-slide img{display:block;cursor:zoom-in}  /* Kolin request 2026-10-27: pointer
  over the photo signals "click to zoom" (Cargo itself shows no cursor hint) */
.ss-slide .caption{margin-top:.5em;margin-bottom:0;text-align:left}
.ss-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:30px;height:30px;padding:0;
  border:0;border-radius:50%;background:rgba(87,87,87,.35);cursor:pointer;opacity:0;transition:opacity .15s ease-in-out}
.ss-prev{left:15px}.ss-next{right:15px}
.ss-arrow svg{display:block;width:100%;height:100%}
.ss-arrow svg path{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.5px;stroke-linecap:butt}
.ss-arrow:hover,.ss-arrow:focus-visible{background:rgba(87,87,87,.5)}
.ss-arrow:hover svg path{stroke:rgba(255,255,255,1)}
.gallery-slideshow:hover .ss-arrow,.gallery-slideshow:focus-within .ss-arrow{opacity:1}
.scroll-hint{text-align:right;color:rgba(0,0,0,.46)}

/* quick-view zoom overlay (measured live Cargo, same shape as arch .qv) */
.qv{position:fixed;inset:0;z-index:5001;background:var(--background-color);display:none}
.qv.open{display:block}
.qv-stage{position:absolute;inset:3rem;overflow:clip}
.qv-photo{display:flex;align-items:center;justify-content:center;height:100%}
.qv-photo img{max-width:100%;max-height:100%;display:block}
.qb{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;padding:0;
  border:0;border-radius:50%;background:rgba(87,87,87,.35);cursor:pointer}
.qb svg{display:block;width:100%;height:100%}
.qb svg path{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.5px;stroke-linecap:butt}
.qb:hover{background:rgba(87,87,87,.5)}
.qb-close{top:20px;right:20px;transform:none}
.qb-prev{left:25px}.qb-next{right:25px}

/* strips: 4 units, 4rem gutter */
.column-set{display:grid;grid-template-columns:repeat(4,1fr);gap:4rem;margin:4rem 0}
.unit{min-width:0}
.strip-text .hint{font-size:1.2rem;color:rgba(0,0,0,.55)}
.unit .linked{display:block}
.unit .linked img{width:100%;display:block}
img.tezos{width:3.2rem;display:inline-block}

/* view toggle: dot = slideshow, dots = waterfall-gallery (decisions #17/#18).
   Canonical spec: wiki/gallery-toggle.md. Glyph per arch precedent (#34):
   1.2em of the 1.4rem bodycopy = 1.68rem. Spacing law (#44/#45/#46, Kolin
   2026-10-28): icon<->icon = top = bottom = 1rem on EVERY site; phones keep
   the bar clearance under the fixed header (see the max-width block below). */
.view-toggle{display:flex;gap:1rem;line-height:1;font-size:1.4rem;margin-bottom:1rem}
.view-toggle .text-icon{width:1.2em;height:1.2em;display:block}
.icon-link{display:inline-block;color:rgb(171,171,171);text-decoration:none}
.icon-link.active{color:#000}
.intro{font-size:1.4rem;line-height:1.2em;margin:0 0 2rem}
.intro:last-child{margin-bottom:0}
/* meta strip + intro: narrow meta, wider intro; stack on phones */
.column-set.meta-intro{grid-template-columns:1fr 1fr;gap:4rem}
.column-set.meta-intro small{font-size:1.4rem;line-height:1.2em;color:#000}
.column-set.meta-intro small a{color:var(--accent-color)}
.intro a{color:var(--accent-color)}
.column-set.meta-intro .meta-label{font-size:1.2rem;color:rgba(0,0,0,.5)}
h1 + span{font-size:1.4rem;line-height:1.5em}
/* on collection pages the hero is hidden while the wall view is active;
   scoped to .toggleable so the home page hero is untouched */
.gallery-slideshow.toggleable:not(.show){display:none}
/* hide the down-arrow hint while the wall view is active */
.gallery-slideshow.toggleable:not(.show)~.scroll-hint{display:none}
/* grid-gallery view (type #27/#32, AGOA — decisions #58/#59): uniform
   columns, count steps down with the shared ladder, gutter 1rem/1rem (#50),
   tiles are zoom-only (#28/#39), the link-wall stays below in BOTH views. */
.view-toggle~.gallery-grid{margin-top:1rem}
/* #46 rhythm also governs a two-column hero block (ROP): the first block after
   the toggle must sit 1rem below it, not the default 4rem column-set margin. */
.view-toggle~.column-set{margin-top:1rem}
.view-toggle~.column-set.art-split{margin-top:1rem}
.collection-hero .gallery-grid{margin-top:1rem}
/* First block on the page: the 4rem frame padding already provides the gap;
   the block's own 4rem top margin would stack to 8rem (Kolin, 2026-10-30) */
main.page.main .page-content > .column-set:first-child{margin-top:0}
.gallery-grid.toggleable:not(.show){display:none}
.gallery-grid .columns-grid{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:1rem}
.gallery-grid .media-item{cursor:zoom-in}
.gallery-grid .media-item img{width:100%;display:block}
.view-toggle~.gallery-bricks{margin-top:1rem}
.collection-hero .gallery-bricks{margin-top:1rem}
.gallery-bricks.toggleable:not(.show){display:none}
/* brick gallery (#24/#26/#50): flex rows scaled to fill the column edge-to-edge,
   1rem gutters, exact ratios (no crop), tiles zoom-only; the repack script in
   rop-collection.js re-packs rows at the N ladder (1400->4, 600->3, phones 2)
   with orphan absorb (Kolin 2026-10-29). */
.bricks{display:block;width:100%}
.br-row{display:flex;flex-shrink:0;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;max-width:100%}
.br-row .brk{position:relative;display:flex;flex:0 0 auto;max-width:100%;cursor:zoom-in}
.br-row .brk:hover{opacity:.85}
.br-row .brk .mi{max-width:none}
.br-row .brk .mi img{object-fit:fill}
.br-row.orphan-row{display:inline-flex;width:auto}
/* collection description rides at Cargo's text scale (1.4rem, lh 1.2) — the
   bare 1rem looked too small next to the 3.2rem title (Kolin, 2026-10-29) */
.collection-hero .art-text p{font-size:1.4rem;line-height:1.2}
.collection-hero .art-meta{font-size:1.4rem}
/* standalone artwork page (By Pink Path): Cargo's authored h2 title scale */
.page.main .art-text h2{font-size:2.2rem;line-height:1.5em;margin:0}
.art-text .nft-block{font-size:1.4rem;line-height:1.2em}
/* gallery -> title junction (Kolin 2026-10-27): the title needs real air under
   the gallery block. Cargo's own h1 on this page carried an inline
   line-height:1.5 — restored here. Gap normalised to the ladder, then set by
   Kolin to 1rem (2026-10-28: 4rem "too much", then "now with 1rem"). */
.page.main h1{line-height:1.5em;margin-top:1rem}

/* columnized gallery (waterfall). Hidden until the dots icon is clicked:
   wall photos are plain links to artwork pages — never zooms (Kolin 2026-10-27) */
.gallery-columnized{margin-top:4rem;display:none}
.gallery-columnized.show{display:block}
/* canonical [[gallery-toggle]] rule (#46): the waterfall gallery right after
   the toggle sits 1rem below it — the 4rem block margin applies only when
   the gallery follows other content (e.g. the link-wall on art home). */
.view-toggle~.gallery-columnized{margin-top:1rem}
.gallery-columnized.link-wall{margin-top:4rem}
.columns-grid{display:grid;grid-template-columns:repeat(var(--cols,4),var(--colw,244.5px));
  column-gap:var(--column-gutter-width,21.5px)}
.columns-column{display:flex;flex-direction:column;gap:var(--column-gutter-height,0)}
.media-item{display:block}
.media-item img{width:100%;display:block}
.media-item.tile{cursor:zoom-in}  /* decision #28: zoom cursor only on zoomable tiles */
.gallery-columnized .caption{margin-top:.5em;margin-bottom:2em}
.column-set.two{grid-template-columns:repeat(2,1fr);gap:4rem}

/* "open this artwork" link inside the slideshow zoom (slideshow view only) */
.qv-open{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);
  font-size:1.2rem;font-weight:400;color:rgba(0,0,0,.7);text-decoration:none}
.qv-open:hover{color:#000}

/* ---------- Optimism Bias (collection #5, built 2026-10-30) ----------
   Hub hero: slideshow beside the title (dot view); the waterfall gallery view
   (#32, N=6 Cargo columns) replaces the whole hero block in place (#59). */
.hero-slide:not(.show){display:none}
.hero-grid.show{margin-top:1rem}
.column-set.meta-strip{grid-template-columns:4fr 5fr 3fr;gap:4rem}
.meta-strip .unit{font-size:1.4rem;line-height:1.2em;color:#000}
.meta-strip .meta-label{font-size:1.2rem;color:rgba(0,0,0,.5);display:block}
.meta-strip a{color:var(--accent-color)}
.meta-strip .linked img{width:15rem;max-width:100%;display:block}
.see-also{margin-top:1rem}
.see-also img{width:40%;max-width:100%;display:block}
.see-also small{color:#000}

/* mobile (<770px) — root ramp from the arch engine (Cargo-calibrated:
   320px -> 10.02, 430px -> 13.48) */
@media(max-width:769px){
  html{font-size:clamp(10.02px, calc(10.02px + (100vw - 320px) * 0.031476), 13.801px)}
  .layout{flex-direction:column}
  /* live art mobile hides the desktop rail and replaces it with the
     pinned white bar (header-—-mobile-text + header-—-mobile-logo).
     Measured live 2026-10-27 @320-768: bar 5rem tall, logo 3rem, title 2.2rem/300 */
  nav.page.pinned{display:none}
  .column-set.meta-intro{grid-template-columns:1fr}
  .column-set.meta-strip{grid-template-columns:1fr}
  /* mobile slideshow: centered, width-limited (Cargo mobile-limit-by width) */
  .ss-slide img{margin-left:auto;margin-right:auto}
  /* live geometry @375 (root 11.76px): title left inset 16.46=1.4rem, logo
     right gap 11.2=0.95rem, logo top 7.4, title h2 top 12.34 lh 1.2, visible
     title weight 400 (h2 300 + <b> overridden to 400). */
  .mobile-top{position:fixed;top:0;left:0;right:0;z-index:400;background:var(--background-color);height:5rem}
  .mobile-top .mt-bar{height:100%;max-width:none;padding:0 0.95rem 0 1.4rem;display:flex;align-items:flex-start;gap:.8rem}
  .mobile-top .mt-bar h2{margin:0;padding-top:1.05rem;font-size:2.2rem;font-weight:300;color:rgba(0,0,0,.75);line-height:1.2;white-space:nowrap;overflow:hidden}
  .mobile-top .mt-bar h2 b{font-weight:400}
  .mobile-top .mt-logo{margin-left:auto;margin-top:.63rem}
  .mobile-top .mt-logo img{height:3rem;width:auto;object-fit:contain;display:block}
  main.page.main .page-layout{max-width:none;width:100%}  /* desktop rail trick justify-content:flex-end would right-align content on phones */
  main.page.main{justify-content:flex-start}
  main.page.main .page-content{padding:5rem 0.95rem 1.5rem 1.4rem}  /* clearance under fixed bar: 5rem bar + 0rem gap (decision #54, Kolin: "0rem looks good"; supersedes #53's 1rem). Insets 1.4rem/0.95rem match live */
  main.page.main .page-content:has(.view-toggle){padding-top:5rem}  /* same clearance (decision #54) */
  .art-photo .media-item img{margin-left:auto;margin-right:auto}  /* decision #56: when the window-height fit shrinks the hero on phones, it sits centered in its column (desktop stays left-aligned) */
  .column-set{grid-template-columns:repeat(4,1fr);gap:1.5rem}
  .unit.strip-text{grid-column:1/-1}
  .columns-grid{grid-template-columns:repeat(var(--cols,2),var(--colw,160px))}
  /* nav-mobile menu page (live-verified @375): gray panel rgba(0,0,0,.1)
     behind the whole content (only the page container — bodycopy stays
     transparent, otherwise gray-on-gray makes a darker band), bar stays white,
     links 2rem/700 lh 4rem flush at 1.4rem inset,
     "Collections" label 1.4rem/333, hr 1px rgba(213,213,213,.75), © 1.2rem/300 */
  main.menu-page{background:rgba(0,0,0,.1)}
  .menu-page hr{height:1px;border:0;background:rgba(213,213,213,.75);margin:1.2rem 0}
  .menu-page .menu-link{display:block;font-size:2rem;font-weight:700;color:rgba(0,0,0,.75);line-height:4rem;margin:0}
  .menu-page .menu-sect{display:block;font-size:1.4rem;font-weight:333;color:rgba(0,0,0,.75);margin:.4rem 0}
  .menu-page .caption{margin:1.2rem 0 0}
}
@media(min-width:770px){
  .mobile-top{display:none}
  .menu-page .menu-link{display:block;font-size:2rem;font-weight:700;color:rgba(0,0,0,.75);line-height:2.4em;margin:0}
  .menu-page .menu-sect{display:block;font-size:1.4rem;font-weight:333;color:rgba(0,0,0,.75);margin:.4rem 0}
}

/* ---------- ARTWORK PAGES (pilot 2026-10-28) ----------
   Artwork page = nav + breadcrumb + split column-set + link-wall.
   Split follows Cargo's authored spans via --span-a/--span-b (units TOUCH,
   like decision #41: the visible gap is empty space inside the photo unit).
   Hero: Cargo engine caps at scale height when limit-by=height is set
   (artwork.js fits it); uncapped heroes fill the column width. Root law #25
   (width-only) means the 55rem cap scales with our root, not Cargo's boost. */
/* Desktop-only: phones keep the 6.7rem fixed-bar clearance from the mobile
   block (decision #52: this unscoped 4rem previously beat it and clipped the
   first content line behind the "Kolin Din / Art" bar). */
@media(min-width:770px){main.page.main.art-page .page-content{padding:4rem}}
.column-set.art-split{grid-template-columns:var(--span-a,6fr) var(--span-b,6fr);gap:4rem;margin:4rem 0}
/* Kolin 2026-10-28: any art page — the collection heading needs no rule line after it;
   the gallery/hero/split below it sits exactly 1rem away. */
.page.main h1 + hr{display:none}
.bodycopy h2.collection-link{margin-bottom:1rem}
.collection-link + .column-set.art-split{margin-top:0}
.art-split .art-photo,.art-split .art-text{min-width:0}
.art-photo .media-item{display:block}
.art-photo .media-item img{display:block;cursor:zoom-in}
.art-text h1{margin-bottom:1rem}
.nft-block{display:block;font-size:1.4rem;font-weight:333;line-height:1.3em;color:rgba(0,0,0,.75);margin-top:1rem}
.nft-block a{color:var(--accent-color)}
.art-page .page-content h2 a{color:rgba(0,0,0,.75)}
@media (max-width:600px){
  /* Cargo mobile-stack=true: photo above, text below, single column */
  .column-set.art-split{grid-template-columns:1fr;gap:2rem}
  .art-split .art-photo,.art-split .art-text{grid-column:1/-1}
}