/* ─────────────────────────────────────────────────────────────────
   Paul Flannery Photography — shared styles
   Every page is film: the same frame, rebate and perforation system,
   arranged differently per room.
   ───────────────────────────────────────────────────────────────── */

:root{
  --ground:#0D0C0B;
  --ground-2:#151312;
  --ink:#EFEAE2;
  --ink-dim:#8B8479;
  --rule:#272321;
  --rebate:#1C1917;
  --edge:#B3A288;
  --chinagraph:#DC4A32;
  --lamp:rgba(255,248,235,.055);
  --base:#B5A894;                 /* film base, shown before a frame loads */

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Courier Prime","Courier New",Courier,monospace;

  --frame-h:clamp(140px,22vw,300px);
  --band:calc(var(--frame-h) * 6 / 24);
  --gap:calc(var(--frame-h) * 2 / 24);

  /* 35mm KS perforation, horizontal run and vertical run */
  --perf:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2047.5%2055'%3E%3Cpath%20fill-rule='evenodd'%20fill='white'%20d='M0%200H47.5V55H0Z%20M14.3%2017.6H33.2A4.5%204.5%200%200%201%2037.7%2022.1V33.1A4.5%204.5%200%200%201%2033.2%2037.6H14.3A4.5%204.5%200%200%201%209.8%2033.1V22.1A4.5%204.5%200%200%201%2014.3%2017.6Z'/%3E%3C/svg%3E");
  --perf-v:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2055%2047.5'%3E%3Cpath%20fill-rule='evenodd'%20fill='white'%20d='M0%200H55V47.5H0Z%20M17.6%2014.3V33.2A4.5%204.5%200%200%200%2022.1%2037.7H33.1A4.5%204.5%200%200%200%2037.6%2033.2V14.3A4.5%204.5%200%200%200%2033.1%209.8H22.1A4.5%204.5%200%200%200%2017.6%2014.3Z'/%3E%3C/svg%3E");

  --neg:grayscale(1) invert(1) contrast(.68) sepia(.34) brightness(.96);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#E6E3DC; --ground-2:#F1EFE9; --ink:#17130F; --ink-dim:#6C665C;
    --rule:#CFC9BE; --rebate:#211E1B; --edge:#A28F73; --chinagraph:#C3391F;
    --lamp:rgba(0,0,0,.05);
  }
}
:root[data-theme="light"]{
  --ground:#E6E3DC; --ground-2:#F1EFE9; --ink:#17130F; --ink-dim:#6C665C;
  --rule:#CFC9BE; --rebate:#211E1B; --edge:#A28F73; --chinagraph:#C3391F;
  --lamp:rgba(0,0,0,.05);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,64px)}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem}

/* ── Masthead ─────────────────────────────────────────────────────
   Everything here is a real link, and looks like one. Nothing else
   in the header is styled to suggest it can be clicked.            */
.top{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;justify-content:space-between;
  padding-block:22px 0;
}
.wordmark{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:3px;
}
.wordmark:hover,.wordmark:focus-visible{border-bottom-color:var(--chinagraph)}
.top nav{display:flex;flex-wrap:wrap;gap:6px 20px}
.top nav a{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;
  color:var(--ink-dim);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:3px;
}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--chinagraph)}
.top nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--chinagraph)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--chinagraph);outline-offset:3px;
}

/* ── Page head ────────────────────────────────────────────────── */
.hero{padding-block:clamp(22px,3.6vw,40px) clamp(20px,3vw,34px)}
.hero h1{
  margin:0;font-variation-settings:"wdth" 70,"wght" 800;
  font-size:clamp(2.7rem,8.4vw,6.4rem);line-height:.86;letter-spacing:-.022em;text-wrap:balance;
}
.hero h1 .mark{position:relative;display:inline-block}
.hero h1 .mark svg{position:absolute;inset:-14% -7%;width:114%;height:128%;overflow:visible;pointer-events:none}
.hero h1 .mark path{fill:none;stroke:var(--chinagraph);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9;vector-effect:non-scaling-stroke}
.hero p.lede{margin:clamp(18px,2.4vw,26px) 0 0;max-width:38ch;font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.5;color:var(--ink-dim)}
.hero p.lede b{font-variation-settings:"wdth" 100,"wght" 600;color:var(--ink);font-weight:400}

