/* Ages Ago: the corners of an old photo. Petrol book-cloth, the album page, lavender mend seams, typed labels.
   Tokens from the brand direction (sections 3-5). No em dashes anywhere (house rule 1). */
:root{
  --petrol:#145561;--petrol-deep:#0F4550;--lavender:#C9C4F0;--albumen:#F5F1EA;--mist:#B9CCCB;
  --mist-text:#D3E0DF;--lavender-text:#DAD6F7;   /* text on the petrol cloth: the texture lightens the field, so text
     there is a shade lighter than the flat tokens (WCAG AA 4.5:1 measured on the rendered cloth) */
  --page:#E4EAE5;--ground:#F3F6F4;--paper:#FFFFFF;--eucalyptus:#9DB3A0;--ink:#1E2B2E;--muted:#56656A;
  --rule:#DCE3DE;--field-edge:#7D8C88;--error:#A3342A;--ok:#3F6B4C;--slot:#EEF2EF;
  --f-display:"Brygada 1918",Georgia,"Times New Roman",serif;
  --f-ui:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-type:"Courier Prime","Courier New",ui-monospace,monospace;
  --cloth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Cpattern id='h' width='4' height='4' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 4L4 0M0 0L4 4' stroke='%23fff' stroke-opacity='.06' stroke-width='.8'/%3E%3C/pattern%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3Crect width='180' height='180' fill='url(%23h)'/%3E%3C/svg%3E");
  --print-shadow:0 1px 1px rgba(11,42,48,.08),0 14px 30px -18px rgba(11,42,48,.38);
  --lift-shadow:0 2px 2px rgba(11,42,48,.08),0 24px 40px -20px rgba(11,42,48,.45);
  --sk-bg:var(--paper);--sk-surface:var(--paper);--sk-text:var(--ink);--sk-muted:var(--muted);--sk-line:var(--rule);
  --sk-accent:var(--petrol);--sk-accent-ink:#FFFFFF;--sk-radius:9px;--sk-font-display:var(--f-display);
  --sk-danger:var(--error);--sk-success:var(--ok);
  --gutter:clamp(16px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* the hidden attribute wins over any class that sets display */
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--ground);color:var(--ink);font:400 18px/1.6 var(--f-ui);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,canvas,video{max-width:100%;display:block}
a{color:var(--petrol);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--petrol-deep)}
:focus-visible{outline:3px solid var(--petrol);outline-offset:3px;border-radius:4px}
::selection{background:var(--lavender);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;color:var(--petrol);margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(44px,6.4vw,88px);line-height:1.02;letter-spacing:-.015em}
h2{font-size:clamp(32px,4.2vw,56px);line-height:1.06;letter-spacing:-.01em}
h3{font-size:clamp(23px,2.2vw,28px);line-height:1.15}
p{margin:0 0 1em;max-width:66ch}
.lede{font-size:clamp(19px,1.6vw,22px);line-height:1.55;color:var(--muted);max-width:56ch}
.small{font-size:15px;line-height:1.5}
.muted{color:var(--muted)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:780px}
.center{text-align:center}.center p,.center .lede,p.center{margin-left:auto;margin-right:auto}
main{overflow-x:clip}   /* tilted prints and their album corners never widen the page on a phone */
.skip{position:absolute;left:-999px;top:8px;background:var(--paper);padding:10px 14px;z-index:100;border-radius:9px}
.skip:focus{left:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- the typed label (eyebrow) */
.typed{font:400 16px/1.4 var(--f-type);letter-spacing:.01em;color:var(--petrol);margin:0 0 14px;display:block;
  min-height:1.4em}
.on-cloth .typed,.cloth .typed{color:var(--lavender-text)}
.typed .ghost{visibility:hidden}
.typed{position:relative}
.typed .live{position:absolute;left:0;top:0;right:0}
.typed .cur{display:inline-block;width:.6em;height:1.05em;margin-left:2px;vertical-align:-.15em;background:currentColor;
  animation:blink .5s steps(1) 4}
@keyframes blink{50%{opacity:0}}

/* ---------------------------------------------------------------- album corners round one word */
.ac{position:relative;display:inline-block;padding:0 .12em;margin:0;--acc:var(--petrol)}
.on-cloth .ac,.cloth .ac{--acc:var(--lavender)}
.ac i{position:absolute;width:.28em;height:.28em;background:var(--acc);pointer-events:none}
.ac i:nth-child(1){top:.1em;left:0;clip-path:polygon(0 0,100% 0,0 100%)}
.ac i:nth-child(2){top:.1em;right:0;clip-path:polygon(0 0,100% 0,100% 100%)}
.ac i:nth-child(3){bottom:.04em;right:0;clip-path:polygon(100% 0,100% 100%,0 100%)}
.ac i:nth-child(4){bottom:.04em;left:0;clip-path:polygon(0 0,100% 100%,0 100%)}
.js .ac.wait i{opacity:0;transform:scale(1.4)}
.ac.press i{animation:press .24s ease-out both}
.ac.press i:nth-child(2){animation-delay:.06s}.ac.press i:nth-child(3){animation-delay:.12s}
.ac.press i:nth-child(4){animation-delay:.18s}
@keyframes press{from{opacity:0;transform:scale(1.4)}to{opacity:1;transform:scale(1)}}

/* ---------------------------------------------------------------- photo-corner bullets */
ul.corners{list-style:none;padding:0;margin:0 0 1.2em}
ul.corners li{position:relative;padding-left:26px;margin:0 0 .55em}
ul.corners li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:10px;background:var(--petrol);
  clip-path:polygon(0 0,100% 0,0 100%)}
.on-cloth ul.corners li::before,.cloth ul.corners li::before{background:var(--lavender)}

/* ---------------------------------------------------------------- buttons: the dog-eared print */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 28px;font:600 17px/1.1 var(--f-ui);color:#fff;text-decoration:none;border:0;
  background:transparent;cursor:pointer;border-radius:9px;transition:transform .12s ease;text-align:center}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--petrol);border-radius:9px 0 9px 9px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);transition:clip-path .18s ease-out,background .18s}
.btn::after{content:"";position:absolute;top:0;right:0;width:12px;height:12px;z-index:-1;
  background:linear-gradient(to top right,var(--lavender) calc(50% - .7px),var(--albumen) calc(50% - .7px) calc(50% + .5px),transparent calc(50% + .5px));
  border-bottom-left-radius:2px;transition:width .18s ease-out,height .18s ease-out}
