/* Saltframe: the portfolio is the design. Near-black and paper white, a single sand accent;
   Syne for the few words that remain, a sideways-scrolling strip of work as the signature. */
:root {
  --bg: #0E0E0E; --surface: #171717; --surface-2: #141414; --line: #2A2A2A;
  --ink: #F2F0EB; --ink-soft: #B3AEA4; --heading: #F2F0EB;
  --primary: #F2F0EB; --primary-ink: #0E0E0E; --primary-hover: #D4A373;
  --accent: #D4A373; --accent-ink: #0E0E0E;
  --dark: #0E0E0E; --on-dark: #F2F0EB; --on-dark-soft: #B3AEA4;
  --kicker: #D4A373; --link: #D4A373; --field-border: #6E6A63; --star: #D4A373;
  --ph-a: #1C1C1C; --ph-b: #232323; --ph-edge: #6E6A63;
  --display: "Syne", "Segoe UI", sans-serif; --body: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --display-weight: 600; --display-lh: 1.02; --display-track: -0.02em;
  --radius: 0; --radius-lg: 0; --btn-radius: 0; --chip-radius: 0; --field-radius: 0; --nav-radius: 0; --photo-radius: 0;
  --hdr-bg: #0E0E0E; --hdr-line: #0E0E0E; --nav-hover: transparent; --nav-current: transparent;
  --brand-font: "Syne", sans-serif; --brand-weight: 800; --brand-size: 1.35rem;
  --fs-h2: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  color-scheme: dark;
}
.nav a[aria-current="page"] { color: var(--accent); }
.btn--ghost { color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.text-link { color: var(--ink); font-family: var(--display); font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.filters button { border-radius: 0; color: var(--ink-soft); border-color: transparent; padding: 0 12px; }
.filters button[aria-pressed="true"] { background: transparent; color: var(--ink); border-color: transparent; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; text-decoration-thickness: 2px; }

.hero { position: relative; min-height: clamp(560px, 86vh, 860px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute !important; inset: 0; aspect-ratio: auto !important; height: 100%; border: 0; }
.hero-bg .photo-slot { align-items: flex-start; justify-content: flex-end; padding-top: 24px; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(14,14,14,.85)); z-index: 1; pointer-events: none; }
.hero-txt { position: relative; z-index: 2; padding-block: 64px; display: grid; gap: 14px; width: 100%; }
.hero h1 { font-size: clamp(3rem, 1.5rem + 7vw, 7.5rem); font-weight: 700; }
.hero-txt > p { color: #DDD8CF; font-size: 1.15rem; }

.work { padding-bottom: 48px; }
.work-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.work-head .filters { margin: 0; }
.hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter, 16px) 18px; scrollbar-color: #444 transparent; margin-bottom: 18px; }
.hscroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hs-item { margin: 0; flex: 0 0 auto; height: clamp(320px, 52vh, 560px); scroll-snap-align: start; }
.hs-item .photo { height: 100%; width: auto; aspect-ratio: var(--ar) !important; }

.about { grid-template-columns: 0.75fr 1.25fr; align-items: center; }
.lede.big { font-family: var(--display); font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); line-height: 1.3; color: var(--ink); font-weight: 500; }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.pk { display: grid; border-top: 1px solid var(--line); }
.pk-i { display: grid; grid-template-columns: 1.2fr 1.6fr auto; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); align-items: baseline; }
.pk-n { font-family: var(--display); font-weight: 600; font-size: 1.5rem; }
.pk-d { color: var(--ink-soft); }
.pk-p { color: var(--accent); font-weight: 600; white-space: nowrap; }
.pk-i:hover .pk-n { color: var(--accent); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.quotes figure { margin: 0; display: grid; gap: 12px; }
.quotes blockquote { margin: 0; font-family: var(--display); font-size: 1.2rem; line-height: 1.4; font-weight: 500; }
.quotes figcaption { color: var(--ink-soft); font-size: 0.9rem; }
.sample { color: var(--ink-soft); border-color: var(--line); }
.ig { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.final { text-align: center; display: grid; gap: 16px; justify-items: center; }
.final h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.6rem); }