.gallery-head{padding-block:clamp(20px,3vw,34px) clamp(16px,2.4vw,26px)}
.gallery-head h1{
  margin:0;font-variation-settings:"wdth" 74,"wght" 800;
  font-size:clamp(2.1rem,6.4vw,4.4rem);line-height:.9;letter-spacing:-.018em;
}
.gallery-head .kick{display:block;color:var(--edge);font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px}

/* ── The frame ────────────────────────────────────────────────────
   One negative. Width follows --frame-h so every room can resize it. */
.cell{position:relative;flex:0 0 auto;width:calc(var(--frame-h) * 1.5);height:var(--frame-h)}
.cell img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  background:var(--base);-webkit-user-drag:none;user-select:none;
  filter:var(--neg);
  transition:filter .3s ease;
}
/* A vertical shot sits sideways in the frame, the way a turned camera
   records it. At 90° an h × 1.5h image fills the landscape frame exactly. */
.cell.port img{
  position:absolute;top:50%;left:50%;
  width:var(--frame-h);height:calc(var(--frame-h) * 1.5);
  margin-top:calc(var(--frame-h) * -0.75);
  margin-left:calc(var(--frame-h) * -0.5);
  transform:rotate(90deg);
}
.cell .edge{
  position:absolute;left:0;color:var(--edge);font-size:calc(var(--band) * .235);
  font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;opacity:.85;pointer-events:none;
}
.cell .stock{bottom:100%;margin-bottom:calc(var(--band) * .055)}
.cell .num{top:100%;margin-top:calc(var(--band) * .055)}
.cell .grease{position:absolute;inset:4% 3%;width:94%;height:92%;overflow:visible;pointer-events:none}
.cell .grease path{fill:none;stroke:var(--chinagraph);stroke-width:3;stroke-linecap:round;opacity:.92}
.cell.sel .num{color:var(--chinagraph);opacity:1}

.band{position:absolute;background-color:var(--rebate)}
.band-t,.band-b{
  left:0;width:100%;height:var(--band);
  -webkit-mask-image:var(--perf);mask-image:var(--perf);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-size:calc(var(--band) * 47.5 / 55) var(--band);
  mask-size:calc(var(--band) * 47.5 / 55) var(--band);
}
.band-t{top:0}
.band-b{bottom:0}
.band-l,.band-r{
  top:0;height:100%;width:var(--band);
  -webkit-mask-image:var(--perf-v);mask-image:var(--perf-v);
  -webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;
  -webkit-mask-size:var(--band) calc(var(--band) * 47.5 / 55);
  mask-size:var(--band) calc(var(--band) * 47.5 / 55);
}
.band-l{left:0}
.band-r{right:0}

/* ── Room 1: the running roll (home) ──────────────────────────── */
.stage{position:relative;overflow:hidden;padding-block:clamp(14px,3vw,30px)}
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 78% at 50% 50%,var(--lamp),transparent 72%)}
.lightbox{width:106%;margin-left:-3%;transform:rotate(-1.05deg)}
.viewport{overflow:hidden;touch-action:pan-y;cursor:grab;outline:none}
.viewport:focus-visible{box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--chinagraph);outline:none}
.viewport.grabbing{cursor:grabbing}
.track{position:relative;display:flex;align-items:center;gap:var(--gap);padding-block:var(--band);width:max-content;will-change:transform}
.track .cell::after{content:"";position:absolute;top:0;bottom:0;right:calc(var(--gap) * -1);width:var(--gap);background:var(--rebate)}
@media (hover:hover){
  .viewport:hover .cell img{filter:grayscale(1) invert(1) contrast(.68) sepia(.34) brightness(.62)}
  .viewport:hover .cell:hover img{filter:grayscale(1) invert(1) contrast(.68) sepia(.34) brightness(1.1)}
}

/* ── Room 2: the contact sheet (portraits) ────────────────────── */
.sheet{--frame-h:clamp(96px,12vw,142px);--band:calc(var(--frame-h) * 6 / 24);--gap:calc(var(--frame-h) * 2 / 24);display:flex;flex-direction:column;gap:clamp(24px,3.4vw,44px);padding-bottom:clamp(30px,4vw,50px)}
.sitter h2{
  margin:0 0 10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--edge);font-weight:400;
}
.sheet .row{position:relative;display:flex;gap:var(--gap);padding-block:var(--band);width:max-content;max-width:100%}
.sheet .row + .row{margin-top:calc(var(--gap) * 1.5)}
.sheet .cell::after{content:"";position:absolute;top:0;bottom:0;right:calc(var(--gap) * -1);width:var(--gap);background:var(--rebate)}
.sheet .cell:last-child::after{display:none}
.sheet .cell{cursor:pointer}
@media (hover:hover){
  .sheet .row:hover .cell img{filter:grayscale(1) invert(1) contrast(.68) sepia(.34) brightness(.62)}
  .sheet .row:hover .cell:hover img{filter:grayscale(1) invert(1) contrast(.68) sepia(.34) brightness(1.1)}
}

