@font-face{font-family:AarRoman;src:url('assets/roman.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:AarMono;src:url('assets/mono.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
:root{--paper:#f8f5ef;--ink:#24211f;--blue:#096781;--margin:clamp(24px,4.1vw,80px)}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink)}
body{margin:0}
button{color:inherit;font:inherit;background:none;border:0;padding:0;cursor:pointer}
button:focus-visible{outline:1px solid var(--blue);outline-offset:7px}
.homepage{height:100svh;min-height:420px;padding:0 var(--margin);display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.header{min-height:clamp(88px,10.5svh,112px);display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:16px;padding-bottom:0}
.wordmark{font-family:AarRoman,'Times New Roman',serif;font-weight:400;font-size:clamp(34px,4vw,72px);line-height:1.1;letter-spacing:-.045em;white-space:nowrap;margin:0;color:#111;align-self:flex-end}
@media(min-width:701px){.wordmark{-webkit-text-stroke:.5px var(--paper);paint-order:fill stroke}}
nav{display:flex;gap:clamp(25px,3.4vw,58px);align-items:center;font-family:AarMono,monospace;font-size:14px;letter-spacing:.22em}
nav button,nav a{min-height:44px;display:inline-flex;align-items:center;letter-spacing:normal;text-decoration-color:transparent;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .15s}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid var(--blue);outline-offset:7px}
nav button:hover,nav a:hover,nav a[aria-current="page"],nav button:focus-visible,nav a:focus-visible{text-decoration-color:#24211f66}
.hero{margin:0;min-height:0;overflow:hidden}
.hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.footer{min-height:80px;display:flex;align-items:center;justify-content:flex-end;gap:24px;font-family:AarMono,monospace;font-size:14px;font-weight:400;line-height:1.6;letter-spacing:.2em}
.services{margin:0;font-size:13px;letter-spacing:.16em;text-align:right;white-space:nowrap;text-transform:uppercase}
.contact{display:inline-flex;align-items:center;gap:16px;min-height:44px;white-space:nowrap}
dialog{background:var(--paper);color:var(--ink);border:1px solid #ded8cd;padding:0;max-width:min(480px,calc(100vw - 40px));font-family:AarRoman,serif}
dialog::backdrop{background:#1b242766}
.dialog-inner{padding:42px 36px 32px;position:relative}
.dialog-inner h2{font-weight:400;font-size:34px;margin:0 0 18px}
.dialog-inner p{font-size:19px;line-height:1.5;margin:0 0 28px}
.close{position:absolute;right:14px;top:8px;font-family:Arial,sans-serif;font-size:28px;width:32px;height:32px}
.back{font-family:AarMono,monospace;font-size:14px;text-decoration:underline;text-underline-offset:5px}
@media(min-width:1800px){.footer{font-size:16px}}
@media(max-width:1000px){.footer{gap:15px;letter-spacing:.13em}nav{gap:22px;letter-spacing:.14em}}
@media(max-width:700px){
  :root{--margin:22px}
  .homepage{min-height:580px;grid-template-rows:116px minmax(0,1fr) auto}
  .header{min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:14px 0 0}
  .wordmark{font-size:clamp(36px,10.7vw,70px);letter-spacing:-.035em;line-height:1;color:#111;align-self:center}
  nav{width:100%;justify-content:space-between;font-size:14px;gap:8px;letter-spacing:.16em}
  nav button{min-height:42px}
  .hero img{object-position:53% 50%}
  .footer{min-height:80px;flex-direction:column;justify-content:center;gap:12px;padding:15px 0 20px;font-size:14px}
  .contact{align-self:flex-start;gap:13px;min-height:35px}
  .services{width:100%;font-size:clamp(12px,3.5vw,15px);letter-spacing:.02em;text-align:justify;text-align-last:justify}
}
@media(max-width:390px){:root{--margin:18px}}
@media(max-height:500px) and (min-width:701px){.header{min-height:90px}.footer{min-height:65px}}
.works-index{min-height:100svh;display:flex;flex-direction:column;padding:0 var(--margin) 28px}
.work-selection{flex:1;display:flex;align-items:center;justify-content:center;padding-top:24px}
.work-card{width:min(100%,calc((100svh - 224px) * .54),459px)}
.work-card img{display:block;width:100%;height:auto}
.work-card h1{margin:12px 0 0;font-family:AarMono,monospace;font-size:13px;letter-spacing:.16em;line-height:1.6;text-align:center;font-weight:400;text-transform:uppercase}
.work-card h1 a{display:inline-flex;min-height:44px;align-items:center;padding:8px 4px}
@media(max-width:700px){.works-index .header{height:116px;flex-shrink:0}.work-card{width:min(100%,calc((100svh - 216px) * .56))}.work-card h1{font-size:clamp(12px,3.5vw,15px);letter-spacing:.02em}}
.work-cover{position:relative;display:block}
.work-cover::before,.work-cover::after{content:"";position:absolute;top:50%;width:13px;height:17px;background:url(assets/gold-star.svg) center / contain no-repeat;opacity:.85;pointer-events:none;transform:translateY(-50%)}
.work-cover::before{left:calc((100vw - 100%) / -4);transform:translate(-50%,-50%)}
.work-cover::after{right:calc((100vw - 100%) / -4);background-image:url(assets/gold-star-right.svg);transform:translate(50%,-50%) rotate(5deg)}
.gallery-page{height:100svh;padding:0 var(--margin) 24px;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
.work-intro{margin:12px 0 0;font-family:AarMono,monospace;font-size:14px;letter-spacing:.16em;font-weight:400}
.photo-gallery{display:flex;gap:0;padding-bottom:12px;min-height:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#24211f33 transparent;overscroll-behavior-x:contain}
.photo-gallery[data-order-pending],.gallery-rights[data-order-pending]{visibility:hidden}
.photo-gallery img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
[data-protected-photo]{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.gallery-rights{position:fixed;bottom:10px;left:var(--margin);right:var(--margin);margin:0;text-align:right;font-family:AarMono,monospace;font-size:12px;font-style:normal;line-height:18px;color:#5b5650}
.gallery-rights button{font:inherit;font-style:normal;color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){.gallery-page .photo-gallery{padding-top:2px;padding-bottom:20px}.gallery-rights{position:static;grid-column:1;grid-row:2;align-self:end;z-index:1;margin:0;text-align:right;font-size:clamp(8px,2.4vw,10px);white-space:nowrap}}
.photo-gallery figure{flex:0 0 auto;height:100%;margin:0}
.photo-gallery img{display:block;width:100%;height:100%;object-fit:contain}
.gallery-footer{min-height:56px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:AarMono,monospace;font-size:14px}
.gallery-footer a{display:inline-flex;min-height:44px;align-items:center}
@media(max-width:700px){.gallery-page .header{height:116px}.gallery-footer{flex-wrap:wrap;justify-content:center;gap:0 20px;padding-bottom:8px}.work-intro{font-size:13px;margin-top:4px}}

@media(max-width:700px){
  .homepage{grid-template-rows:80px 44px minmax(0,1fr) 64px}
  .homepage .header,.works-index .header,.gallery-page .header{display:contents}
  .homepage .wordmark,.works-index .wordmark,.gallery-page .wordmark{grid-row:1;grid-column:1;align-self:end;justify-self:center;margin-bottom:8px}
  .homepage nav,.works-index nav,.gallery-page nav{grid-column:1;grid-row:3;align-self:center;padding-bottom:env(safe-area-inset-bottom,0px)}
  .homepage nav{grid-row:4}
  .homepage .footer{grid-column:1;grid-row:2;min-height:0;padding:0 0 8px;gap:0;align-self:center}
  .homepage .hero{grid-column:1;grid-row:3}
  .works-index,.gallery-page{height:100svh;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:80px minmax(0,1fr) 64px;padding:0 var(--margin);gap:0}
  .work-selection{grid-column:1;grid-row:2;min-height:0;padding-top:0}
  .gallery-page .photo-gallery{grid-column:1;grid-row:2;align-self:stretch;height:100%;max-height:100%;width:100%}
}

@media(min-width:701px){.work-cover::before,.work-cover::after{width:16px;height:21px}}

.admin-page{max-width:1200px;margin:auto;padding:32px var(--margin) 60px;font-family:AarMono,monospace;font-size:16px}
.admin-page header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.admin-page h1{font-family:AarRoman,serif;font-size:32px;font-weight:400;margin:36px 0 12px}
.admin-page p{line-height:1.6}
.admin-actions{display:flex;gap:16px;flex-wrap:wrap}
.admin-actions button,.photo-actions button{border:1px solid #24211f55;padding:12px 16px;min-height:44px;font-size:14px}
.admin-actions button:disabled,.photo-actions button:disabled{opacity:.4;cursor:default}
#save-order{background:var(--ink);color:var(--paper)}
#admin-photos{list-style:none;counter-reset:photos;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:24px;margin:24px 0;padding:0}
#admin-photos li{counter-increment:photos;position:relative;border:1px solid #24211f22;padding:10px;cursor:grab}
#admin-photos li::before{content:counter(photos);position:absolute;left:16px;top:16px;background:var(--paper);padding:4px 8px}
#admin-photos img{display:block;width:100%;height:180px;object-fit:contain;pointer-events:none}
.photo-actions{display:flex;justify-content:space-between;gap:6px;margin-top:10px}
.photo-actions button{padding:8px;font-size:13px}
#admin-photos .drag-over{outline:2px solid #b18b42;outline-offset:3px}
#admin-photos .dragging{opacity:.4}
@media(max-width:700px){.admin-page{padding-top:20px}.admin-page .wordmark{font-size:36px}.admin-page header a:last-child{font-size:14px}.admin-page h1{font-size:28px}#admin-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#admin-photos img{height:140px}.photo-actions{flex-direction:column}}

@font-face{font-family:AarMono;src:url('assets/mono-italic.otf') format('opentype');font-style:italic;font-weight:400;font-display:swap}
.work-card h1{font-style:italic}
@font-face{font-family:AarStudio;src:url('assets/studio-roman.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:AarStudio;src:url('assets/studio-italic.otf') format('opentype');font-style:italic;font-weight:400;font-display:swap}
.studio-page{min-height:100svh;padding:0 var(--margin) 28px}
.studio-content{width:min(100%,1320px);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"portrait copy" "examples desk" "process services";grid-template-rows:minmax(calc(100svh - 260px),auto) auto auto;column-gap:clamp(36px,5vw,84px);row-gap:48px;align-items:center;padding:40px 0 60px}
.studio-content figure{margin:0;min-width:0}
.studio-content img{display:block;width:100%;height:auto}
.studio-portrait{grid-area:portrait;align-self:center;width:118%}
.studio-desk{grid-area:desk;align-self:start;width:108%;justify-self:end}
.studio-copy,.studio-examples,.studio-services{font-family:AarMono,monospace;font-size:clamp(14px,1vw,16px);line-height:1.55;max-width:50ch;text-transform:uppercase}
.studio-process{grid-area:process;width:118%;align-self:center}
.studio-content .studio-process{margin-top:var(--studio-third-offset,0px)}
@media(min-width:701px){.studio-services{margin-top:var(--studio-third-offset,0px)}}
.studio-process img{aspect-ratio:1818/1228;object-fit:cover;object-position:center}
.studio-services{grid-area:services;justify-self:center;text-align:center}
.studio-services p{margin:0 0 .9em}
.studio-services p:last-child{margin-bottom:0}
.studio-services p:first-child{font-size:clamp(16px,1.15vw,18px)}
.studio-copy h1,.studio-copy p,.studio-examples h2,.studio-services p{white-space:pre-line}
.studio-copy{grid-area:copy;justify-self:center;text-align:center}
.studio-copy h1,.studio-examples h2{font:inherit;font-size:clamp(16px,1.15vw,18px);margin:0 0 1em}
.studio-copy p{margin:0 0 .9em}
.studio-copy p:last-child{margin-bottom:0}
.studio-examples{grid-area:examples;justify-self:center;align-self:center;text-align:center;position:relative;top:0}
.studio-examples ul{list-style:none;margin:0;padding:0}
.studio-examples li{margin:0 0 .2em}
.studio-examples li:last-child{margin-top:1.55em}
.studio-end{display:flex;align-items:center;justify-content:center;min-height:28px}
.studio-divider,.studio-divider-last{display:none}
.studio-end img{opacity:.85;width:15px;height:20px;position:relative;top:-6px}
@media(max-width:700px){
 .studio-page{padding:0 var(--margin) calc(82px + env(safe-area-inset-bottom,0px))}
 .studio-page .header{display:contents}
 .studio-page .wordmark{display:block;text-align:center;padding-top:28px;margin-bottom:20px}
 .studio-page nav{position:fixed;z-index:5;bottom:0;left:var(--margin);width:calc(100% - 2 * var(--margin));min-height:64px;background:var(--paper);padding-bottom:env(safe-area-inset-bottom,0px)}
 .studio-page::after{content:"";position:fixed;z-index:4;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom,0px));background:var(--paper)}
 .studio-content{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"portrait" "copy" "divider" "desk" "examples" "divider-last" "process" "services";gap:0;padding:0 0 32px}
 .studio-copy,.studio-examples,.studio-services{font-size:14px;line-height:1.55;width:100%;justify-self:start}
 .studio-copy h1,.studio-examples h2,.studio-services p:first-child{font-size:16px}
 .studio-portrait,.studio-desk,.studio-process{width:calc(100% + 8px);margin-left:-4px!important;justify-self:start}
 .studio-portrait{margin-bottom:28px!important}
 .studio-copy{margin-bottom:34px}
 .studio-divider{grid-area:divider;display:flex;align-items:center;justify-content:center;height:16px}
 .studio-divider img,.studio-divider-last img{width:12px;height:16px;opacity:.85}
 .studio-divider-last{grid-area:divider-last;display:flex;align-items:center;justify-content:center;height:16px;margin-top:34px}
 .studio-desk{margin-top:34px!important;margin-bottom:46px!important}
 .studio-process{margin-top:34px!important;margin-bottom:46px!important}
 .studio-end{display:none}
}

@media(min-width:701px){.studio-end{margin-top:28px}}

.admin-switch{text-decoration:underline;text-underline-offset:4px;display:inline-block;padding:8px 0}
#studio-form{max-width:800px}
#studio-form label{display:block;margin:24px 0 10px}
#studio-form textarea,#studio-form input{display:block;width:100%;border:1px solid #24211f55;background:#fffdf9;color:var(--ink);padding:14px;font-family:AarMono,monospace;font-size:16px;line-height:1.5;border-radius:0}
#studio-form textarea{resize:vertical;min-height:120px}
#studio-form textarea:focus,#studio-form input:focus{outline:1px solid var(--ink);outline-offset:2px}
#studio-form .form-note{font-size:14px;line-height:1.6}
.admin-actions .primary{background:var(--ink);color:var(--paper)}

@media(max-width:700px){.studio-examples{top:0}}
@media(min-width:701px){
 .homepage .wordmark,.works-index .wordmark,.gallery-page .wordmark,.studio-page .wordmark{position:relative;top:28px}
 .header nav{align-self:flex-end;position:relative;top:28px}
 .homepage .hero{margin-top:40px}
 .works-index .header{flex-shrink:0}
 .works-index .work-selection{padding-top:40px}
 .gallery-page{row-gap:40px}
}

.text-format-controls{display:flex;gap:20px;flex-wrap:wrap;margin:10px 0 18px}
#studio-form .text-format-controls label{font-size:14px;margin:0;display:flex;gap:8px;align-items:center}
.text-format-controls select{font:inherit;font-size:14px;min-height:44px;padding:8px;background:var(--paper);color:var(--ink);border:1px solid #24211f55}

.selection-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}
.selection-toolbar span{font-size:14px;width:100%}
.selection-toolbar button{font:inherit;font-size:14px;padding:9px 12px;border:1px solid #24211f55;background:#fffdf9;color:var(--ink);cursor:pointer;min-height:40px}
.selection-toolbar button:disabled{opacity:.5;cursor:default}
.selection-toolbar button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.preview-label{font-size:14px;margin:16px 0 8px}
.text-preview{font-family:AarMono,monospace;font-size:16px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;border-left:2px solid #b79455;padding:12px 16px;min-height:44px}

.contact-dialog{width:min(440px,calc(100vw - 40px));border:1px solid #24211f33}
.contact-dialog .dialog-inner{padding:64px 32px 4px;text-align:center}
.contact-dialog .contact-address{font-family:AarMono,monospace;font-size:18px;line-height:1.5;margin:22px 0 24px;user-select:text;-webkit-user-select:text;overflow-wrap:anywhere}
.contact-actions{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;font-family:AarMono,monospace;font-size:14px}
.contact-actions a,.contact-actions button{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.contact-actions button:disabled{opacity:.5}
.contact-dialog .contact-status{color:#b18b42;font-family:AarMono,monospace;font-size:13px;font-style:italic;line-height:1.5;min-height:21px;margin:14px 0 0;transform:translateY(-8px)}
@media(max-width:390px){.contact-dialog .dialog-inner{padding:64px 24px 4px}.contact-actions{gap:4px 20px}}

.contact-star{display:flex;justify-content:center;align-items:center;height:21px;margin:0 0 18px}
.contact-star img{display:block;width:16px;height:22px;opacity:.85;transform:translateY(-9px)}

.contact-dialog .contact-address:focus{outline:none;box-shadow:none}

.works-index .work-cover::before,.works-index .work-cover::after{display:none}
.portfolio-star{display:flex;align-items:center;justify-content:center;flex:none}
.portfolio-star img{display:block;width:16px;height:21px;opacity:.85}
@media(min-width:701px){
 .works-index .work-selection{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:clamp(30px,3.5vw,58px);justify-items:center;width:min(100%,1040px);margin:0 auto}
 .works-index .work-card{width:min(100%,calc((100svh - 224px) * .54),459px)}
 .portfolio-star-between img{width:10.5px;height:14px}
 .portfolio-star-between{transform:translateY(-28px)}
}
@media(max-width:700px){
 .works-index{height:auto;min-height:100svh;grid-template-rows:80px auto;padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
 .works-index .work-selection{display:flex;flex-direction:column;gap:44px;padding:20px 0 24px}
 .works-index .work-card{width:90%;flex:none}
 .portfolio-star-between{display:flex;margin-top:-12px}
 .portfolio-star-between img{width:10px;height:13px}
 .works-index nav{position:fixed;z-index:5;bottom:0;left:var(--margin);width:calc(100% - 2 * var(--margin));min-height:64px;background:var(--paper);padding-bottom:env(safe-area-inset-bottom,0px)}
 .works-index::after{content:"";position:fixed;z-index:4;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom,0px));background:var(--paper)}
}
.gallery-admin-select{font:inherit;font-size:16px;padding:10px;min-height:44px;margin-left:12px;background:var(--paper);color:var(--ink);border:1px solid #24211f55}
#removed-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px;list-style:none;padding:0}
#removed-photos img{display:block;width:100%;height:150px;object-fit:contain;opacity:.65}
#removed-photos button{font:inherit;font-size:14px;min-height:44px;text-decoration:underline;text-underline-offset:5px}