.btn:hover,.btn:focus-visible{color:#fff}
.btn:hover::before,.btn:focus-visible::before{background:var(--petrol-deep);clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,100% 100%,0 100%)}
.btn:hover::after,.btn:focus-visible::after{width:17px;height:17px}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.btn.light{color:var(--petrol)}
.btn.light::before{background:var(--albumen)}
.btn.light:hover,.btn.light:focus-visible{color:var(--petrol-deep)}
.btn.light:hover::before,.btn.light:focus-visible::before{background:#fff}
.cloth .btn:focus-visible,.on-cloth .btn:focus-visible{outline-color:var(--lavender)}
.btn.sm{min-height:44px;padding:0 20px;font-size:16px}
.btn.wide{width:100%}
.btn-paper{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;
  font:600 17px/1.1 var(--f-ui);color:var(--petrol);background:var(--paper);border:1.5px solid var(--petrol);
  border-radius:9px;text-decoration:none;cursor:pointer;transition:box-shadow .18s,background .18s}
.btn-paper:hover{box-shadow:var(--print-shadow);color:var(--petrol-deep)}
.btn-paper.sm{min-height:44px;padding:0 18px;font-size:16px}
.cloth .btn-paper,.on-cloth .btn-paper{background:transparent;color:var(--albumen);border-color:var(--albumen)}
.cloth .btn-paper:hover,.on-cloth .btn-paper:hover{background:rgba(245,241,234,.08);color:#fff}
.cloth .btn-paper:focus-visible,.on-cloth .btn-paper:focus-visible{outline-color:var(--lavender)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--petrol);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(243,246,244,.94);backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--rule)}
.site-header .bar{display:flex;align-items:center;gap:20px;min-height:76px}
.brandmark{display:flex;align-items:center;flex:none}
.brandmark img{width:156px;height:auto}
.nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:16px;padding:10px 12px;border-radius:9px;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--petrol);background:rgba(20,85,97,.07)}
.nav .btn{margin-left:10px;min-height:48px;padding:0 22px;font-size:16px}
.nav .btn:hover{background:transparent}
.nav a.btn,.nav a.btn:hover,.nav a.btn:focus-visible{color:#fff;background:transparent}
.is-home .site-header{background:var(--cloth),var(--petrol);border-bottom-color:rgba(245,241,234,.12)}
.is-home .nav a{color:var(--albumen)}
.is-home .nav a:hover{color:#fff;background:rgba(245,241,234,.1)}
.is-home .nav .btn.light,.is-home .nav .btn.light:hover{color:var(--petrol);background:transparent}
.is-home .site-header :focus-visible{outline-color:var(--lavender)}
.menu-btn{display:none}
.xmas-strip{background:var(--page);border-bottom:1px solid var(--rule);font:400 15px/1.4 var(--f-type);color:var(--petrol);
  text-align:center;padding:9px var(--gutter)}

/* the dog-eared snapshot menu button (phones, tablets and narrow laptops: the full nav needs about 1070px) */
@media (max-width:1100px){
  .nav{display:none}
  .menu-btn{display:inline-flex;margin-left:auto;position:relative;width:76px;height:44px;padding:0;border:3px solid #fff;
    border-radius:9px;background:var(--cloth),var(--petrol);box-shadow:var(--print-shadow);cursor:pointer;
    color:#fff;font:600 15px/1 var(--f-ui);align-items:center;justify-content:center;overflow:hidden}
  .menu-btn::after{content:"";position:absolute;top:-1px;right:-1px;width:16px;height:16px;
    background:linear-gradient(to top right,var(--lavender) 48%,var(--albumen) 48% 54%,var(--ground) 54%);
    transition:transform .22s ease-out;transform-origin:top right}
  .is-home .menu-btn::after{background:linear-gradient(to top right,var(--lavender) 48%,var(--albumen) 48% 54%,var(--petrol) 54%)}
  .menu-btn[aria-expanded="true"]::after{transform:scale(0)}
  .menu-btn .lbl-close{display:none}
  .menu-btn[aria-expanded="true"] .lbl-open{display:none}
  .menu-btn[aria-expanded="true"] .lbl-close{display:inline}
  .is-home .menu-btn{border-color:var(--albumen)}
  .brandmark img{width:136px}
}
#site-nav{position:fixed;inset:76px 0 0 0;z-index:39;background:var(--page);padding:28px var(--gutter) 40px;
  overflow:auto;transform-origin:left center;transform:perspective(1200px) rotateY(-100deg);opacity:0;visibility:hidden;
  transition:transform .38s cubic-bezier(.3,.7,.2,1),opacity .2s,visibility 0s .38s;box-shadow:inset 18px 0 30px -24px rgba(11,42,48,.4)}
#site-nav.open{transform:none;opacity:1;visibility:visible;transition:transform .38s cubic-bezier(.3,.7,.2,1),opacity .2s}
#site-nav ul{list-style:none;margin:0 0 26px;padding:0}
#site-nav li{border-bottom:1px solid var(--rule)}
#site-nav li a{display:block;position:relative;padding:14px 0 14px 28px;font:600 26px/1.2 var(--f-display);color:var(--petrol);
  text-decoration:none}
#site-nav li a::before{content:"";position:absolute;left:2px;top:22px;width:12px;height:12px;background:var(--petrol);
  clip-path:polygon(0 0,100% 0,0 100%)}
#site-nav .typed{margin-top:18px}
@media (min-width:1101px){#site-nav{display:none}}

/* ---------------------------------------------------------------- sections */
.sec{padding:clamp(64px,9vw,128px) 0}
.sec.tight{padding:clamp(44px,6vw,80px) 0}
.sec.page{background:var(--page)}
.sec.white{background:var(--paper)}
.cloth{background:var(--cloth),var(--petrol);color:var(--albumen);position:relative}
.cloth h1,.cloth h2,.cloth h3{color:var(--albumen)}
.cloth p,.cloth .lede{color:var(--mist-text)}
.cloth a:not(.btn):not(.btn-paper){color:var(--lavender-text)}
.seam-top{position:absolute;left:0;right:0;top:-1px;height:8px;width:100%;pointer-events:none}
.sec-head{max-width:760px;margin:0 0 clamp(32px,4vw,56px)}
.sec-head.center{margin-left:auto;margin-right:auto}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,30px)}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------------------------------------------------------- prints in an album */
.print{background:var(--paper);padding:6px;border-radius:9px;box-shadow:var(--print-shadow);position:relative}
.print img,.print .cmp{border-radius:3px}
.tilt-l{transform:rotate(-1.6deg)}.tilt-r{transform:rotate(1.4deg)}.tilt-s{transform:rotate(-.8deg)}
.step.tilt-l{transform:rotate(-.7deg)}.step.tilt-r{transform:rotate(.6deg)}.step.tilt-s{transform:rotate(-.35deg)}
.js .settle{opacity:0;transform:translateY(18px) rotate(3deg)}
.settle.in{opacity:1;transition:opacity .45s ease-out,transform .45s cubic-bezier(.2,.8,.2,1)}
.settle.in.tilt-l{transform:rotate(-1.6deg)}.settle.in.tilt-r{transform:rotate(1.4deg)}.settle.in.tilt-s{transform:rotate(-.8deg)}
.step.settle.in.tilt-l{transform:rotate(-.7deg)}.step.settle.in.tilt-r{transform:rotate(.6deg)}.step.settle.in.tilt-s{transform:rotate(-.35deg)}
.settle.in:not(.tilt-l):not(.tilt-r):not(.tilt-s){transform:none}
.mounted{position:relative}
.mounted>.mc{position:absolute;width:22px;height:22px;background:var(--petrol);z-index:2;box-shadow:0 1px 1px rgba(0,0,0,.15)}
.mounted>.mc.tl{top:-5px;left:-5px;clip-path:polygon(0 0,100% 0,0 100%)}
.mounted>.mc.tr{top:-5px;right:-5px;clip-path:polygon(0 0,100% 0,100% 100%)}
.mounted>.mc.br{bottom:-5px;right:-5px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.mounted>.mc.bl{bottom:-5px;left:-5px;clip-path:polygon(0 0,100% 100%,0 100%)}
.js .mounted.wait>.mc{opacity:0;transform:scale(1.4)}
.mounted.press>.mc{animation:press .24s ease-out both}
.mounted.press>.mc.tr{animation-delay:.06s}.mounted.press>.mc.br{animation-delay:.12s}.mounted.press>.mc.bl{animation-delay:.18s}
.cap{font:400 15px/1.4 var(--f-type);color:var(--muted);margin:12px 4px 0}
.cap a{color:inherit}
.cloth .cap{color:var(--mist-text)}
.demo-tag{display:inline-block;font:700 12px/1 var(--f-type);letter-spacing:.04em;text-transform:uppercase;color:var(--petrol);
  background:var(--lavender);padding:5px 7px;border-radius:4px;margin-right:6px;vertical-align:1px}

/* ---------------------------------------------------------------- before / after comparer */
.cmp{position:relative;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;background:#d9dfdb;
  --seam:50%;cursor:ew-resize}
.cmp img{width:100%;height:auto;display:block;pointer-events:none}
.cmp .after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--seam)) 0 0)}
.cmp .line{position:absolute;top:0;bottom:0;left:var(--seam);width:2px;margin-left:-1px;background:var(--lavender);
  box-shadow:0 0 0 .5px rgba(255,255,255,.9) inset,0 0 10px rgba(201,196,240,.85);pointer-events:none}
