@font-face{font-family:"EB Garamond";src:url(fonts/ebg.woff2) format("woff2");font-style:normal;font-weight:400 600;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/ebg-italic.woff2) format("woff2");font-style:italic;font-weight:400 600;font-display:swap}
@font-face{font-family:"Cormorant SC";src:url(fonts/cormorant-sc.woff2) format("woff2");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Pinyon Script";src:url(fonts/pinyon.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}

:root{--paper:#f7f1e3;--paper2:#fbf7ee;--ink:#2a241d;--soft:#6b5f50;--rule:#d6c8ad;--red:#a8141d;--red2:#8e1018;--redhi:#bf2a31;--green:#5b7a2b;--green2:#45601d;--gold:#c9b27a}
*{box-sizing:border-box}
html{background:#e6decd;background-image:radial-gradient(rgba(110,85,40,.06) 1px,transparent 1px);background-size:4px 4px}
body{margin:0;font:19px/1.6 "EB Garamond",Georgia,serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--red2)}
.sheet{max-width:1080px;margin:0 auto;background:var(--paper);min-height:100vh;
 background-image:radial-gradient(rgba(120,90,40,.045) 1px,transparent 1px);background-size:5px 5px;
 border-left:12px solid var(--green);border-right:12px solid var(--green);
 box-shadow:inset 1px 0 0 var(--gold),inset -1px 0 0 var(--gold),0 0 50px rgba(60,40,10,.18)}
/* masthead */
.mast{position:relative;height:226px;margin:0 -12px;padding:0 12px}
.mast .strip{height:58px}
.mast .band{display:grid;grid-template-columns:40% 60%;height:168px}
.mast .art{background:url(img/banner-garden.jpg) center 40%/cover;position:relative}
.mast .art:after{content:"";position:absolute;inset:0;box-shadow:inset -18px 0 22px -18px rgba(60,0,0,.55)}
.mast .red{background:linear-gradient(180deg,var(--redhi),var(--red) 30%,var(--red2));display:flex;align-items:center;padding:0 40px 0 44px}
.tag{font:400 40px/1.25 "Pinyon Script",cursive;color:#fbf1e6;margin:0;text-shadow:0 1px 0 rgba(0,0,0,.18)}
.logo{position:absolute;left:40px;top:6px;font:400 88px/1.15 "Pinyon Script",cursive;color:#1c1712;text-decoration:none;z-index:2;
 text-shadow:0 0 6px rgba(251,247,238,.9),0 0 14px rgba(251,247,238,.6)}
.swash{position:absolute;left:262px;top:52px;width:330px;height:22px;z-index:2;pointer-events:none}
/* B: logo fully on a taller paper strip */
.mast.logo-b{height:auto}.logo-b .strip{height:104px;position:relative;display:flex;align-items:center;padding-left:40px}
.logo-b .logo{position:static;font-size:84px;line-height:1;text-shadow:none;padding-top:4px}
.logo-b .swash{position:static;flex:none;width:330px;height:22px;margin:40px 0 0 -22px}
/* C: logo inside the red block, above the tagline */
.mast.logo-c{height:auto}.logo-c .strip{height:16px}.logo-c .band{height:196px}
.logo-c .red{padding:0 44px 0 48px}
.logo-c .redin{display:flex;flex-direction:column;align-items:flex-start}
.logo-c .logo{position:static;font-size:76px;line-height:1.05;color:#f3e2b6;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.logo-c .rule-g{display:block;width:250px;height:1px;margin:12px 0 10px 4px;background:linear-gradient(90deg,rgba(243,226,182,.8),rgba(243,226,182,0))}
.logo-c .tag{font-size:31px;line-height:1.22;color:#fbf1e6}
/* nav */
nav.main{background:var(--red);border-top:1px solid #e9cfc4;border-bottom:1px solid #e9cfc4;box-shadow:0 1px 0 var(--red2),0 -1px 0 var(--red2);margin:10px -12px 0;position:relative;z-index:5}
nav.main ul{list-style:none;margin:0;padding:0;display:flex}
nav.main>ul>li{flex:1;position:relative}
nav.main a{display:block;text-align:center;padding:9px 6px 8px;color:#fbefe5;text-decoration:none;font:600 18px/1.2 "Cormorant SC",Georgia,serif;letter-spacing:.09em;transition:background .2s}
nav.main a:hover,nav.main li:focus-within>a{background:var(--redhi)}
nav.main a[aria-current]{background:var(--red2);box-shadow:inset 0 -2px 0 var(--gold)}
nav.main .sub{display:none;position:absolute;left:0;right:0;top:100%;background:var(--red);box-shadow:0 10px 24px rgba(40,10,5,.3);padding:4px 0}
nav.main li:hover .sub,nav.main li:focus-within .sub{display:block}
nav.main .sub a{font-size:17px;padding:7px 6px;border-top:1px solid rgba(255,235,220,.15)}
/* content */
main{padding:42px 64px 30px}
h1.script{font:400 54px/1.1 "Pinyon Script",cursive;color:var(--ink);margin:0 0 6px}
h1.script .yr{font-size:.86em}
.rule{border:0;height:1px;background:linear-gradient(90deg,var(--rule),transparent);margin:0 0 26px}
p{margin:0 0 1em;hyphens:auto}
.lead p{text-align:justify}
.split{display:grid;grid-template-columns:minmax(0,310px) 1fr;gap:52px;align-items:start}
.split.about{grid-template-columns:300px 1fr}
.frame{display:block;background:var(--paper2);padding:14px;border:1px solid #e3d8c2;
 box-shadow:0 1px 1px rgba(60,40,10,.08),0 6px 18px rgba(60,40,10,.12)}
.frame img{display:block;width:100%;height:auto;box-shadow:0 0 0 1px rgba(40,30,20,.18)}
figure{margin:0}
figure.feat figcaption,.cap{font-style:italic;text-align:center;color:var(--soft);font-size:17px;margin-top:10px}
/* frieze (echo of the old red picture banner) */
.frieze{position:relative;margin:44px -64px 6px;padding:18px 40px;display:flex;justify-content:center;align-items:center;gap:18px}
.frieze:before{content:"";position:absolute;left:0;right:0;top:50%;height:46px;transform:translateY(-50%);background:var(--red);
 border-top:1px solid #e9cfc4;border-bottom:1px solid #e9cfc4;box-shadow:0 1px 0 var(--red2),0 -1px 0 var(--red2)}
.frieze a{position:relative;display:block;background:var(--paper2);padding:7px;box-shadow:0 3px 10px rgba(40,15,5,.3);transition:transform .25s,box-shadow .25s}
.frieze a:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(40,15,5,.35)}
.frieze img{display:block;height:112px;width:auto}
/* gallery */
.years{display:flex;flex-wrap:wrap;gap:4px 0;margin:0 0 30px;padding:0;list-style:none;font:600 17px/1 "Cormorant SC",Georgia,serif;letter-spacing:.07em}
.years li+li:before{content:"·";color:var(--rule);margin:0 12px}
@media (max-width:720px){.years{gap:10px 16px}.years li+li:before{display:none}}
.years a{color:var(--soft);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.years a:hover{color:var(--red)}
.years a[aria-current]{color:var(--red);border-bottom-color:var(--red)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:34px;row-gap:0}
.work .d{padding-bottom:44px;min-height:1px}
.work{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;justify-items:center;align-content:start;text-decoration:none;color:inherit}
.work .t,.work .d{align-self:start}
.work.wide{grid-column:span 2}
.hang{align-self:end;width:100%;display:flex;align-items:flex-end;justify-content:center}
.mat{background:var(--paper2);padding:12px;border:1px solid #e1d5bd;max-width:100%;
 box-shadow:0 1px 1px rgba(60,40,10,.08),0 4px 10px rgba(60,40,10,.10),0 14px 26px -12px rgba(60,40,10,.25);transition:transform .3s ease,box-shadow .3s ease}
.mat img{display:block;max-height:198px;max-width:100%;width:auto;height:auto;box-shadow:0 0 0 1px rgba(40,30,20,.16),inset 0 0 0 1px #000}
.work:hover .mat,.work:focus-visible .mat{transform:translateY(-4px);box-shadow:0 2px 2px rgba(60,40,10,.06),0 10px 22px rgba(60,40,10,.16),0 22px 40px -14px rgba(120,60,10,.35),0 0 0 4px rgba(201,178,122,.18)}
.work:focus-visible{outline:none}
.work .t{font-style:italic;font-size:19px;padding-top:14px;text-align:center;line-height:1.25}
.work .d{font-size:14.5px;color:var(--soft);margin-top:3px;text-align:center;font-variant-numeric:lining-nums}
.work.full{grid-column:1/-1}
.panels{display:flex;gap:8px;align-items:center}
.panels img{min-width:0;flex:0 1 auto;max-height:180px!important}
.pager{display:flex;justify-content:space-between;margin-top:50px;padding-top:16px;border-top:1px solid var(--rule);font-size:18px}
.pager a{text-decoration:none;color:var(--soft)}.pager a:hover{color:var(--red)}
.pager i{font-style:italic}
/* composite page */
.comp{display:flex;justify-content:center;align-items:center;gap:10px;background:var(--paper2);padding:22px;border:1px solid #e1d5bd;
 box-shadow:0 4px 10px rgba(60,40,10,.10),0 18px 34px -14px rgba(60,40,10,.3)}
.comp a{display:block;flex:1 1 0;min-width:0;transition:transform .25s}.comp a:hover{transform:translateY(-3px)}
.comp img{display:block;width:100%;height:auto;box-shadow:0 0 0 1px rgba(40,30,20,.18)}
.comp-caps{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.note{max-width:620px;margin:10px 0 6px;font-size:21px}
.card{background:var(--paper2);border:1px solid #e1d5bd;border-left:4px solid var(--green);padding:24px 30px;max-width:640px;font-size:21px;
 box-shadow:0 4px 14px rgba(60,40,10,.08)}
footer{text-align:center;font-size:15px;color:var(--soft);padding:22px 20px 30px;border-top:1px solid var(--rule);margin:30px 64px 0}
/* lightbox */
.lb{position:fixed;inset:0;z-index:50;background:rgba(24,19,14,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 90px 18px;opacity:0;transition:opacity .25s}
.lb[hidden]{display:none}.lb.on{opacity:1}
.lb figure{display:flex;flex-direction:column;align-items:center;max-width:100%;max-height:100%;min-height:0}
.lb .pic{background:#f7f1e3;padding:10px;box-shadow:0 20px 60px rgba(0,0,0,.6);max-height:calc(100vh - 150px);display:flex}
.lb img{display:block;max-width:calc(100vw - 200px);max-height:calc(100vh - 170px);width:auto;height:auto;transition:opacity .2s}
.lb figcaption{color:#efe5d2;text-align:center;margin-top:16px;line-height:1.35}
.lb .lt{font-style:italic;font-size:26px}.lb .lm{font-size:16px;color:#bfb29b;margin-top:4px;letter-spacing:.02em}
.lb button{position:absolute;background:rgba(247,241,227,.08);border:1px solid rgba(247,241,227,.25);color:#f7f1e3;width:56px;height:56px;border-radius:50%;font:28px/1 Georgia,serif;cursor:pointer;transition:background .2s}
.lb button:hover,.lb button:focus-visible{background:rgba(201,178,122,.3);outline:none}
.lb .prev{left:22px;top:50%;transform:translateY(-50%)}.lb .next{right:22px;top:50%;transform:translateY(-50%)}
.lb .x{right:22px;top:18px;width:48px;height:48px;font-size:30px}
.lb .n{position:absolute;left:28px;top:28px;color:#bfb29b;font-size:15px;letter-spacing:.1em}
/* responsive */
@media (max-width:980px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}main{padding:34px 36px}footer{margin:30px 36px 0}.frieze{margin-left:-36px;margin-right:-36px}
 .mast .red{padding:0 26px}.tag{font-size:32px}}
@media (max-width:720px){
 body{font-size:19px}.sheet{border-width:6px}
 .mast{height:auto;margin:0 -6px;padding:0 6px}.mast .strip{height:62px}.logo{font-size:72px;left:20px;top:-2px}.swash{display:none}
 .mast .band{grid-template-columns:1fr;height:auto}.logo-b .strip{height:80px;padding-left:20px}.logo-b .logo{font-size:64px}.logo-c .band{height:auto}.logo-c .logo{font-size:58px}.logo-c .rule-g{width:180px}.mast .art{height:120px}.mast .red{padding:14px 20px}.tag{font-size:28px}
 nav.main{margin:8px -6px 0}nav.main>ul{flex-wrap:wrap}nav.main>ul>li{flex:1 0 33.3%}nav.main .sub{display:none!important}
 nav.main a{font-size:14.5px;letter-spacing:.02em;padding:12px 2px;border-bottom:1px solid rgba(255,235,220,.15)}
 main{padding:26px 20px}h1.script{font-size:38px}.work .d{padding-bottom:28px}footer{margin:24px 20px 0}
 .split,.split.about{grid-template-columns:1fr;gap:30px}.split.about .frame{max-width:300px;margin:0 auto}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;grid-auto-flow:dense}.work.wide{grid-column:span 2}
 .hang{height:auto}.mat{padding:8px}.mat img{max-height:160px}.panels img{max-height:90px!important}.work.full .hang{height:auto;min-height:0}.work .t{font-size:18px}
 .frieze{margin:34px -20px 0;padding:14px 10px;gap:8px;flex-wrap:wrap}.frieze img{height:70px}
 .comp{gap:5px;padding:10px}
 .lb{padding:70px 10px 20px}.lb img{max-width:calc(100vw - 40px);max-height:calc(100vh - 230px)}.lb .pic{padding:6px}
 .lb .prev,.lb .next{top:auto;bottom:16px;transform:none}.lb .prev{left:calc(50% - 70px)}.lb .next{right:calc(50% - 70px)}.lb figure{margin-bottom:60px}}

.nosave img,.nosave .osd,.nosave .osd canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
/* ---------- zoom viewer ---------- */
.lb.zl{background:rgba(24,19,14,.985);display:grid;grid-template-rows:64px minmax(0,1fr) auto;padding:0;align-items:stretch;justify-content:stretch}
.lb.zl[hidden]{display:none}
.zbar{display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:12px;position:relative;z-index:3}
.lb.zl .zbar button{position:static;transform:none}
.lb.zl .n{position:static;min-width:70px}
.ztools{display:flex;align-items:center;gap:2px;padding:3px 6px;border-radius:999px;background:rgba(247,241,227,.06);border:1px solid rgba(247,241,227,.14)}
.lb.zl .ztools button{width:40px;height:40px;border:0;background:transparent;display:grid;place-items:center;padding:0}
.lb.zl .ztools button:hover,.lb.zl .ztools button:focus-visible{background:rgba(201,178,122,.28)}
.ztools svg{width:20px;height:20px;stroke:#f3ead8;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.zlv{min-width:62px;text-align:center;color:#d9ccb3;font-size:15px;letter-spacing:.04em;font-variant-numeric:tabular-nums lining-nums}
.stage{position:relative;overflow:hidden;margin:0 90px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.zmat{position:absolute;background:#f7f1e3;box-shadow:0 20px 60px rgba(0,0,0,.6);transition:opacity .35s ease;pointer-events:none}
.zimg{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none!important;max-height:none!important;-webkit-user-drag:none;user-select:none;box-shadow:0 0 0 1px rgba(40,30,20,.25)}
.zimg.anim{transition:transform .34s cubic-bezier(.2,.75,.25,1)}
.lb.zl .zimg{transition:opacity .2s}.lb.zl .zimg.anim{transition:transform .34s cubic-bezier(.2,.75,.25,1),opacity .2s}
.stage.m-pan{cursor:zoom-in}.stage.m-pan.zoomed{cursor:grab}.stage.m-pan.dragging{cursor:grabbing}
.osd{position:absolute;inset:0}
.osd canvas{outline:none}
.zhint,.zload{position:absolute;left:50%;transform:translateX(-50%);background:rgba(24,19,14,.78);color:#efe5d2;padding:7px 18px;border-radius:999px;font-size:15px;
 border:1px solid rgba(201,178,122,.35);white-space:nowrap;pointer-events:none;transition:opacity .5s;z-index:4}
.zhint{bottom:16px}.zload{top:12px;opacity:0;font-style:italic}
.zhint.off,.zload.off{opacity:0}.zload.on{opacity:1}
.loupe{position:absolute;left:0;top:0;width:260px;height:260px;border-radius:50%;pointer-events:none;background-repeat:no-repeat;background-color:#f7f1e3;z-index:3;
 box-shadow:0 0 0 1px rgba(201,178,122,.8),0 0 0 6px rgba(24,19,14,.28),0 16px 44px rgba(0,0,0,.55),inset 0 0 22px rgba(0,0,0,.28);
 opacity:0;transform:scale(.85);transition:opacity .18s,transform .18s}
.loupe.on{opacity:1;transform:scale(1)}
.stage.m-loupe.looking{cursor:none}
.lb.zl .zcap{text-align:center;padding:12px 90px 20px;color:#efe5d2;line-height:1.35}
.zl .navigator{border-radius:2px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
@media (max-width:720px){
 .lb.zl{grid-template-rows:56px minmax(0,1fr) auto;padding:0}
 .zbar{padding:0 10px}.lb.zl .n{min-width:0;font-size:13px}
 .lb.zl .ztools button{width:36px;height:36px}.lb.zl .ztools .zf{display:none}.zlv{min-width:50px;font-size:14px}
 .lb.zl .x{width:42px;height:42px}
 .stage{margin:0}.lb.zl .zcap{padding:10px 16px 84px}.lb.zl .lt{font-size:22px}
 .zhint,.zload{font-size:13.5px;padding:6px 14px}.zhint{bottom:10px}
 .loupe{width:190px;height:190px}
}
