/*
Theme Name: Katie Rae
Theme URI: https://katierae.com
Author: Built for Katie Rae
Description: Image-first portfolio theme. A carousel of featured work on the front page, one frame per screen inside each project, and a prints page with three switchable states.
Version: 1.0.1
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: katierae
Tags: photography, portfolio, minimal
*/

html{background:#E6E8ED}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
.vt-hero{view-transition-name:kr-hero}

:root{
  --paper:#E6E8ED;
  --paper-rgb:230,232,237;
  --paper-deep:#D8DBE3;
  --ink:#15171C;
  --muted:#7D818C;
  --lb-bg:#F4F5F7;
  --lb-ink:#15171C;

  --gutter:clamp(22px,4.6vw,78px);
  --edge:max(var(--gutter), calc((100vw - 1880px) / 2));
  --header-h:58px;

  --maxh:min(calc(100svh - 170px), 900px);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.2,.6,.2,1);

  /* A faint 64x64 grain tile, tinted to the paper colour and baked at a
     fixed density — a plain background-image, not a blend-mode trick, so
     it renders identically everywhere. Shared so every opaque paper-
     coloured surface (the page, the dropdown, the mobile panel) carries
     the same texture and none of them show as a flat, mismatched patch
     against the ones around it. If --paper is ever changed, this needs
     regenerating to match. */
  --grain:url("data:image/png;base64,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");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;padding-top:var(--header-h);
  background-color:var(--paper);color:var(--ink);
  background-image:var(--grain);
  background-repeat:repeat;
  font-family:var(--serif);font-size:16px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;border:0}
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2{margin:0;font-weight:400}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.mono{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.13em;text-transform:uppercase}
.muted{color:var(--muted)}

/* ------------------------------------------------------------------
   Header — fixed, gradient scrim, hides on scroll down.
   Children are given min-width:0 and the menu button flex-shrink:0, so
   nothing can be squeezed off the edge of a narrow screen regardless of
   the brand text length.
   ------------------------------------------------------------------ */
.hdr{
  position:fixed;inset:0 0 auto 0;height:var(--header-h);z-index:150;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--edge);background:none;
  transition:transform .4s var(--ease);
  max-width:100%;overflow:hidden;
}
.hdr::before{
  content:"";position:absolute;inset:0 0 -28px 0;pointer-events:none;z-index:-1;
  opacity:1;transition:opacity .3s var(--ease);
  background:linear-gradient(to bottom,
    rgba(var(--paper-rgb),1) 0%,
    rgba(var(--paper-rgb),.8) 21%,
    rgba(var(--paper-rgb),.4) 47%,
    rgba(var(--paper-rgb),0) 100%);
}
.hdr.hidden{transform:translateY(-100%)}
.hdr.hidden::before{opacity:0}

.brand{
  font-family:var(--serif);font-size:clamp(16px,4.6vw,20px);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis;
}

.nav{min-width:0}
.nav>ul{display:flex;align-items:flex-start;gap:clamp(22px,4vw,64px)}
.nav li{position:relative}
.nav a{
  display:block;font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:3px 0;transition:color .22s var(--ease);
}
.nav a:hover,.nav li.current>a{color:var(--ink)}
.nav>ul>li.current>a,.nav .sub a.current,
.nav .current-menu-item>a,.nav .current-menu-parent>a,.nav .current-menu-ancestor>a,.nav .current_page_item>a{
  color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}

