:root { color-scheme: light; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color: #202020; background: #faf9f7; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; }
.masthead { display: flex; justify-content: space-between; gap: 20px; padding: 23px 5vw; border-bottom: 1px solid #deddd9; font-size: 13px; }
.masthead span:first-child { font-weight: 600; }
.masthead span:last-child { color: #777; }
main { max-width: 1060px; margin: 0 auto; padding: 54px 28px 150px; }
.intro { margin-bottom: 36px; }
.eyebrow { font-size: 12px; color: #777; margin: 0 0 12px; }
h1 { font-size: clamp(30px,5vw,44px); font-weight: 500; letter-spacing: -1.4px; margin: 0 0 16px; }
#status { color: #666; line-height: 1.6; margin: 0; max-width: 540px; }
.photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 20px; }
.photos.single { grid-template-columns: 1fr; }
.photo { margin: 0; }
.image { position: relative; aspect-ratio: 3/2; background: #e8e6e2; display: grid; place-items: center; }
.image img { width: 100%; height: 100%; object-fit: contain; background: #101010; display: block; }
.image { overflow: hidden; }
.image.portrait { aspect-ratio: 2/3; }
.image img { transition: filter .4s ease, opacity .4s ease; }
.photo.processing .image img { filter: blur(3px); opacity: .65; }
.processing-overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; color: white; background: linear-gradient(transparent,rgba(0,0,0,.28)); font-size: 13px; letter-spacing: .02em; }
.processing-overlay span:last-child { text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.processing-overlay[hidden] { display: none; }
.photo.processing .placeholder { background: #282725; width: 100%; height: 100%; }
.spinner { width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .spinner { animation: none; } .image img { transition: none; } }
.placeholder { color: #777; font-size: 13px; padding: 20px; text-align: center; }
.caption { padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; font-size: 14px; }
.caption label { display: inline-flex; align-items: center; gap: 10px; min-height: 34px; cursor: pointer; }
.caption input { accent-color: #252525; width: 18px; height: 18px; margin: 0; }
.caption span { color: #777; font-size: 12px; }
button, a.download { font: inherit; cursor: pointer; }
button { background: #202020; color: #fff; border: 1px solid #202020; border-radius: 3px; min-height: 46px; padding: 12px 24px; font-size: 14px; }
button:disabled { cursor: default; color: #888; border-color: #deddd9; background: #eae8e4; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #486fcc; outline-offset: 4px; }
a.download { font-size: 13px; color: #222; text-underline-offset: 4px; }
.note { font-size: 12px; color: #777; margin-top: 32px; line-height: 1.7; }
.purchase { display: flex; justify-content: space-between; align-items: center; gap: 20px; position: fixed; bottom: 0; inset-inline: 0; padding: 18px max(28px,calc((100vw - 1004px)/2)); padding-bottom: max(18px,env(safe-area-inset-bottom)); background: #faf9f7; border-top: 1px solid #deddd9; }
.purchase strong, .purchase span { display: block; }
.purchase strong { font-size: 14px; font-weight: 500; }
.purchase span { font-size: 12px; color: #777; margin-top: 5px; }
#error { padding: 14px 0; color: #91412a; font-size: 14px; line-height: 1.5; }
@media(max-width:600px) { .masthead { padding: 20px; } main { padding: 34px 20px 190px; } .photos { grid-template-columns: 1fr; gap: 28px; } .purchase { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 20px max(16px,env(safe-area-inset-bottom)); } .purchase button { width: 100%; } }
@media(prefers-reduced-motion:no-preference) { button { transition: background .15s ease; } }

.tips { border:0; padding:0; margin:30px 0 0; }
.tips legend {font-size:14px;padding:0;margin-bottom:12px;} .tips legend span {color:#777;font-size:12px;margin-left:8px;}
.tips div {display:flex;gap:8px;flex-wrap:wrap;} .tips label {display:flex;align-items:center;gap:8px;border:1px solid #deddd9;border-radius:3px;padding:10px 14px;font-size:13px;cursor:pointer;} .tips input {accent-color:#202020;} .tips[hidden] {display:none;}

button.download {background:transparent;color:#20211f;border:0;padding:12px 0;min-height:44px;font-size:14px;text-decoration:underline;text-underline-offset:4px;}
.photo-save {box-sizing:border-box;border:0;border-radius:8px;background:#faf9f7;color:#20211f;padding:30px;max-width:440px;width:calc(100% - 32px);max-height:90dvh;overflow:auto;}
.photo-save::backdrop {background:rgba(20,20,20,.58);} .photo-save h2 {font-size:27px;font-weight:500;letter-spacing:-.6px;margin:12px 0;} .save-status {font-size:14px;line-height:1.55;color:#666;}
.save-close {position:absolute;right:12px;top:10px;background:transparent;border:0;color:#20211f;padding:0;width:44px;font-size:27px;} .save-image {display:block;max-width:100%;max-height:38dvh;object-fit:contain;margin:20px auto;} .save-image[hidden] {display:none;}
.save-primary {display:block;width:100%;margin-top:20px;} .save-primary[hidden] {display:none;} .save-file {display:block;text-align:center;color:#666;font-size:13px;text-underline-offset:4px;padding:16px 0 2px;} .save-file[hidden] {display:none;}

.photos[hidden], .note[hidden] {display:none;}
.customer-contact {max-width:440px;margin:28px auto 0;} .customer-contact[hidden] {display:none;} .customer-contact h2 {font-weight:500;font-size:22px;letter-spacing:-.4px;}
.contact-note {color:#777;font-size:13px;line-height:1.55;} .contact-form {display:grid;gap:18px;margin-top:24px;} .contact-form label {display:grid;gap:8px;font-size:14px;}
.contact-form input:not([type=checkbox]),.contact-form select {box-sizing:border-box;font:inherit;border:1px solid #deddd9;border-radius:3px;background:#fff;min-height:48px;padding:12px;width:100%;color:#20211f;}
.phone-input {display:grid;grid-template-columns:minmax(95px,42%) 1fr;gap:8px;} .contact-form .contact-consent {display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#666;line-height:1.5;} .contact-consent input {accent-color:#20211f;width:18px;height:18px;flex-shrink:0;}
.contact-skip {display:block;margin:12px auto 0;background:transparent;border:0;color:#666;text-decoration:underline;text-underline-offset:4px;} .contact-error {color:#91412a;font-size:13px;margin:0;}

.photo-action {width:100%;margin-top:12px;} .photo-action.in-basket {background:transparent;color:#20211f;border-color:#c5c2bc;} .basket {position:relative;border:0;border-radius:8px;background:#faf9f7;color:#20211f;width:calc(100% - 32px);max-width:480px;max-height:90dvh;padding:28px;overflow:auto;} .basket::backdrop {background:rgba(20,20,20,.58);} .basket h2 {font-weight:500;letter-spacing:-.6px;font-size:27px;margin:6px 0 24px;} .basket-item {display:flex;align-items:center;gap:14px;border-bottom:1px solid #deddd9;padding:14px 0;font-size:14px;} .basket-item img {width:72px;height:60px;object-fit:cover;} .basket-item span {flex:1;} .basket-remove {background:transparent;border:0;color:#666;padding:8px;min-height:44px;font-size:12px;text-decoration:underline;} .basket-checkout {width:100%;margin-top:28px;} button[hidden] {display:none;}

/* Studio identity and the first-screen contact form. */
:root { --studio-accent:#20211f; --studio-on-accent:#fff; background:#f5f1e9; }
.masthead {background:#fff;align-items:center;padding:24px max(28px,calc((100vw - 1004px)/2));}
.studio-brand {display:flex;align-items:center;gap:16px;min-width:0;}
.studio-brand img {max-width:210px;max-height:68px;object-fit:contain;}
.studio-brand img[hidden] {display:none;}
.studio-brand span {font-weight:600;font-size:14px;}
.masthead .private-label {font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#777;white-space:nowrap;}
.photo {background:#fff;border:1px solid #e6e1d8;border-radius:9px;overflow:hidden;padding:10px;}
.photo .image {border-radius:4px;}
.caption {padding-inline:4px;}
.photo-action,.save-primary,.basket-checkout,.contact-form button {background:var(--studio-accent);border-color:var(--studio-accent);color:var(--studio-on-accent);border-radius:6px;}
.purchase {background:#fff;}
.purchase #buy:not(:disabled) {background:var(--studio-accent);border-color:var(--studio-accent);color:var(--studio-on-accent);}
.powered-by {display:flex;align-items:center;gap:7px;width:fit-content;margin-top:12px;text-decoration:none;color:#777;}
.purchase .powered-by span {display:inline;margin:0;font-size:11px;}
.powered-by img {width:94px;height:auto;}
.powered-by .tether-word {color:#20211f;}
.contact-first main {padding-top:36px;padding-bottom:36px;}
.contact-first .intro {max-width:480px;margin:0 auto 22px;}
.contact-first .intro h1 {display:none;}
.contact-first .eyebrow {margin-bottom:5px;}
.contact-first #status {font-size:13px;}
.customer-contact {max-width:480px;margin:0 auto;background:#fff;border:1px solid #e6e1d8;border-radius:12px;padding:32px;box-shadow:0 8px 30px #372f2410;}
.customer-contact h1 {font-size:32px;letter-spacing:-1px;margin:0 0 10px;}
.contact-lead {font-size:14px;color:#777;line-height:1.6;margin:0;}
.contact-form {gap:20px;margin-top:26px;}
.contact-form label {font-size:13px;font-weight:500;}
.contact-form input:not([type=checkbox]),.contact-form select {font-size:16px;border-radius:6px;min-height:50px;}
.contact-form .contact-consent {background:#f5f1e9;border-radius:7px;padding:14px;font-weight:400;}
.contact-note {font-size:11px;margin:20px 0 0;}
.contact-skip {font-size:13px;}
.contact-first .purchase {position:static;border-top:0;background:transparent;justify-content:center;padding:10px 20px 30px;}
.contact-first .purchase #total,.contact-first .purchase #hint {display:none;}
@media(max-width:600px) {
 .masthead {padding:18px 20px;gap:14px;}
 .studio-brand {gap:10px;flex-wrap:wrap;}
 .studio-brand img {max-width:180px;max-height:55px;}
 .studio-brand span {font-size:12px;}
 .masthead .private-label {font-size:9px;}
 .customer-contact {padding:26px 22px;}
 .contact-first main {padding:26px 16px 20px;}
 .phone-input {grid-template-columns:minmax(110px,44%) 1fr;}
 .purchase .powered-by {margin-top:9px;}
 .contact-first .purchase {align-items:center;}
}

/* A supplied studio logo replaces the repeated text name. */
.studio-brand {flex:1;flex-wrap:nowrap;}
.studio-brand img {width:260px;max-width:100%;max-height:78px;}
.studio-brand:has(img:not([hidden])) #photographer {display:none;}
@media(max-width:600px) {
 .masthead {padding:18px 20px;}
 .studio-brand img {width:240px;max-width:100%;max-height:68px;}
 .masthead .private-label {font-size:9px;letter-spacing:.06em;}
}