/* ── Room 3: hanging strips (fashion) ─────────────────────────── */
.hang{
  --strip-w:clamp(120px,15vw,170px);
  --frame-h:calc(var(--strip-w) / 1.5);
  --band:calc(var(--frame-h) * 6 / 24);--gap:calc(var(--frame-h) * 2 / 24);
  display:flex;flex-wrap:wrap;gap:clamp(16px,2.2vw,28px);
  justify-content:center;align-items:flex-start;
  padding-block:clamp(28px,4vw,52px) clamp(40px,5vw,70px);
}
.hung{position:relative;padding-top:26px;transform-origin:50% 8px;animation:sway 8s ease-in-out infinite}
.hung:nth-child(2n){animation-duration:9.5s;animation-delay:-2.2s}
.hung:nth-child(3n){animation-duration:7.2s;animation-delay:-4.1s}
.hung .strip{position:relative;display:flex;flex-direction:column;gap:var(--gap);padding-inline:var(--band);width:max-content}
.hung .cell{width:var(--strip-w);height:var(--frame-h)}
.hung .cell::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--gap) * -1);height:var(--gap);background:var(--rebate)}
.hung .cell:last-child::after{display:none}
.hung .cell .edge{writing-mode:vertical-rl;left:auto;right:100%;top:0;margin-right:calc(var(--band) * .06)}
.hung .cell .stock,.hung .cell .num{bottom:auto;top:0;margin-bottom:0;margin-top:0}
.hung .peg{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34px;height:20px;color:var(--ink-dim);
}
.hung .peg svg{width:100%;height:100%;display:block}
.hung .label{
  display:block;text-align:center;margin-top:12px;color:var(--edge);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
}
@keyframes sway{
  0%,100%{transform:rotate(-.55deg)}
  50%{transform:rotate(.55deg)}
}
@media (hover:hover){
  .hung .strip:hover .cell img{filter:grayscale(1) invert(1) contrast(.68) sepia(.34) brightness(.62)}
  .hung .strip:hover .cell:hover img{filter:grayscale(1) invert(1) contrast(.68) sepia(.34) brightness(1.1)}
}

/* ── Room 4: the light table (character) ──────────────────────── */
.table{
  --frame-h:clamp(112px,15vw,190px);
  --band:calc(var(--frame-h) * 6 / 24);--gap:calc(var(--frame-h) * 2 / 24);
  position:relative;margin-block:clamp(16px,2.6vw,30px) clamp(40px,5vw,70px);
  border:1px solid var(--rule);
  background:
    radial-gradient(120% 90% at 50% 45%,var(--lamp),transparent 70%),
    var(--ground-2);
  touch-action:none;overflow:hidden;
}
.loose{
  position:absolute;padding:calc(var(--frame-h) * .085) 0;
  background:var(--rebate);cursor:grab;touch-action:none;
  box-shadow:0 10px 26px rgba(0,0,0,.45),0 2px 5px rgba(0,0,0,.35);
  will-change:transform;
}
.loose.lifted{cursor:grabbing;box-shadow:0 22px 48px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.4)}
.loose .cell .edge{display:none}
@media (hover:hover){
  .loose:hover .cell img{filter:grayscale(1) invert(1) contrast(.68) sepia(.34) brightness(1.1)}
}

/* ── Room 5: the unexposed roll (product) ─────────────────────── */
.roll{--frame-h:clamp(108px,15vw,208px);--band:calc(var(--frame-h) * 6 / 24);--gap:calc(var(--frame-h) * 2 / 24);}
.roll .cell{background:var(--rebate)}
.roll .blank{
  width:100%;height:100%;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),
    var(--base);
}
.roll .cell .num{color:var(--edge);opacity:.5}
.canister{
  position:absolute;left:clamp(-18px,-1vw,0px);top:50%;transform:translateY(-50%);
  width:clamp(96px,13vw,168px);z-index:2;color:var(--rebate);
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5));pointer-events:none;
}
.canister svg{width:100%;height:auto;display:block}
.roll-note{
  max-width:44ch;margin:clamp(26px,3.4vw,40px) 0 0;color:var(--ink-dim);
  font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.55;
}
.roll-note b{color:var(--ink);font-variation-settings:"wdth" 100,"wght" 600;font-weight:400}
.counter{
  display:inline-flex;align-items:baseline;gap:10px;margin-top:20px;
  border:1px solid var(--rule);padding:9px 14px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--edge);
}
.counter b{color:var(--chinagraph);font-weight:400;font-size:.95rem;letter-spacing:.14em}