.cmp .handle{position:absolute;top:50%;left:var(--seam);transform:translate(-50%,-50%);width:44px;height:44px;border-radius:9px;
  background:var(--albumen);border:0;box-shadow:var(--lift-shadow);display:flex;align-items:center;justify-content:center;
  gap:4px;cursor:ew-resize;padding:0}
.cmp .handle span{width:2px;height:16px;background:var(--petrol);border-radius:1px}
.cmp .handle:focus-visible{outline:3px solid var(--petrol);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 7px rgba(255,255,255,.55)}
.cmp .lab{position:absolute;bottom:10px;font:400 13px/1 var(--f-type);color:#fff;background:rgba(20,85,97,.78);
  padding:6px 8px;border-radius:4px;pointer-events:none}
.cmp .lab.l{left:10px}.cmp .lab.r{right:10px}

/* ---------------------------------------------------------------- hero */
.hero{background:var(--cloth),var(--petrol);color:var(--albumen);position:relative;overflow:hidden;
  padding:clamp(28px,5vw,72px) 0 clamp(64px,8vw,112px)}
.hero .grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{color:var(--albumen);margin-bottom:22px;font-size:clamp(44px,5.3vw,80px)}
.hero h1 .h1l{display:block;white-space:nowrap}
.hero .lede{color:var(--mist-text);margin-bottom:30px}
.hero .note{display:flex;gap:12px;align-items:flex-start;margin:26px 0 0;color:var(--mist-text);font-size:16px;max-width:44ch}
.hero .note::before{content:"";flex:none;width:10px;height:10px;margin-top:.45em;background:var(--lavender);
  clip-path:polygon(0 0,100% 0,0 100%)}
.album{position:relative;justify-self:center;width:min(100%,660px);padding:28px 0 36px}
.album-page{position:relative;z-index:2;background:var(--page);border-radius:9px;transform:rotate(-3deg);
  padding:clamp(22px,3vw,40px) clamp(22px,3.4vw,46px) clamp(16px,2vw,24px);
  box-shadow:0 2px 3px rgba(0,0,0,.25),0 40px 60px -30px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.4)}
.album-page::before{content:"";position:absolute;inset:0;border-radius:9px;pointer-events:none;
  background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.35),transparent 60%)}