.sub-float{
  position:fixed;top:-3000px;right:0;
  z-index:400;min-width:156px;
  background-color:var(--paper);background-image:var(--grain);
  padding:13px 20px 15px 26px;
  text-align:right;line-height:1.45;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),visibility .22s;
}
.sub-float,.sub-float *{pointer-events:none}
.sub-float.open{opacity:1;visibility:visible}
.sub-float.open,.sub-float.open *{pointer-events:auto}
.sub-float li+li{margin-top:4px}
.sub-float a{
  display:block;padding:1px 0;
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  transition:color .18s var(--ease);
}
.sub-float a:hover,.sub-float a.current{color:var(--ink)}
.sub-float a.current{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Menu button: never shrinks, never collapses to zero width. */
.menu-btn{
  display:none;flex:0 0 auto;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.menu-btn:hover{color:var(--ink)}

.panel{
  position:fixed;inset:0;z-index:180;background-color:var(--paper);background-image:var(--grain);
  padding:var(--header-h) var(--edge) var(--gutter);overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s;
}
.panel.open{opacity:1;visibility:visible}
.panel-close{
  position:absolute;top:0;right:var(--edge);height:var(--header-h);
  display:flex;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
.panel>ul{padding-top:34px;text-align:right}
.panel>ul>li{margin-bottom:26px}
.panel>ul>li>a{font-family:var(--serif);font-size:clamp(24px,7vw,34px);line-height:1.15}
.panel .sub{display:block;position:static;opacity:1;visibility:inherit;pointer-events:inherit;text-align:right;padding:14px 0 0;min-width:0}
.panel.open .sub{visibility:visible;pointer-events:auto}
.panel .sub li{margin-bottom:9px}
.panel .sub a{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase}
body.locked{overflow:hidden}

@media (max-width:880px){
  .nav{display:none}
  .menu-btn{display:block}
}

/* ------------------------------------------------------------------
   Shells / routing-independent page furniture
   ------------------------------------------------------------------ */
.wrap{padding:0 var(--edge);position:relative}
.pad{padding-top:clamp(46px,8vh,96px);padding-bottom:clamp(80px,15vh,170px)}
.route[data-route="project"] .pad{padding-top:clamp(20px,3vh,44px)}

.head{padding-bottom:clamp(40px,8vh,96px);max-width:38em}
.head h1{font-style:italic;font-size:clamp(24px,2.7vw,32px);line-height:1.2}
.head .note{margin:8px 0 0;color:var(--muted);font-size:15px}

/* Quiet return link, top left, below the header. */
.backlink{
  position:fixed;z-index:60;
  top:calc(var(--header-h) + 16px);left:var(--edge);
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);opacity:.62;
  transition:opacity .25s var(--ease),color .25s var(--ease);
  padding:4px 6px 4px 14px;
}
.backlink::before{
  content:"";position:absolute;left:2px;top:50%;
  width:6px;height:6px;
  border-left:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.backlink:hover{opacity:1;color:var(--ink)}
@media (max-width:860px){.backlink{top:calc(var(--header-h) + 8px)}}
.admin-bar .backlink{top:calc(var(--header-h) + 48px)}

/* Title runs vertically up the left edge, fixed halfway down the window. */
.head{
  position:fixed;top:50%;left:var(--edge);
  transform:translateY(-50%);
  z-index:5;padding-bottom:0;
  pointer-events:none;
}
.head h1{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-style:italic;font-size:clamp(15px,1.35vw,18px);line-height:1;
  letter-spacing:.02em;margin:0;
  max-height:74svh;
}
.wrap{position:relative}

@media (max-width:860px){
  .head{position:static;transform:none;padding-bottom:clamp(22px,4vh,40px)}
  .head h1{writing-mode:horizontal-tb;transform:none;max-height:none;font-size:clamp(19px,4.6vw,24px);line-height:1.2}
}

/* ------------------------------------------------------------------
   Hero gallery — one frame per screen
   ------------------------------------------------------------------ */
.scatter{display:block}
.scatter .frame{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:var(--gutter);
  align-items:center;
  min-height:75svh;
}
.stage{display:flex;align-items:center;justify-content:flex-end;height:70svh}
.stage img{
  max-height:70svh;max-width:100%;width:auto;height:auto;
  cursor:zoom-in;opacity:0;transition:opacity 1.5s var(--ease);
}
.stage img.land{max-height:49svh;max-width:70%}
.stage img.in{opacity:1}
.stage img.in:hover{opacity:.88;transition:opacity .3s var(--ease)}

/* Loupe — a soft light that follows the cursor across a photograph, the
   way you'd tilt a print under a lamp to catch it properly. Desktop with
   a real pointer only; genuinely subtle, since it's meant to support a
   close look at the work rather than perform on top of it. --mx/--my are
   set from JS as the cursor moves within the wrapper's own box. */
/* Loupe — a soft light that follows the cursor across a photograph, the
   way you'd tilt a print under a lamp to catch it properly. The glow is
   a separate span, sized and positioned by JS to match the image's own
   rendered box, rather than a wrapper around the image — a wrapper here
   would interfere with how the image is sized and right-aligned within
   .stage. Desktop with a real pointer only. */
.stage,.shot{position:relative}
@media (hover:hover) and (pointer:fine){
  .loupe-glow{
    position:absolute;pointer-events:none;
    opacity:0;transition:opacity .35s var(--ease);
    background:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.4), rgba(255,255,255,0) 72%);
    mix-blend-mode:soft-light;
  }
  .loupe-glow.is-hot{opacity:1}
}
.stage a{display:flex;align-items:center;justify-content:flex-end;height:100%}

.meta{align-self:center;max-width:19em}
.meta .num{display:block;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.13em;color:var(--ink)}
.meta .desc{display:block;margin-top:9px;font-family:var(--mono);font-size:11px;font-weight:300;letter-spacing:.09em;line-height:1.7;color:var(--muted)}
.meta a{display:block}
.meta a:hover .num{color:var(--muted)}

@media (max-width:860px){
  .scatter .frame{grid-template-columns:1fr;gap:16px;min-height:0;margin-bottom:clamp(46px,9vh,90px)}
  .stage{height:auto;justify-content:flex-start}
  .stage img{max-height:calc(100svh - 200px)}
  .stage img.land{max-height:calc(100svh - 200px);max-width:100%}
  .meta{max-width:none}
}

.pager{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(70px,13vh,150px)}
.pager a{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.pager a:hover{color:var(--ink)}

/* ------------------------------------------------------------------
   Landing carousel
   ------------------------------------------------------------------ */
.stage-wrap{position:relative;height:calc(100svh - var(--header-h));overflow:hidden}
.cstage{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;cursor:default}
.cstage.cur-left{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M21 10 L12 18 L21 26' fill='none' stroke='%2315171C' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 18 18, w-resize}
.cstage.cur-right{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M15 10 L24 18 L15 26' fill='none' stroke='%2315171C' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 18 18, e-resize}
.cstage.cur-open{cursor:pointer}
.ctrack{position:absolute;inset:0}
.cslide{
  position:absolute;top:50%;left:50%;
  will-change:transform,opacity;transform-origin:center center;
  background:#fff;padding:5px;
}
.cslide img{
  display:block;max-height:55svh;max-width:min(36vw,540px);width:auto;height:auto;
  user-select:none;-webkit-user-drag:none;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.cslide img.in{opacity:1}
.cslide.is-centre img{cursor:pointer}

.cbar{position:absolute;left:var(--edge);right:var(--edge);bottom:clamp(20px,4vh,40px);display:flex;align-items:baseline;justify-content:center;pointer-events:none}
.cbar>*{pointer-events:auto}
.ctitle{
  display:inline-flex;align-items:baseline;gap:11px;
  font-family:var(--mono);font-size:13px;letter-spacing:.15em;text-transform:uppercase;
  text-align:center;opacity:0;transition:opacity .5s var(--ease);
}
.ctitle .lead{color:var(--muted)}
.ctitle .sep{color:var(--muted);opacity:.5;letter-spacing:.06em}
.ctitle .name{color:var(--ink)}
.ctitle:hover .lead{color:var(--ink);transition:color .25s var(--ease)}
.ctitle.in{opacity:1}

.ccount{position:absolute;right:0;bottom:0;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
@media (max-width:600px){.ccount{position:static;display:none}}

.carrow{position:absolute;top:50%;z-index:120;width:52px;height:78px;transform:translateY(-50%);opacity:.34;transition:opacity .3s var(--ease)}
.carrow:hover{opacity:.85}
.carrow.is-prev{left:clamp(2px,1vw,18px)}
.carrow.is-next{right:clamp(2px,1vw,18px)}
.carrow::after{content:"";position:absolute;top:50%;left:50%;width:11px;height:11px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.carrow.is-prev::after{transform:translate(-40%,-50%) rotate(45deg)}
.carrow.is-next::after{transform:translate(-60%,-50%) rotate(-135deg)}
@media (max-width:760px){.carrow{display:none}.cslide img{max-height:48svh;max-width:70vw}}

body.is-stage{overflow:hidden}
body.is-stage .ftr{display:none}

/* Mobile: a plain scrolling column of photographs, in normal page flow —
   no fixed positioning, no snap points, nothing that has to line up with
   anything else. The page just scrolls, the way every other page on the
   site already does. */
.cmobile{display:none}
@media (max-width:760px){
  .stage-wrap{display:none}

  .cmobile{
    display:flex;flex-direction:column;
    gap:clamp(28px,7vh,56px);
    padding:clamp(24px,5vh,48px) 24px clamp(60px,10vh,110px);
  }
  .cmobile-item{
    display:flex;flex-direction:column;gap:12px;
  }
  .cmobile-item img{
    width:100%;height:auto;
    background:#fff;padding:5px;
    opacity:0;transition:opacity .8s var(--ease);
  }
  .cmobile-item img.in{opacity:1}
  .cmobile-name{
    font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  }
}

/* ------------------------------------------------------------------
   About / Contact
   ------------------------------------------------------------------ */
.about,.contact{max-width:34em}

/* About: a short page shouldn't leave the footer stranded halfway up the
   screen with dead space below it, and the text reads better as a
   centred column than pinned to the left edge. Body becomes a column
   the height of the viewport; main grows to fill whatever's left after
   the header and footer, and centres its content in that space — so the
   footer always sits at the bottom, however long the text is. */
/* Sticky footer, site-wide: a short page shouldn't leave the footer
   stranded partway up the screen with dead space below it. Body becomes
   a column the height of the viewport; main grows to fill whatever's
   left after the header and footer. Long pages are unaffected — main
   simply takes its natural, taller height, and the footer follows it
   down past the viewport as it always did. */
body{display:flex;flex-direction:column;min-height:100svh}
body main{flex:1 0 auto}
body .ftr{flex-shrink:0}

/* About: the text also reads better as a centred column than pinned to
   the left edge, with the vertical space distributing evenly around it. */
body.page-template-template-about-php main{
  display:flex;flex-direction:column;justify-content:center;
}
body.page-template-template-about-php .pad{padding-top:0;padding-bottom:0}
body.page-template-template-about-php .about{margin:0 auto}
.about .clients{margin-top:clamp(40px,7vh,72px);display:flex;flex-wrap:wrap;font-size:14px;color:var(--muted);line-height:2}
.about .clients li::after{content:"\00a0\00a0/\00a0\00a0"}
.about .clients li:last-child::after{content:""}

.prose{max-width:32em;line-height:1.7}
.prose p{margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.about .prose>p:first-child,.contact .prose>p:first-child{font-size:clamp(20px,2.1vw,25px);line-height:1.42;font-weight:300;margin-bottom:1.3em}
.prose a{border-bottom:1px solid rgba(20,24,26,.18)}
.prose a:hover{border-bottom-color:var(--ink)}

.contact .lines{margin:clamp(30px,5vh,54px) 0 0;line-height:1.9}
.contact .lines a{border-bottom:1px solid rgba(20,24,26,.18)}
.contact .lines a:hover{border-bottom-color:var(--ink)}
.contact .form{max-width:none;margin-top:clamp(38px,7vh,72px)}
.contact .form input,.contact .form textarea{
  width:100%;padding:11px 0;margin-bottom:4px;
  background:none;border:0;border-bottom:1px solid rgba(20,24,26,.16);border-radius:0;
  font:inherit;color:var(--ink);transition:border-color .25s var(--ease);
}
.contact .form input::placeholder,.contact .form textarea::placeholder{color:var(--muted);opacity:1}
.contact .form input:focus,.contact .form textarea:focus{outline:none;border-bottom-color:var(--ink)}
.contact .form textarea{resize:vertical;min-height:92px}
.kr-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin-top:18px}
.send{margin-top:22px;padding:0 0 3px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);transition:opacity .22s var(--ease)}
.send:hover{opacity:.55}
.form-note{margin:0 0 18px;padding:12px 0;border-bottom:1px solid rgba(20,24,26,.16);font-size:15px}
.form-note.is-error{color:#8c3328}

/* ------------------------------------------------------------------
   Prints — three states
   ------------------------------------------------------------------ */
.prints-quiet{min-height:54svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:31em;margin:0 auto}
.prints-quiet .big{font-style:italic;font-size:clamp(23px,2.8vw,32px);line-height:1.28}
.prints-quiet p{margin:16px 0 0;color:var(--muted);font-size:15.5px;line-height:1.65}
.prints-quiet .btn{margin-top:30px}
.prints-quiet .when{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-top:22px}
.prints-quiet .tiny{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:26px}

/* Sign-up: an email field and a small text button, matching the plain
   underline fields on the contact form rather than a boxed widget. */
.subscribe{
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  justify-content:center;margin-top:30px;width:100%;
}
.subscribe input[type="email"]{
  flex:1 1 14em;min-width:11em;
  padding:9px 0;background:none;border:0;border-bottom:1px solid rgba(20,24,26,.22);border-radius:0;
  font:inherit;font-size:15px;color:var(--ink);text-align:left;
  transition:border-color .25s var(--ease);
}
.subscribe input[type="email"]::placeholder{color:var(--muted);opacity:1}
.subscribe input[type="email"]:focus{outline:none;border-bottom-color:var(--ink)}
.subscribe button{
  padding:0 0 9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--ink);
  transition:opacity .22s var(--ease);
}
.subscribe button:hover{opacity:.55}

.sub-note{margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.sub-note.is-error{color:#8c3328}

.prints-quiet .subscribe-note{
  margin-top:14px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);opacity:.55;line-height:1.5;
}

.release-head{max-width:34em;padding-bottom:clamp(40px,7vh,84px)}
.release-head h1{font-style:italic;font-size:clamp(24px,2.7vw,32px);line-height:1.2}
.release-head p{margin:12px 0 0;color:var(--muted);font-size:15.5px}
.release-head .when{display:block;margin-bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}

.works{display:flex;flex-direction:column;gap:clamp(56px,10vh,120px)}
.work{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--gutter);align-items:center}
.work .shot{display:flex;justify-content:flex-end;align-items:center}
.work .shot img{max-height:52svh;width:auto;max-width:100%}
.work h3{font-style:italic;font-size:21px;line-height:1.25}
.work .sub{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.copies{margin-top:22px;max-width:16em}
.copy{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:7px 0;border-bottom:1px solid rgba(20,24,26,.12);font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;width:100%;text-align:left}
.copy .st{color:var(--muted)}
.copy.avail{color:var(--ink);cursor:pointer;transition:opacity .2s var(--ease)}
.copy.avail:hover{opacity:.55}
.copy.gone{color:var(--muted);opacity:.55}
.work .note{margin-top:16px;font-size:14px;color:var(--muted);max-width:22em;line-height:1.6}

.copies-fold{margin-top:20px;max-width:26em}
.copies-fold summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:7px 0;border-bottom:1px solid rgba(20,24,26,.16);transition:color .2s var(--ease)}
.copies-fold summary::-webkit-details-marker{display:none}
.copies-fold summary:hover{color:var(--ink)}
.copies-fold summary::after{content:"+";float:right;font-size:13px;line-height:1}
.copies-fold[open] summary::after{content:"–"}
.copies-fold .shut-label{display:none}
.copies-fold[open] .open-label{display:none}
.copies-fold[open] .shut-label{display:inline}
.copies-fold[data-complete] summary{opacity:.5}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.1em,1fr));gap:5px;padding:16px 0 4px}
.chip{display:flex;align-items:center;justify-content:center;padding:7px 0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink);border:1px solid rgba(20,24,26,.18);transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chip.avail:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.gone{color:var(--muted);border-color:rgba(20,24,26,.08);opacity:.45;text-decoration:line-through}

.btn{display:inline-block;margin-top:22px;padding:12px 24px;border:1px solid var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;transition:background .25s var(--ease),color .25s var(--ease)}
.btn:hover{background:var(--ink);color:var(--paper)}

.kr-state-note{position:fixed;left:0;right:0;bottom:0;z-index:500;padding:8px var(--edge);background:#14181c;color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.kr-state-note a{margin-left:12px;border-bottom:1px solid rgba(255,255,255,.4)}

@media (max-width:820px){
  .work{grid-template-columns:1fr;gap:20px}
  .work .shot{justify-content:flex-start}
  .work .shot img{max-height:60svh}
}

/* ------------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------------ */
.lb{position:fixed;inset:0;z-index:200;background:var(--lb-bg);display:flex;align-items:center;justify-content:center;padding:clamp(16px,5vh,54px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility .3s}
.lb.open{pointer-events:auto;opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb button{position:absolute;color:var(--lb-ink);opacity:.5;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;padding:16px;transition:opacity .25s var(--ease)}
.lb button:hover{opacity:1}
.lb .x{top:4px;right:8px}
.lb .p{left:4px;top:50%;transform:translateY(-50%)}
.lb .n{right:4px;top:50%;transform:translateY(-50%)}
.lb .count{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:var(--lb-ink);opacity:.45;font-family:var(--mono);font-size:11px;letter-spacing:.13em}

/* On a phone the image runs close to full width, so Prev/Next sitting at
   the left/right edges land on top of it. Moved above and below instead. */
@media (max-width:760px){
  .lb{padding:64px 18px 78px}
  .lb img{max-height:62svh}
  .lb .x{top:2px;right:2px}
  .lb .p{left:50%;right:auto;top:6px;bottom:auto;width:max-content;transform:translateX(-50%);text-align:center}
  .lb .n{left:50%;right:auto;bottom:40px;top:auto;width:max-content;transform:translateX(-50%);text-align:center}
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.ftr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:14px 30px;padding:0 var(--edge) 38px;color:var(--muted)}
.ftr ul{display:flex;flex-wrap:wrap;gap:26px}
.ftr a:hover{color:var(--ink)}
.ftr p{margin:0}

.noscript-list{padding:0;list-style:none;font-family:var(--mono);font-size:13px;letter-spacing:.13em;text-transform:uppercase;line-height:2.4}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .stage img,.cslide img{opacity:1!important}
}