.page-head { border-bottom-color: var(--line); }
.masonry { columns: 3; column-gap: 12px; }
.m-item { break-inside: avoid; margin: 0 0 12px; }
.pk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pkc { display: grid; gap: 10px; align-content: start; scroll-margin-top: 100px; }
.pkc .photo { --ar: 9 / 11 !important; margin-bottom: 8px; }
.pkc h2 { font-size: 1.5rem; }
.pkc-p { font-family: var(--display); color: var(--accent); font-size: 1.4rem; }
.pkc ul { padding-left: 18px; color: var(--ink-soft); display: grid; gap: 4px; }
.pkc .btn { justify-self: start; margin-top: 8px; }
.feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.feat-slot { border: 1px dashed var(--field-border); min-height: 64px; display: grid; place-items: center; color: var(--ink-soft); font-size: 0.8rem; }
.exp { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.exp li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.exp-n { font-family: var(--display); font-weight: 700; font-size: 3rem; color: var(--accent); line-height: 1; }
.exp h2 { font-size: 1.6rem; margin-bottom: 6px; }
.exp p { color: var(--ink-soft); max-width: 60ch; }
.film { position: relative; margin: 0; }
.play { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 2px solid var(--ink); color: var(--ink); display: grid; place-items: center; z-index: 3; background: rgba(14,14,14,.5); }
.play svg { width: 40px; height: 40px; }
.form { background: var(--surface); }
input, select, textarea { color-scheme: dark; }

@media (max-width: 1020px) { .pk-grid { grid-template-columns: repeat(2, 1fr); } .ig { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .about, .quotes { grid-template-columns: 1fr; } .masonry { columns: 2; } .pk-i { grid-template-columns: 1fr; gap: 4px; } .exp li { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 560px) { .pk-grid, .feat { grid-template-columns: 1fr 1fr; } .masonry { columns: 1; } }

/* ===== Film & darkroom home (viewfinder, contact sheet, lab envelopes, prints, drying line) ===== */
:root { --gp: #E0442E; --kraft: #C8A57A; --kraft-2: #B48F62; --paper: #F4F0E7; --mono: "DM Mono", ui-monospace, monospace; --hand: "Caveat", "Segoe Print", cursive; }
.hand { font-family: var(--hand); font-weight: 600; font-style: normal; }
.mono { font-family: var(--mono); letter-spacing: .08em; }
.kicker { font-family: var(--mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }

/* viewfinder hero */
.vf { min-height: clamp(600px, 92vh, 900px); }
.vf-ui { position: absolute; inset: clamp(14px, 3vw, 34px); z-index: 2; pointer-events: none; font-family: var(--mono); color: rgba(255,255,255,.92); font-size: .8rem; letter-spacing: .1em; }
.vf-c { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(255,255,255,.9); }
.vf-c--tl { top: 0; left: 0; border-width: 2px 0 0 2px; } .vf-c--tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.vf-c--bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; } .vf-c--br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.vf-grid { position: absolute; inset: 0; opacity: .22;
  background: linear-gradient(90deg, transparent calc(33.33% - .5px), #fff calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), #fff calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
              linear-gradient(180deg, transparent calc(33.33% - .5px), #fff calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), #fff calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.vf-af { position: absolute; left: var(--afx, 76.5%); top: var(--afy, 51%); transition: left .9s cubic-bezier(.6,0,.2,1), top .9s cubic-bezier(.6,0,.2,1); width: 92px; height: 120px; margin: -60px 0 0 -46px; border: 2px solid var(--accent);
  -webkit-mask: linear-gradient(#000 0 0) top left/22px 22px no-repeat, linear-gradient(#000 0 0) top right/22px 22px no-repeat, linear-gradient(#000 0 0) bottom left/22px 22px no-repeat, linear-gradient(#000 0 0) bottom right/22px 22px no-repeat;
          mask: linear-gradient(#000 0 0) top left/22px 22px no-repeat, linear-gradient(#000 0 0) top right/22px 22px no-repeat, linear-gradient(#000 0 0) bottom left/22px 22px no-repeat, linear-gradient(#000 0 0) bottom right/22px 22px no-repeat; }
.vf-top { position: absolute; top: 14px; left: 50px; right: 50px; display: flex; justify-content: space-between; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.vf-dot { color: var(--accent); }
.vf-read { position: absolute; bottom: 14px; left: 50px; right: 50px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.vf-loc { margin-left: auto; color: var(--accent); }
.vf-meter { position: relative; display: inline-flex; gap: 6px; padding-bottom: 8px; opacity: .9; }
.vf-meter i { font-style: normal; font-size: .7rem; }
.vf-meter b { position: absolute; bottom: 0; left: 50%; width: 2px; height: 7px; margin-left: -1px; background: var(--accent); }
.vf .hero-txt { padding-bottom: clamp(80px, 9vw, 110px); }
.hero-slide { opacity: 0; transition: opacity 1.4s ease; } .hero-slide.on { opacity: 1; }
.vf::after { background: linear-gradient(180deg, rgba(14,14,14,.25), transparent 30%, transparent 45%, rgba(14,14,14,.85)); }

/* contact sheet on a lightbox */
.sheet-sec { background: radial-gradient(120% 90% at 50% 40%, #FBF9F3, #E9E4D8); color: #141414; }
.sheet-sec h2, .sheet-sec .text-link { color: #141414; }
.sheet-sec .kicker { color: #8C6A44; }
.sheet-sec .filters button { color: #6B665D; } .sheet-sec .filters button[aria-pressed="true"] { color: #141414; }
.sheet { position: relative; display: grid; gap: 22px; padding: 6px 0 10px; }
.strip { position: relative; background: #121212; padding: 38px 18px 26px; box-shadow: 0 10px 30px rgba(0,0,0,.18); overflow-x: auto; scrollbar-width: thin; }
.strip::before, .strip::after { content: ""; position: absolute; left: 0; right: 0; height: 9px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 9px, #EDE8DD 9px 21px, transparent 21px 32px); border-radius: 2px; }
.strip::before { top: 8px; } .strip::after { bottom: 8px; }
.edge { position: absolute; top: 17px; left: 24px; font: 500 .6rem/1 var(--mono); letter-spacing: .2em; color: #E9A44A; white-space: nowrap; }
.frames { display: flex; gap: 14px; width: max-content; min-width: 100%; padding-top: 6px; }
.fr { position: relative; margin: 0; flex: 0 0 auto; }
.fr .photo { height: clamp(150px, 15vw, 210px); width: auto; aspect-ratio: var(--ar) !important; border: 0; }
.fr .photo-slot { font-size: .62rem; }
.fr figcaption { display: flex; justify-content: space-between; padding-top: 6px; font: 500 .6rem/1 var(--mono); letter-spacing: .14em; color: #E9A44A; }
.gp { position: absolute; inset: -16px -18px -4px; width: calc(100% + 36px); height: calc(100% + 4px); pointer-events: none; z-index: 2; overflow: visible; }
.gp path { fill: none; stroke: var(--gp); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .92; }
.sheet-note { position: absolute; right: 8px; bottom: -34px; margin: 0; color: var(--gp); font-size: 1.55rem; rotate: -4deg; }
.sheet-foot { display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; margin-top: 30px; }
.loupe { position: absolute; left: 0; top: 0; width: 160px; height: 160px; border-radius: 50%; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .2s ease;
  border: 6px solid #1A1A1A; box-shadow: 0 0 0 2px #888 inset, 0 14px 34px rgba(0,0,0,.45); background-color: #111; background-repeat: no-repeat; }
.loupe.on { opacity: 1; }
@media (hover: none) { .hide-touch { display: none; } }

/* pinned print */
.pin-print { margin: 0; background: var(--paper); padding: 14px 14px 52px; rotate: -2deg; box-shadow: 0 18px 40px rgba(0,0,0,.45); position: relative; }
.pin-print::before { content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; margin-left: -55px; background: rgba(240,232,212,.75); rotate: 3deg; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.pin-print figcaption { position: absolute; left: 22px; bottom: 10px; color: #2A2A2A; font-size: 1.6rem; }

/* lab envelopes */
.env-sec { background: var(--surface); }
.envs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding-top: 20px; }
.env { position: relative; display: block; padding-top: 120px; text-decoration: none; color: #2B2117; rotate: var(--r); transition: rotate .4s ease; }
.env-photo { position: absolute; left: 13%; right: 13%; top: 0; z-index: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1); box-shadow: 0 6px 18px rgba(0,0,0,.4); border: 6px solid var(--paper); border-bottom-width: 18px; background: var(--paper); }
.env-photo .photo { aspect-ratio: 9 / 11 !important; border: 0; }
.env-body { position: relative; z-index: 1; display: grid; gap: 10px; padding: 62px 18px 20px; min-height: 300px; align-content: start;
  background: linear-gradient(170deg, var(--kraft), var(--kraft-2)); box-shadow: 0 12px 26px rgba(0,0,0,.35);
  clip-path: polygon(0 0, 50% 44px, 100% 0, 100% 100%, 0 100%); }
.env-top { display: flex; justify-content: space-between; font: 500 .62rem/1.2 var(--mono); letter-spacing: .14em; border-bottom: 1px solid rgba(43,33,23,.45); padding-bottom: 8px; }
.env-top span { color: var(--gp); }
.env-row { display: grid; gap: 0; border-bottom: 1px dashed rgba(43,33,23,.35); padding-bottom: 4px; }
.env-row small { font: 500 .58rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.env-row i { font-size: 1.45rem; line-height: 1.15; color: #1F2A44; }
.env-boxes { display: flex; gap: 10px; flex-wrap: wrap; font: 500 .66rem/1 var(--mono); }
.env-price { font-family: var(--display); font-weight: 700; font-size: 1.3rem; margin-top: 4px; }
.env-stamp { position: absolute; right: 14px; bottom: 18px; font: 500 .8rem/1 var(--mono); letter-spacing: .2em; color: var(--gp); border: 2px solid var(--gp); padding: 6px 8px; rotate: -12deg; opacity: .85; }
.env:hover, .env:focus-visible { rotate: 0deg; }
.env:hover .env-photo, .env:focus-visible .env-photo { transform: translateY(-38px) rotate(-2deg); }
.env:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* back-of-print reviews */
.prints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; perspective: 1400px; }
.pr { margin: 0; rotate: var(--r); outline: none; }
.pr-in { position: relative; display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,.7,.2,1); }
.pr-back, .pr-front { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.pr-back { display: grid; align-content: space-between; gap: 18px; min-height: 360px; padding: 30px 26px; color: #1F2A44;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120'%3E%3Ctext x='0' y='40' font-family='monospace' font-size='11' fill='%23000' fill-opacity='.07' letter-spacing='3' transform='rotate(-18 130 60)'%3ESALTFRAME %E2%80%A2 ARCHIVAL PAPER%3C/text%3E%3Ctext x='-60' y='110' font-family='monospace' font-size='11' fill='%23000' fill-opacity='.07' letter-spacing='3' transform='rotate(-18 130 60)'%3ESALTFRAME %E2%80%A2 ARCHIVAL PAPER%3C/text%3E%3C/svg%3E"); }
.pr-back blockquote { margin: 0; font-size: 1.55rem; line-height: 1.2; }
.pr-back figcaption { font: 500 .72rem/1.5 var(--mono); letter-spacing: .08em; color: #4A4A4A; display: grid; gap: 6px; justify-items: start; }
.pr-back .sample { color: #4A4A4A; border-color: rgba(0,0,0,.25); }
.pr-front { transform: rotateY(180deg); background: var(--paper); padding: 10px; }
.pr-front .photo { height: 100%; aspect-ratio: auto !important; border: 0; }
.pr:hover .pr-in, .pr:focus-visible .pr-in { transform: rotateY(180deg); }
.pr:focus-visible .pr-front { outline: 2px solid var(--accent); outline-offset: 4px; }

/* drying line */
.dry { position: relative; padding-top: 8px; }
.dry-line { position: absolute; left: -2%; width: 104%; top: 0; height: 70px; overflow: visible; }
.dry-line path { fill: none; stroke: #8A8378; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dry ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.dry li { position: relative; margin-top: var(--y); rotate: var(--r); transform-origin: 50% -10px; background: var(--paper); padding: 6px 6px 22px; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.dry .photo { border: 0; }
.peg { position: absolute; top: -14px; left: 50%; width: 12px; height: 30px; margin-left: -6px; background: linear-gradient(90deg, #D9C4A0, #B99A6C); border-radius: 2px; z-index: 2; box-shadow: 0 2px 3px rgba(0,0,0,.3); }

/* end of roll */
.end-sec { padding-top: 40px; }
.end-strip { display: flex; gap: 10px; justify-content: center; align-items: center; background: #161616; padding: 22px 16px; margin: 0 auto 26px; width: min(100%, 520px); max-width: 100%; position: relative; box-sizing: border-box;
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000); mask: linear-gradient(90deg, transparent, #000 18%, #000); }
.end-strip::before, .end-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; background: repeating-linear-gradient(90deg, transparent 0 8px, #2E2E2E 8px 18px, transparent 18px 26px); }
.end-strip::before { top: 6px; } .end-strip::after { bottom: 6px; }
.end-strip > span { width: clamp(52px, 17vw, 92px); height: clamp(40px, 11vw, 62px); flex: 0 0 auto; background: #262626; position: relative; }
.end-last { display: grid; place-items: center; font: 500 1.1rem/1 var(--mono); color: #E9A44A; background: #2C2C2C !important; }
.end-last .gp { inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); }
.end-tail { width: clamp(40px, 12vw, 70px) !important; background: #161616 !important; clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%); }
.final .kicker { margin: 0; }

@media (max-width: 1020px) { .envs { grid-template-columns: repeat(2, 1fr); row-gap: 40px; } .dry ul { grid-template-columns: repeat(3, 1fr); row-gap: 34px; } .dry-line { display: none; } }
@media (max-width: 820px) { .prints { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } .vf-meter, .vf-grid { display: none; } .vf-read { gap: 12px; font-size: .68rem; } .vf-top { font-size: .68rem; } .vf-loc { margin-left: 0; } .sheet-note { position: static; margin-top: -6px; } }
@media (max-width: 560px) { .envs { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } .dry ul { grid-template-columns: repeat(2, 1fr); } .vf-top, .vf-read { left: 40px; right: 40px; } .vf-read span:nth-child(3) { display: none; } }

/* ---- Motion: the camera (Saltframe Studio) ---- */
:root { --shine: rgba(212, 163, 115, .45); }
@keyframes sf-focus { 0% { filter: blur(18px) brightness(1.05); transform: scale(1.08); } 55% { filter: blur(6px); } 80% { filter: blur(1.5px); } 100% { filter: none; transform: scale(1.02); } }
@keyframes sf-af { 0% { transform: scale(1.9); opacity: 0; border-color: #fff; } 20% { opacity: .9; } 70% { transform: scale(1); border-color: #fff; } 78%, 92% { border-color: var(--accent); opacity: 1; } 85% { opacity: .2; } 100% { transform: scale(1); border-color: var(--accent); opacity: 1; } }
@keyframes sf-flash { 0%, 100% { opacity: 0; } 30% { opacity: .55; } }
@keyframes sf-needle { 0% { translate: -46px 0; } 60% { translate: 10px 0; } 80% { translate: -4px 0; } 100% { translate: 0 0; } }
@keyframes sf-ui { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-grain { 0% { background-position: 0 0; } 25% { background-position: -40px 20px; } 50% { background-position: 30px -30px; } 75% { background-position: -20px -40px; } 100% { background-position: 0 0; } }
@keyframes sf-develop { from { opacity: 0; filter: grayscale(1) brightness(1.6) blur(4px); transform: scale(.98); } 60% { opacity: 1; } to { opacity: 1; filter: none; transform: none; } }
@keyframes sf-track { from { letter-spacing: .12em; opacity: 0; } to { opacity: 1; } }
@keyframes sf-draw { to { stroke-dashoffset: 0; } }
@keyframes sf-slide { from { translate: 0 70%; } to { translate: 0 0; } }
@keyframes sf-sway { from { rotate: calc(var(--r) - 1.6deg); } to { rotate: calc(var(--r) + 1.6deg); } }
@keyframes sf-drop { from { opacity: 0; translate: 0 -40px; } to { opacity: 1; translate: 0 0; } }
@keyframes sf-tick { 0% { color: var(--accent); } 100% { color: inherit; } }

@keyframes sf-drift { from { transform: scale(1.02); } to { transform: scale(1.08); } }
html.mo .hero-slide.focus img { animation: sf-focus 1.9s .15s cubic-bezier(.4, 0, .2, 1) both, sf-drift 9s 2.05s linear both; }
html.mo .vf-af.relock { animation: sf-af 2.1s ease-out both; }
html.mo .vf.flash::before { animation: sf-flash .22s ease-out both; }
html.mo .vf-ui { animation: sf-ui .5s both; }
html.mo .vf-af { animation: sf-af 2.3s .15s ease-out both; }
html.mo .vf-meter b { animation: sf-needle 1.6s .3s cubic-bezier(.3, 1.3, .5, 1) both; }
html.mo .vf::before { content: ""; position: absolute; inset: 0; z-index: 3; background: #fff; pointer-events: none; opacity: 0; animation: sf-flash .22s 2.15s ease-out both; }
html.mo .hero-txt h1 { animation: sf-track 1.6s .9s cubic-bezier(.2, .7, .2, 1) both !important; }
.sf-grain { opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html.mo .sf-grain { animation: sf-grain .9s steps(4) infinite; }
html.mo .hero.has-fx > .wrap { z-index: 2; }

/* frame counter */
.sf-fc { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: rgba(14,14,14,.86); color: #F2F0EB; border: 1px solid #333;
  font: 500 .72rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .16em; pointer-events: none; backdrop-filter: blur(6px); }
.sf-fc b { font-weight: 500; color: var(--accent); min-width: 2ch; display: inline-block; }
.sf-fc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gp, #E0442E); }
.sf-fc.adv b { animation: sf-tick .5s ease-out; }
.sf-fc.end { border-color: var(--accent); }
@media (max-width: 820px) { .sf-fc { display: none; } }

/* grease pencil */
html.mo .strip .gp path, html.mo .end-strip .gp path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.mo .strip.go .gp path, html.mo .end-strip.go .gp path { animation: sf-draw .9s cubic-bezier(.5, 0, .3, 1) forwards; }
html.mo .strip.go .fr:nth-child(4) .gp path { animation-delay: .5s; }
html.mo .strip.go .fr:nth-child(2) .gp path, html.mo .strip.go .fr:nth-child(5) .gp path { animation-delay: .8s; }
html.mo .end-strip.go .gp path { animation-delay: .4s; }
html.mo .sheet-note { opacity: 0; transition: opacity .6s 1.6s; }
html.mo .sheet:has(.strip.go) .sheet-note { opacity: 1; }

/* envelopes: prints slide up out of the envelope */
html.mo .env-photo { translate: 0 70%; }
html.mo .envs.go .env-photo { animation: sf-slide 1s cubic-bezier(.2, .8, .2, 1) both; }
html.mo .envs.go .env:nth-child(2) .env-photo { animation-delay: .15s; }
html.mo .envs.go .env:nth-child(3) .env-photo { animation-delay: .3s; }
html.mo .envs.go .env:nth-child(4) .env-photo { animation-delay: .45s; }

/* prints drop onto the table, drying line sways */
html.mo .pr { opacity: 0; }
html.mo .prints.go .pr { animation: sf-drop .8s cubic-bezier(.2, .8, .2, 1) both; }
html.mo .prints.go .pr:nth-child(2) { animation-delay: .15s; } html.mo .prints.go .pr:nth-child(3) { animation-delay: .3s; }
html.mo .dry li { animation: sf-sway 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.7s); }

/* portfolio page */
html.mo .m-item, html.mo .film { position: relative; }
html.mo :is(.m-item, .film)::before, html.mo :is(.m-item, .film)::after {
  content: ""; position: absolute; z-index: 3; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.4, .5, 1);
  border: 0 solid rgba(255, 255, 255, .9); }
html.mo :is(.m-item, .film)::before { left: 12px; top: 12px; border-width: 2px 0 0 2px; transform: translate(8px, 8px); }
html.mo :is(.m-item, .film)::after { right: 12px; bottom: 12px; border-width: 0 2px 2px 0; transform: translate(-8px, -8px); }
html.mo :is(.m-item, .film):hover::before, html.mo :is(.m-item, .film):hover::after { opacity: 1; transform: none; }
html.mo .m-item .photo img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
html.mo .m-item:hover .photo img { transform: scale(1.04); }