.hero-print{position:relative;margin:0 auto;width:min(100%,430px)}
.hero-print .frame{background:#fff;padding:6px;border-radius:3px;box-shadow:0 1px 2px rgba(11,42,48,.2),0 18px 30px -18px rgba(11,42,48,.5)}
.stage{position:relative;aspect-ratio:4/5;overflow:hidden;background:#cfd6d2;touch-action:pan-y;cursor:ew-resize;
  user-select:none;-webkit-user-select:none;--seam:50%}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .after{clip-path:inset(0 calc(100% - var(--seam)) 0 0)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s}
.stage.gl canvas{opacity:1}
.stage.gl .after,.stage.gl .line{visibility:hidden}
.stage .line{position:absolute;top:0;bottom:0;left:var(--seam);width:2px;margin-left:-1px;background:var(--lavender);
  box-shadow:0 0 10px rgba(201,196,240,.9);pointer-events:none}
.stage .handle{position:absolute;top:50%;left:var(--seam);transform:translate(-50%,-50%);z-index:3;width:44px;height:44px;
  border-radius:9px;background:var(--albumen);border:0;box-shadow:var(--lift-shadow);display:flex;align-items:center;
  justify-content:center;gap:4px;cursor:ew-resize;padding:0}
.stage .handle span{width:2px;height:16px;background:var(--petrol);border-radius:1px}
.stage .handle:focus-visible{outline:3px solid var(--petrol);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 7px rgba(255,255,255,.55)}
.album-page .typed-cap{font:400 15px/1.45 var(--f-type);color:var(--muted);margin:16px auto 4px;max-width:430px;min-height:2.9em}
.album-page .typed-cap a{color:inherit}
.hero-tools{display:flex;justify-content:center;margin-top:12px}
.hero-tools .btn-paper,.on-cloth .hero-tools .btn-paper{min-height:40px;padding:0 16px;font-size:15px;background:transparent;color:var(--petrol);border-color:var(--petrol)}
.on-cloth .hero-tools .btn-paper:hover{background:rgba(20,85,97,.06);color:var(--petrol-deep)}
.on-cloth .album-page :focus-visible{outline-color:var(--petrol)}
.ac-corner{position:absolute;width:30px;height:30px;background:var(--petrol);z-index:3}
.ac-corner.tl{top:-7px;left:-7px;clip-path:polygon(0 0,100% 0,0 100%)}
.ac-corner.tr{top:-7px;right:-7px;clip-path:polygon(0 0,100% 0,100% 100%)}
.ac-corner.br{bottom:-7px;right:-7px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.ac-corner.bl{bottom:-7px;left:-7px;clip-path:polygon(0 0,100% 100%,0 100%)}
.prop{position:absolute;pointer-events:none}
.prop-loose{z-index:1;width:42%;right:-6%;top:3%;transform:rotate(7deg);background:#f4ecdc;padding:7px 7px 26px;border-radius:4px;
  box-shadow:0 2px 3px rgba(0,0,0,.25),0 30px 40px -24px rgba(0,0,0,.6)}
.prop-loose img{filter:sepia(.7) contrast(.92) brightness(1.02);border-radius:2px;aspect-ratio:5/4;object-fit:cover;width:100%}
.prop-corners{z-index:3;width:112px;left:-2%;bottom:2%;transform:rotate(-8deg)}
.prop-pencil{z-index:3;width:210px;right:2%;bottom:-1%;transform:rotate(-21deg)}
@media (max-width:980px){
  .hero .grid{grid-template-columns:1fr}
  .hero-copy{order:1}.album{order:2}
  .hero h1{font-size:clamp(44px,11vw,64px)}
  .prop-loose,.prop-pencil{display:none}
  .album-page{transform:rotate(-1deg)}
  .hero .lede{margin-bottom:0}
  .hero .ctas{order:3}
}
.hero-copy .ctas{margin-top:0}
@media (max-width:980px){
  .hero .grid{display:flex;flex-direction:column;align-items:stretch}
  .hero-copy{display:contents}
  .hero-copy .typed{order:1}.hero-copy h1{order:2}.hero-copy .lede{order:3}
  .hero-copy .lede{margin-bottom:24px}
  .hero-copy .ctas{order:4}
  .album{order:5;width:100%;padding:34px 0 30px}
  .prop-corners{width:78px;left:-4px;bottom:-6px;transform:rotate(-10deg)}
  .hero-copy .note{order:6;margin-top:6px}
  .album-page .typed-cap{font-size:13.5px;min-height:0}
}

/* ---------------------------------------------------------------- what it mends (four small prints) */
.mends{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,32px)}
.mend-card h3{font-size:22px;margin:16px 4px 6px}
.mend-card p{font-size:16px;color:var(--muted);margin:0 4px}
.mend-card .cmp{aspect-ratio:4/5}
.mend-card .cmp img{height:100%;object-fit:cover}
@media (max-width:1000px){.mends{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .mends{gap:26px 14px}
  .mend-card h3{font-size:18px;margin:14px 2px 4px}
  .mend-card p{font-size:14.5px;line-height:1.45;margin:0 2px}
  .mend-card .cap{font-size:12.5px}
  .mend-card .cmp .handle{width:36px;height:36px}
  .mend-card .cmp .lab{font-size:11.5px;padding:5px 6px;bottom:7px}
  .mend-card .cmp .lab.l{left:7px}.mend-card .cmp .lab.r{right:7px}
}

/* ---------------------------------------------------------------- the face promise */
.promise{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:center}
.faces-demo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.faces-demo .print{padding:6px}
.faces-demo .tag{font:400 14px/1.3 var(--f-type);color:var(--mist-text);margin-top:10px}
.face-line{margin:22px 0 0}
@media (max-width:900px){.promise{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- how it works: three mounted prints */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,44px);counter-reset:s}
.step{background:var(--paper);border-radius:9px;padding:26px 24px 24px;box-shadow:var(--print-shadow);position:relative}
.step .num{font:700 15px/1 var(--f-type);color:var(--petrol);display:inline-block;margin-bottom:14px;background:var(--page);
  padding:6px 9px;border-radius:4px}
.step h3{margin-bottom:8px}
.step p{font-size:16px;color:var(--muted);margin:0}
.step svg{width:64px;height:64px;margin:0 0 16px}
.step:has(.step-art){padding:8px 8px 24px}
.step-copy{padding:0 16px}
.step-art{position:relative;aspect-ratio:4/3;border-radius:4px;overflow:hidden;margin-bottom:20px;
  background:radial-gradient(130% 100% at 28% 18%,#F1F4F2 0,#E4EAE5 55%,#D6DFD9 100%)}
.step-art img{display:block}
.step-art .k{position:absolute;width:13px;height:13px;background:var(--lavender);z-index:2}
.step-art .k.tl{top:-3px;left:-3px;clip-path:polygon(0 0,100% 0,0 100%)}
.step-art .k.tr{top:-3px;right:-3px;clip-path:polygon(0 0,100% 0,100% 100%)}
.step-art .k.br{bottom:-3px;right:-3px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.step-art .k.bl{bottom:-3px;left:-3px;clip-path:polygon(0 0,100% 100%,0 100%)}
.s-shoot .s-print{position:absolute;left:22%;top:21%;width:56%;background:#fff;padding:4px;transform:rotate(-4deg);
  box-shadow:0 1px 1px rgba(11,42,48,.15),0 10px 16px -10px rgba(11,42,48,.5)}
.s-shoot .s-print img{width:100%;height:auto;filter:sepia(.25)}
.s-phone{position:absolute;left:11%;right:11%;top:11%;bottom:11%;border:8px solid var(--ink);border-radius:22px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 22px 30px -18px rgba(11,42,48,.7);background:rgba(201,196,240,.08)}
.s-phone::before{content:"";position:absolute;left:-5px;top:50%;width:3px;height:22px;margin-top:-11px;border-radius:2px;
  background:#3a4a4e}
.s-phone::after{content:"";position:absolute;right:10px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(30,43,46,.25)}
@property --sseam{syntax:"<percentage>";inherits:true;initial-value:16%}
.s-split img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-split .after{clip-path:inset(0 calc(100% - var(--sseam)) 0 0)}
.s-split .line{position:absolute;top:0;bottom:0;left:var(--sseam);width:2px;margin-left:-1px;background:var(--lavender);
  box-shadow:0 0 10px rgba(201,196,240,.95),0 0 0 .5px rgba(255,255,255,.8) inset}
.s-split{--sseam:16%;transition:--sseam 1.8s cubic-bezier(.45,.05,.25,1) .35s}
.step.in .s-split,html:not(.js) .s-split{--sseam:62%}
.s-keep{display:grid;place-items:center}
.s-keep .kp{position:relative;width:64%;background:#fff;padding:5px;transform:rotate(2.2deg);
  box-shadow:0 1px 1px rgba(11,42,48,.12),0 14px 22px -12px rgba(11,42,48,.5)}
.s-keep .kp img{width:100%;height:auto}
.s-keep .kp .k{background:var(--petrol);width:15px;height:15px}
.s-keep .tag{position:absolute;left:7%;bottom:9%;font:400 13px/1 var(--f-type);color:var(--petrol);background:#fff;
  padding:7px 9px;border-radius:3px;transform:rotate(-4deg);box-shadow:0 6px 12px -6px rgba(11,42,48,.45)}
.steps-cap{margin-top:26px;max-width:72ch}
@media (max-width:900px){.steps{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
@media (max-width:560px){.step-art{aspect-ratio:16/10}.s-shoot .s-print{top:16%;left:24%;width:52%}}

/* ---------------------------------------------------------------- the price stacks */
.stacks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);align-items:stretch}
.stack{position:relative;text-align:center;padding:44px 14px 22px;border-radius:9px;display:flex;flex-direction:column;
  align-items:center}
.stack>form,.stack>.btn{margin-top:auto}
.sheet img{position:absolute;z-index:1;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);object-fit:cover;border-radius:2px;
  filter:sepia(.18) contrast(.96)}
.stack.chosen{background:rgba(255,255,255,.55)}
.stack .pile{position:relative;height:150px;margin:0 auto 18px;width:120px}
.sheet{position:absolute;left:50%;bottom:0;width:96px;height:120px;margin-left:-48px;background:#fff;border-radius:5px;
  box-shadow:0 1px 0 var(--eucalyptus),0 2px 0 #fff,0 3px 0 var(--eucalyptus),0 10px 18px -10px rgba(11,42,48,.4)}
.sheet::after{content:"";position:absolute;inset:7px;border-radius:2px;
  background:linear-gradient(160deg,#d8d1c2,#b9ad97 55%,#8f8574);opacity:.9}
.stack .price{font:700 clamp(40px,4vw,56px)/1 var(--f-display);color:var(--petrol);margin:0;font-variant-numeric:lining-nums}
.stack .per{font:400 15px/1.4 var(--f-type);color:var(--muted);margin:8px 0 2px}
.stack .suits{font-size:16px;color:var(--ink);margin:0 0 18px;text-wrap:balance}
.stack .count{font:600 18px/1.2 var(--f-ui);margin:0 0 6px;color:var(--ink)}
.stack .note{position:absolute;top:16px;left:0;right:0;font:400 14px/1 var(--f-type);color:var(--petrol);margin:0;max-width:none}
.stack form,.stack .btn{width:100%}
@media (max-width:900px){.stacks{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------------------------------------------------------- hold it in your hands */
.hold-row{display:grid;grid-template-columns:minmax(200px,340px) 1fr;gap:clamp(22px,4vw,56px);align-items:center;
  background:var(--paper);border-radius:9px;padding:clamp(20px,3vw,36px);box-shadow:var(--print-shadow);margin-bottom:22px}
.hold-row h3{margin-bottom:6px}
.hold-row .price{font:700 34px/1 var(--f-display);color:var(--petrol);margin:10px 0 12px}
.mock-a4{aspect-ratio:210/297;background:#fff;border-radius:3px;padding:12% 10%;box-shadow:0 1px 2px rgba(0,0,0,.12),0 26px 34px -22px rgba(11,42,48,.5);
  display:flex;align-items:center;justify-content:center;width:72%;margin:0 auto}
.mock-a4 img{width:100%;height:auto}
.mock-frame{aspect-ratio:3/4;border:14px solid #1d1d1d;background:#fff;padding:13%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 30px 40px -22px rgba(11,42,48,.6);
  display:flex;align-items:center;justify-content:center;width:76%;margin:0 auto;border-radius:2px;transition:border-color .3s}
.mock-frame img{width:100%;height:auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
@media (max-width:760px){.hold-row{grid-template-columns:1fr}}
.hold-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,32px)}
.hold-card{background:var(--paper);border-radius:9px;box-shadow:var(--print-shadow);overflow:hidden;display:flex;flex-direction:column}
.hold-stage{position:relative;background:var(--ground);display:flex;justify-content:center;align-items:center;
  height:clamp(300px,30vw,380px);padding:28px 0}
.hold-stage .mock-a4{width:min(220px,50%);margin:0;padding:22px 18px}      /* px: % padding would follow the stage */
.hold-stage .mock-frame{width:min(236px,54%);margin:0 0 7%;padding:30px}
.hold-stage .mock-a4 img,.hold-stage .mock-frame img{display:block;width:100%;height:auto;flex:1 1 auto;min-width:0}
.hold-stage.shelf::after{content:"";position:absolute;left:14%;right:14%;bottom:8%;height:10px;border-radius:3px;
  background:var(--eucalyptus);box-shadow:0 10px 16px -10px rgba(11,42,48,.45)}
.hold-copy{padding:24px clamp(20px,3vw,32px) 26px}
.mock-tag{position:absolute;left:14px;top:14px;font:400 13px/1 var(--f-type);color:var(--petrol);background:var(--lavender);
  padding:5px 7px;border-radius:3px}
.hold-copy h3{margin:0 0 4px}
.hold-copy .price{font:700 34px/1 var(--f-display);color:var(--petrol);margin:8px 0 16px}
.hold-copy .price span{font:400 16px/1.3 var(--f-ui);color:var(--muted);margin-left:6px}
.hold-copy ul.corners{margin:0}
.hold-row .hold-stage{height:auto;min-height:clamp(280px,26vw,340px);border-radius:6px;padding:30px 0}
.hold-row .hold-stage.shelf::after{bottom:7%}
@media (max-width:760px){.hold-pair{grid-template-columns:1fr}.hold-stage{height:300px}}

/* ---------------------------------------------------------------- FAQ */
.faq{max-width:860px}
.faq h3{margin:34px 0 12px;font-size:24px}
.faq details{background:var(--paper);border-radius:9px;margin:0 0 10px;box-shadow:0 1px 0 var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font-weight:600;position:relative;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;margin-top:-8px;background:var(--petrol);
  clip-path:polygon(0 0,100% 0,0 100%);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details>div{padding:0 22px 20px;color:var(--ink)}
.faq details>div p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- the empty album slot (closing CTA) */
.slot-sec{background:var(--page);padding:clamp(64px,9vw,120px) 0}
.sec.page+.slot-sec{padding-top:0}
.slot{position:relative;max-width:720px;min-height:420px;margin:0 auto;background:var(--slot);border-radius:3px;
  padding:clamp(40px,6vw,64px) clamp(24px,5vw,64px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;box-shadow:inset 0 0 0 1px rgba(157,179,160,.35),inset 0 0 40px rgba(157,179,160,.15)}
.slot .typed{align-self:stretch}
.slot h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:24px}
.slot .small{margin:16px 0 0;color:var(--muted)}
.slot .mc{width:34px;height:34px}
@media (max-width:600px){.slot{min-height:520px}}

/* ---------------------------------------------------------------- inner page heads */
.page-head{padding:clamp(48px,7vw,96px) 0 clamp(28px,4vw,48px)}
.page-head .lede{margin-top:6px}
.crumbs{font:400 14px/1.3 var(--f-type);color:var(--muted);margin:0 0 18px}
.crumbs a{color:inherit}
.prose{max-width:720px}
.prose h2{font-size:clamp(28px,3.2vw,40px);margin-top:1.4em}
.prose h3{margin-top:1.2em}
.prose li{margin-bottom:.4em}
.example-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,32px)}
.example-row.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px}
@media (max-width:900px){.example-row,.example-row.two{grid-template-columns:1fr;max-width:560px}}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.callout{background:var(--paper);border-radius:9px;padding:24px 26px;box-shadow:var(--print-shadow)}
.callout.quiet{background:var(--page);box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:9px;background:var(--lavender);
  color:var(--petrol);font:600 14px/1 var(--f-ui)}
.chip.ok{background:#dce8df;color:var(--ok)}.chip.warn{background:#f3e3d6;color:#7a3e16}.chip.err{background:#f4dcd8;color:var(--error)}
.chip.grey{background:var(--page);color:var(--muted)}
.table{width:100%;border-collapse:collapse;font-size:16px}
.table th,.table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.table th{font:400 14px/1.3 var(--f-type);color:var(--muted)}

/* ---------------------------------------------------------------- forms */
.form{display:grid;gap:16px;max-width:560px}
.field label,.label{display:block;font-weight:600;font-size:16px;margin:0 0 6px}
.field .hint{font-size:15px;color:var(--muted);margin:4px 0 0}
input:not([type]),input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea{
  width:100%;font:400 17px/1.4 var(--f-ui);color:var(--ink);background:var(--paper);border:1.5px solid var(--field-edge);
  border-radius:9px;padding:13px 14px;min-height:52px}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid var(--lavender);outline-offset:0;border-color:var(--petrol)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45;cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--petrol)}
.err-msg{color:var(--error);font-size:15px;margin:6px 0 0}
.ok-msg{color:var(--ok);font-size:15px}
.honey{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.form-card{background:var(--paper);border-radius:9px;padding:clamp(22px,4vw,40px);box-shadow:var(--print-shadow)}
/* a lone card (sign in, find my order): mounted on an album page, held by four petrol corners */
.narrow>.form-card{border-radius:3px;margin-top:clamp(30px,4.4vw,52px);
  background:linear-gradient(135deg,var(--petrol) 50%,transparent 50%) top left/22px 22px no-repeat,
    linear-gradient(225deg,var(--petrol) 50%,transparent 50%) top right/22px 22px no-repeat,
    linear-gradient(45deg,var(--petrol) 50%,transparent 50%) bottom left/22px 22px no-repeat,
    linear-gradient(315deg,var(--petrol) 50%,transparent 50%) bottom right/22px 22px no-repeat,var(--paper);
  box-shadow:0 0 0 clamp(10px,2.4vw,24px) var(--page),0 0 0 calc(clamp(10px,2.4vw,24px) + 1px) rgba(157,179,160,.35)}

/* ---------------------------------------------------------------- the mend page (capture) */
.capture{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start}
.choose{display:grid;gap:14px}
.choose label.big{position:relative;display:flex;align-items:center;gap:18px;padding:22px 24px;background:var(--paper);
  border-radius:9px;box-shadow:var(--print-shadow);cursor:pointer;font:600 20px/1.2 var(--f-display);color:var(--petrol);
  border:2px solid transparent;transition:border-color .15s,box-shadow .15s}
.choose label.big:hover,.choose label.big:focus-within{border-color:var(--petrol);box-shadow:var(--lift-shadow)}
.choose label.big small{display:block;font:400 15px/1.4 var(--f-ui);color:var(--muted);margin-top:4px}
.choose label.big svg{flex:none;width:44px;height:44px}
.choose input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.only-phone{display:none}
.has-touch .only-phone{display:flex}
.drop{border:2px dashed var(--eucalyptus);border-radius:9px;padding:20px;text-align:center;color:var(--muted);font-size:16px}
.drop.over{border-color:var(--petrol);background:rgba(201,196,240,.25);color:var(--petrol)}
.capture-status{margin-top:18px}
.tip-strip{display:flex;gap:16px;align-items:flex-start;background:#fff8ec;border:1px solid #ecd9b5;border-radius:9px;padding:16px 18px;
  color:#5a4521;font-size:16px}
.tip-strip.bad{background:#fbeeec;border-color:#e9c6c0;color:var(--error)}
.progress{height:4px;background:var(--rule);border-radius:2px;overflow:hidden;margin:12px 0}
.progress span{display:block;height:100%;width:0;background:var(--petrol);transition:width .25s}
@media (max-width:900px){.capture{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- the photo workspace */
.workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:clamp(24px,4vw,56px);align-items:start}
.ws-print{position:relative}
.ws-print .stage{aspect-ratio:auto}
.ws-print .stage img.before{position:relative;inset:auto;height:auto}
.scanning .scanline{position:absolute;left:0;right:0;height:3px;background:var(--lavender);box-shadow:0 0 16px 3px rgba(201,196,240,.85);
  top:0;animation:scan 2.6s ease-in-out infinite alternate;z-index:4}
@keyframes scan{from{top:2%}to{top:97%}}
.status-line{font:400 16px/1.4 var(--f-type);color:var(--petrol);min-height:1.4em;margin:12px 2px 0}
.chips-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 10px}
.vchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:9px;border:1.5px solid var(--petrol);
  background:var(--paper);color:var(--petrol);font:600 16px/1 var(--f-ui);cursor:pointer}
.vchip[aria-pressed="true"]{background:var(--petrol);color:#fff}
.vchip .dot{width:8px;height:8px;border-radius:2px;background:var(--lavender)}
.vchip[disabled]{opacity:.5;cursor:default}
.face-lines{list-style:none;padding:0;margin:14px 0 0}
.face-lines li{position:relative;padding-left:24px;font-size:16px;margin-bottom:4px}
.face-lines li::before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:10px;background:var(--petrol);clip-path:polygon(0 0,100% 0,0 100%)}
.tries{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.tries button{min-height:40px;padding:0 14px;border-radius:9px;border:1px solid var(--rule);background:var(--paper);font:500 15px/1 var(--f-ui);
  color:var(--ink);cursor:pointer}
.tries button:hover{border-color:var(--petrol);color:var(--petrol)}
.tries button[disabled]{opacity:.45;cursor:default}
.keep{background:var(--paper);border-radius:9px;padding:24px;box-shadow:var(--print-shadow);position:sticky;top:96px}
.keep h2{font-size:30px;margin-bottom:12px}
.opt{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1.5px solid var(--rule);border-radius:9px;margin:0 0 8px;cursor:pointer;
  font-size:16px;background:var(--paper)}
.opt:has(input:checked){border-color:var(--petrol);background:rgba(201,196,240,.18)}
.opt input{margin-top:3px;accent-color:var(--petrol);width:18px;height:18px;flex:none}
.opt .amt{margin-left:auto;font-weight:700;color:var(--petrol);white-space:nowrap}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.swatches label{width:34px;height:34px;border-radius:50%;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.swatches input{position:absolute;opacity:0;inset:0;cursor:pointer}
.swatches label:has(input:checked){outline:3px solid var(--petrol);outline-offset:2px}
.swatches label:has(input:focus-visible){outline:3px solid var(--petrol);outline-offset:2px;box-shadow:0 0 0 6px var(--paper),0 0 0 8px var(--petrol)}
.mini-mock{display:flex;gap:18px;align-items:center;margin:12px 0}
.mini-mock .mock-a4,.mini-mock .mock-frame{width:110px;margin:0}
.mini-mock .mock-a4{padding:12px 10px}.mini-mock .mock-frame{padding:14px;border-width:8px}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule);padding-top:14px;margin-top:14px}
.total b{font:700 30px/1 var(--f-display);color:var(--petrol)}
.keep .check{margin:10px 0}
.help-strip{margin-top:26px;font-size:15px;color:var(--muted)}
.mobile-bar{display:none}
@media (max-width:980px){
  .workspace{grid-template-columns:1fr}
  .keep{position:static}
  .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--paper);box-shadow:0 -10px 30px -16px rgba(11,42,48,.45);
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));align-items:center;gap:14px}
  .mobile-bar b{font:700 24px/1 var(--f-display);color:var(--petrol)}
  .mobile-bar .btn{margin-left:auto;min-height:52px;padding:0 22px}
  body.has-bar .site-footer{padding-bottom:calc(34px + 84px + env(safe-area-inset-bottom,0px))}
  html:has(body.has-bar){scroll-padding-bottom:110px}   /* focus and scrollIntoView keep fields above the Keep bar */
}
.ws-album{background:var(--page);border-radius:9px;padding:clamp(16px,3vw,34px);
  box-shadow:inset 0 0 0 1px rgba(157,179,160,.35)}
.ws-album>.print>.mc{width:26px;height:26px}
.crop-album{max-width:820px;margin:0 auto;padding:clamp(26px,3.4vw,40px)}
.crop-album .crop-wrap{box-shadow:0 0 0 6px #fff,var(--print-shadow);border-radius:2px}
.crop-wrap{position:relative;max-width:720px;margin:0 auto;touch-action:none}
.crop-wrap img{width:100%;height:auto;user-select:none}
.crop-wrap svg.quad{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.crop-wrap .corner{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(245,241,234,.95);
  border:3px solid var(--petrol);box-shadow:var(--lift-shadow);cursor:grab;touch-action:none;padding:0}
.crop-wrap .corner:focus-visible{outline:3px solid var(--petrol);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 7px rgba(255,255,255,.55)}

/* ---------------------------------------------------------------- order page */
.timeline{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:0}
.timeline li{position:relative;padding:0 0 18px 30px;font-size:16px;color:var(--muted)}
.timeline li::before{content:"";position:absolute;left:4px;top:.45em;width:12px;height:12px;background:var(--rule);
  clip-path:polygon(0 0,100% 0,0 100%)}
.timeline li::after{content:"";position:absolute;left:9px;top:1.4em;bottom:2px;width:1.5px;background:var(--rule)}
.timeline li:last-child::after{display:none}
.timeline li.done{color:var(--ink)}
.timeline li.done::before{background:var(--petrol)}
.timeline li.now{color:var(--petrol);font-weight:600}
.timeline li.now::before{background:var(--lavender)}
.files{display:grid;gap:10px;margin:14px 0}
.files a{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--paper);border:1.5px solid var(--rule);border-radius:9px;
  text-decoration:none;color:var(--ink)}
.files a:hover{border-color:var(--petrol)}
.files a span{margin-left:auto;font:400 14px/1 var(--f-type);color:var(--muted)}
.files svg{flex:none;width:22px;height:22px;color:var(--petrol)}
.panel{background:var(--paper);border-radius:9px;padding:clamp(20px,3vw,30px);box-shadow:var(--print-shadow);margin-bottom:22px}
.panel h2{font-size:clamp(26px,2.8vw,34px)}
.panel.quiet{background:var(--page);box-shadow:none}
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:clamp(22px,4vw,48px);align-items:start}
@media (max-width:900px){.order-grid{grid-template-columns:1fr}}
.preparing{display:flex;gap:16px;align-items:center}
.spinner{width:26px;height:26px;flex:none;border:3px solid var(--page);border-top-color:var(--petrol);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- account */
.credit-stack{display:flex;align-items:center;gap:22px;margin:6px 0 16px}
.credit-stack .pile{position:relative;width:86px;height:96px}
.credit-stack .sheet{width:66px;height:84px;margin-left:-33px}
.credit-stack b{font:700 56px/1 var(--f-display);color:var(--petrol)}
.photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.photo-tile{background:var(--paper);border-radius:9px;padding:6px 6px 14px;box-shadow:var(--print-shadow)}
.photo-tile .thumb{aspect-ratio:4/5;background:var(--page);border-radius:3px;overflow:hidden}
.photo-tile .thumb img{width:100%;height:100%;object-fit:cover}
.photo-tile .meta{padding:10px 8px 0;font-size:15px}
.photo-tile .meta .del{font:400 13px/1.3 var(--f-type);color:var(--muted);margin:6px 0 8px}
.photo-tile .acts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:15px}
@media (max-width:560px){
  .photos-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .photo-tile .meta{padding:8px 4px 0;font-size:14px}
  .photo-tile .acts{flex-direction:column;gap:6px;font-size:14px}
}
.empty-slot{position:relative;background:var(--slot);border-radius:3px;padding:48px 24px;text-align:center;max-width:520px;
  box-shadow:inset 0 0 0 1px rgba(157,179,160,.35)}

/* ---------------------------------------------------------------- footer */
.site-footer{position:relative;background:var(--cloth),var(--petrol);color:var(--mist-text);padding:clamp(56px,7vw,88px) 0 34px;margin-top:0}
.site-footer .top{display:grid;grid-template-columns:1.2fr repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.site-footer h2{font:600 18px/1.3 var(--f-display);color:var(--albumen);margin:0 0 12px}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.site-footer a{color:var(--lavender-text);text-decoration:none;font-size:15px}
.site-footer a:hover{text-decoration:underline;color:#fff}
.site-footer :focus-visible{outline-color:var(--lavender)}
.site-footer .lockup img{width:170px;height:auto}
.site-footer .tag{font:400 15px/1.5 var(--f-type);color:var(--mist-text);margin:16px 0 0;max-width:30ch}
.site-footer .legal{margin-top:46px;padding-top:22px;border-top:1px solid rgba(245,241,234,.14);font-size:13px;line-height:1.6;color:var(--mist-text)}
.site-footer .legal p{max-width:none;margin:0 0 4px}
@media (max-width:900px){.site-footer .top{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer .lockup{grid-column:1/-1}}

/* ---------------------------------------------------------------- sitekit pages in the brand's look */
.sk-wrap{padding-top:clamp(40px,7vw,88px)}
.sk-card{border-radius:9px;box-shadow:var(--print-shadow);border-color:var(--rule)}
.sk-card h1,.sk-legal h1,.sk-legal h2{color:var(--petrol)}
.sk-btn{border-radius:9px;min-height:52px;font-weight:600}
.sk-legal{font-size:17px}
.sk-legal h2{font-family:var(--f-display);font-weight:600}
.sk-flashes .sk-alert{font-size:16px;border-radius:9px}
.err-page{text-align:center;padding:clamp(64px,10vw,140px) 0}
.err-page .slot{min-height:340px}

/* ---------------------------------------------------------------- section heads: heading left, lede right (desktop) */
@media (min-width:901px){
  .sec-head.duo{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    column-gap:clamp(40px,7vw,112px);align-items:end}
  .sec-head.duo>.typed,.sec-head.duo>h2{grid-column:1}
  .sec-head.duo>h2{margin-bottom:0}
  .sec-head.duo>.lede{grid-column:2;grid-row:1/span 2;align-self:end;margin:0 0 .3em;max-width:46ch}
}
.more-link{margin-top:30px}

/* ---------------------------------------------------------------- FAQ: the heading beside the questions (desktop) */
.faq-split .sec-head .btn-paper{margin-top:6px}
@media (min-width:901px){
  .faq-split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr);column-gap:clamp(40px,6vw,96px);
    align-items:start}
  .faq-split>.sec-head,.faq-split>h2{grid-column:1;margin:0;position:sticky;top:112px}
  .faq-split>.faq{grid-column:2;grid-row:1;max-width:none}
  .faq-split>h2{font-size:clamp(32px,3.4vw,46px)}
}
@media (max-width:900px){.faq-split .sec-head .lede{margin-bottom:16px}}

/* ---------------------------------------------------------------- two prints on the album page (page heads) */
.pair{position:relative;margin:0;padding:22px 6% 0 2%}
.pair-back,.pair-front{background:#fff;padding:7px;border-radius:9px}
.pair img{display:block;width:100%;height:auto;aspect-ratio:var(--pr,4/5);object-fit:cover;border-radius:3px;background:var(--page)}
.pair.land{padding-top:34px}.pair.land .pair-back{width:66%}.pair.land .pair-front{width:80%;margin-top:22%}
.pair-back{position:absolute;right:0;top:0;width:60%;transform:rotate(6deg);box-shadow:var(--print-shadow)}
.pair-back img{filter:saturate(.9) brightness(.98)}
.pair-front{position:relative;z-index:2;width:68%;margin-top:16%;transform:rotate(-2.5deg);box-shadow:var(--lift-shadow)}
.pair .lab{position:absolute;top:16px;font:400 13px/1 var(--f-type);color:var(--petrol);background:var(--paper);
  padding:6px 8px;border-radius:3px;box-shadow:0 4px 10px -6px rgba(11,42,48,.5)}
.pair-back .lab{right:16px}
.pair-front .lab{left:22px;top:22px;background:var(--lavender)}
.pair .cap{margin-top:26px;max-width:46ch}
.pair.single{padding:6px 10% 0}
.pair.single .pair-front{width:100%;margin-top:0;transform:rotate(-1.5deg)}
.page-head.has-art .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);
  align-items:center}
.page-head .head-art{max-width:440px;justify-self:end;width:100%}
.head-wall{position:relative;display:flex;justify-content:center;align-items:center;padding:34px 0 46px;border-radius:9px;
  background:radial-gradient(120% 90% at 30% 20%,#F1F4F2,#E4EAE5 60%,#D9E1DB)}
.head-wall .mock-frame{width:64%;margin:0;padding:26px;transform:rotate(-1deg)}
.head-wall::after{content:"";position:absolute;left:16%;right:16%;bottom:24px;height:10px;border-radius:3px;background:var(--eucalyptus);
  box-shadow:0 10px 16px -10px rgba(11,42,48,.45)}
@media (max-width:900px){
  .page-head.has-art .wrap{display:block}
  .page-head .head-art{display:none}
}

/* ---------------------------------------------------------------- the memorial line on the home page */
.mem-band{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(32px,6vw,96px);align-items:center;
  max-width:1040px}
.mem-print{margin:0;max-width:320px;justify-self:center;width:100%}
.mem-print .print img{width:100%;height:auto;border-radius:3px}
.mem-copy h2{font-size:clamp(30px,3.4vw,44px)}
.mem-copy .lede{margin-bottom:26px}
@media (max-width:760px){
  .mem-band{grid-template-columns:1fr}
  .mem-print{max-width:240px;order:2;justify-self:start;margin-left:8px}
}

/* ---------------------------------------------------------------- the mend page: an empty album slot to drop into */
.slot-drop{position:relative;background:var(--slot);border-radius:3px;padding:clamp(34px,4vw,48px) clamp(20px,3.4vw,40px);
  display:grid;gap:14px;box-shadow:inset 0 0 0 1px rgba(157,179,160,.45),inset 0 0 40px rgba(157,179,160,.16);
  transition:background .2s,box-shadow .2s}
.slot-drop>.mc{width:30px;height:30px}
.slot-drop .typed{text-align:center;margin:0 0 4px}
.slot-drop .drop-hint{margin:2px 0 0;text-align:center;font:400 15px/1.4 var(--f-type);color:var(--muted);max-width:none}
.slot-drop.over{background:#E9E6F8;box-shadow:inset 0 0 0 2px var(--lavender),inset 0 0 60px rgba(201,196,240,.5)}
.slot-drop.over .drop-hint{color:var(--petrol)}
.has-touch .slot-drop .drop-hint{display:none}
.choose label.big{background:var(--paper)}
.choose .rules{margin:16px 2px 0}

/* ---------------------------------------------------------------- how it works: the numbered steps */
ol.how-list{list-style:none;padding:0;margin:0;counter-reset:how}
ol.how-list>li{counter-increment:how;position:relative;padding:0 0 30px 64px;margin:0}
ol.how-list>li::before{content:counter(how) ".";position:absolute;left:0;top:2px;width:42px;height:42px;display:grid;
  place-items:center;font:700 16px/1 var(--f-type);color:var(--petrol);background:var(--paper);border-radius:9px;
  box-shadow:var(--print-shadow)}
ol.how-list>li::after{content:"";position:absolute;left:20px;top:54px;bottom:10px;width:2px;
  background:repeating-linear-gradient(to bottom,var(--eucalyptus) 0 6px,transparent 6px 11px)}
ol.how-list>li:last-child::after{display:none}
ol.how-list h2{font-size:clamp(24px,2.4vw,30px);margin:6px 0 10px}
ol.how-list p{margin:0}

/* ---------------------------------------------------------------- the questions page: topics beside the answers */
.faq-page{display:grid;grid-template-columns:minmax(200px,.36fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.faq-topics{position:sticky;top:112px}
.faq-topics ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.faq-topics a{display:block;position:relative;padding:10px 12px 10px 30px;border-radius:9px;text-decoration:none;
  color:var(--ink);font-weight:500}
.faq-topics a::before{content:"";position:absolute;left:10px;top:50%;width:10px;height:10px;margin-top:-6px;
  background:var(--petrol);clip-path:polygon(0 0,100% 0,0 100%)}
.faq-topics a:hover{background:var(--page);color:var(--petrol)}
.faq-topics .typed{margin-bottom:10px}
.faq-page .faq{max-width:none}
.faq-group{scroll-margin-top:110px}
.faq-group+.faq-group{margin-top:48px}
.faq-group h2{font-size:clamp(26px,2.8vw,34px);margin:0 0 16px}
@media (max-width:900px){
  .faq-page{grid-template-columns:1fr}
  .faq-topics{position:static}
  .faq-topics ul{display:flex;flex-wrap:wrap;gap:8px}
  .faq-topics a{padding:8px 12px 8px 26px;background:var(--paper);box-shadow:0 1px 0 var(--rule);font-size:15px}
  .faq-topics a::before{left:9px;width:9px;height:9px;margin-top:-5px}
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;scroll-behavior:auto!important}
  .js .settle,.js .ac.wait i,.js .mounted.wait>.mc{opacity:1;transform:none}
  #site-nav{transform:none}
  .typed .cur{display:none}
}
@media print{.site-header,.site-footer,.mobile-bar,.slot-sec{display:none}body{background:#fff}}