/* ── Index of rooms (home) ────────────────────────────────────── */
.index{border-top:1px solid var(--rule);margin-top:clamp(30px,4.4vw,52px)}
.index ol{list-style:none;margin:0;padding:0}
.index li{border-bottom:1px solid var(--rule)}
.index a{
  display:grid;grid-template-columns:5.5ch 1fr auto;gap:4px 22px;align-items:baseline;
  padding-block:clamp(20px,2.6vw,30px);text-decoration:none;color:inherit;
}
.index a:hover .genre,.index a:focus-visible .genre{color:var(--chinagraph)}
.index a:hover .go,.index a:focus-visible .go{color:var(--chinagraph);transform:translateX(4px)}
.index .fno{grid-column:1;grid-row:1;color:var(--edge);font-family:var(--mono);font-size:.72rem;letter-spacing:.1em}
.index .genre{grid-column:2;grid-row:1;font-variation-settings:"wdth" 78,"wght" 700;font-size:clamp(1.5rem,4.4vw,2.35rem);line-height:1.02;letter-spacing:-.01em}
.index .what{grid-column:2;grid-row:2;color:var(--ink-dim);font-size:.95rem;line-height:1.45;max-width:52ch;margin-top:6px}
.index .go{grid-column:3;grid-row:1;color:var(--ink-dim);font-family:var(--mono);font-size:.9rem;transition:transform .2s ease,color .2s ease}

/* ── Foot ─────────────────────────────────────────────────────── */
footer{padding-block:clamp(34px,4.4vw,58px) clamp(30px,4vw,48px);color:var(--ink-dim);border-top:1px solid var(--rule);margin-top:clamp(20px,3vw,34px)}
footer .say{font-variation-settings:"wdth" 82,"wght" 700;font-size:clamp(1.35rem,4vw,2rem);color:var(--ink);margin:0 0 10px;letter-spacing:-.01em}
footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--chinagraph)}
.note{margin-top:clamp(24px,3vw,36px);padding-top:16px;border-top:1px solid var(--rule);color:var(--ink-dim);line-height:1.6;max-width:62ch;font-size:.76rem;font-family:var(--mono);text-transform:none;letter-spacing:.02em}

/* ── The print (shared viewer) ────────────────────────────────── */
.lb{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:color-mix(in srgb,var(--ground) 93%,black);padding:clamp(14px,3.5vw,44px)}
.lb[hidden]{display:none!important}
.lb figure{margin:0;max-width:min(1200px,100%);display:flex;flex-direction:column;gap:12px;align-items:center}
.lb img{display:block;max-width:100%;max-height:72vh;object-fit:contain;background:var(--ground-2)}
.lb figcaption{display:flex;justify-content:space-between;gap:16px;width:100%;color:var(--edge);font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.lb button{
  position:absolute;background:none;border:1px solid var(--rule);color:var(--ink);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 16px;cursor:pointer;line-height:1;
}
.lb button:hover{border-color:var(--chinagraph);color:var(--chinagraph)}
.lb .close{top:clamp(14px,3.5vw,44px);right:clamp(14px,3.5vw,44px)}
.lb .prev{left:clamp(14px,3.5vw,44px);top:50%;transform:translateY(-50%)}
.lb .next{right:clamp(14px,3.5vw,44px);top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .lb .prev{left:14px;top:auto;bottom:18px;transform:none}
  .lb .next{right:14px;top:auto;bottom:18px;transform:none}
}

@media (max-width:560px){
  .index a{grid-template-columns:1fr auto}
  .index .fno{grid-column:1;grid-row:1}
  .index .genre{grid-column:1;grid-row:2}
  .index .what{grid-column:1;grid-row:3}
  .index .go{grid-column:2;grid-row:2}
}

@media (prefers-reduced-motion: reduce){
  .viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .track .cell{scroll-snap-align:center}
  .cell img{transition:none}
  .hung{animation:none}
}