@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/cormorantgaramond-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/cormorantgaramond-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/cormorantgaramond-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/cormorantgaramond-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ebgaramond-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ebgaramond-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ebgaramond-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/ebgaramond-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{--paper:#f5f2ec;--panel:#ece7de;--ink:#1c1a17;--muted:#716b61;--line:#d8d1c4;--serif:'EB Garamond',Georgia,serif;--display:'Cormorant Garamond','EB Garamond',Georgia,serif;--measure:34rem}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.1875rem;line-height:1.68;font-feature-settings:"kern","liga","onum";-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--line);transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--ink)}
strong{font-weight:500}
p{margin:0 0 1.1em}
.label{font-family:var(--serif);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:400}

/* header */
.masthead{display:flex;align-items:center;justify-content:space-between;padding:1.6rem clamp(1.25rem,4vw,3.5rem);}
.masthead .mark img{height:46px;width:auto;mix-blend-mode:multiply}
.index-toggle{background:none;border:0;padding:.5rem 0;cursor:pointer;color:var(--ink);font:inherit;display:flex;align-items:center;gap:.8rem}
.index-toggle .bars{display:inline-block;width:22px;height:7px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.index{position:fixed;inset:0;z-index:50;background:var(--paper);display:none;overflow:auto;padding:1.6rem clamp(1.25rem,4vw,3.5rem) 4rem}
.index.open{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.index-top{display:flex;justify-content:space-between;align-items:center}
.index-top img{height:46px;width:auto;mix-blend-mode:multiply}
.index ol{list-style:none;margin:8vh auto 0;padding:0;max-width:44rem}
.index li{border-top:1px solid var(--line)}
.index li:last-child{border-bottom:1px solid var(--line)}
.index li a{display:flex;align-items:baseline;gap:2rem;padding:.7rem 0;text-decoration:none;font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.2}
.index li a .label{width:2.5rem;flex:none}
.index li a:hover,.index li a[aria-current]{font-style:italic}

/* chapter opening */
.chapter{max-width:72rem;margin:0 auto;padding:clamp(3rem,9vh,7rem) clamp(1.25rem,4vw,3.5rem) 0;text-align:center}
.chapter .label{display:block;margin-bottom:1.6rem}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.005em;margin:0}
h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.04;max-width:16ch;margin:0 auto}
h2{font-size:clamp(2rem,3.8vw,2.9rem);line-height:1.1;margin-bottom:1.4rem}
h3{font-size:1.65rem;line-height:1.2;margin-bottom:.6rem}
.chapter .rule{width:3rem;height:1px;background:var(--ink);margin:2.4rem auto 0;border:0}
.lede{font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.65rem);line-height:1.5;color:var(--ink)}

/* layout */
.wrap{max-width:72rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem)}
.text{max-width:var(--measure);margin-left:auto;margin-right:auto}
.section{padding:clamp(3.5rem,9vh,7rem) 0}
.section + .section{padding-top:0}
.center{text-align:center}
.divider{border:0;height:1px;background:var(--line);max-width:72rem;margin:0 auto}

/* plates */
.plate{margin:clamp(3rem,8vh,6rem) auto}
.plate img{margin:0 auto}
.plate figcaption{margin-top:1.1rem;text-align:center;font-style:italic;color:var(--muted);font-size:1rem}
.plate.banner{max-width:60rem}
.plate.banner img{width:100%}
.plate.narrow{max-width:38rem}
.plate.mid{max-width:50rem}
.grid{display:grid;gap:clamp(1rem,2.4vw,2rem)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.square{aspect-ratio:1/1;overflow:hidden;background:#111}
.square img{width:100%;height:100%;object-fit:cover}
.zoom{cursor:zoom-in}

/* home */
.signoff{margin-top:2.6rem}
.signoff img{width:220px;mix-blend-mode:multiply;margin-top:.6rem}

/* principles */
.entries{max-width:58rem;margin:0 auto}
.entry{display:grid;grid-template-columns:14rem 1fr;gap:2.5rem;padding:2.6rem 0;border-top:1px solid var(--line)}
.entry:last-child{border-bottom:1px solid var(--line)}
.entry h3{margin:0;font-size:1.75rem}
.entry .n{display:block;margin-bottom:.5rem}
.entry p:last-child{margin-bottom:0}

/* side by side */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5.5rem);align-items:center;max-width:64rem;margin:0 auto}
.pair + .pair{margin-top:clamp(4rem,10vh,7rem)}
.pair.flip > figure{order:2}
.pair figure{margin:0}
.numeral{font-family:var(--display);font-size:3.4rem;line-height:1;color:var(--muted);display:block;margin-bottom:.8rem}
blockquote{margin:0;font-family:var(--display);font-size:1.4rem;line-height:1.55;font-style:italic}
blockquote footer{margin-top:1.2rem;font-family:var(--serif);font-style:normal}

/* testimonials */
.voice{display:grid;grid-template-columns:11rem 1fr;gap:3rem;max-width:58rem;margin:0 auto;padding:3.4rem 0;border-top:1px solid var(--line)}
.voice:last-child{border-bottom:1px solid var(--line)}
.voice figure{margin:0}
.voice img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(.15)}
.voice h3{margin-bottom:.2rem}
.voice .role{font-style:italic;color:var(--muted);margin-bottom:1.4rem}
.voice .quote p{text-indent:0}
.voice .quote p:first-child::before{content:"“";font-family:var(--display);font-size:3.2rem;line-height:0;vertical-align:-.42em;margin-right:.15rem;color:var(--muted)}

/* publications */
.pubs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2.5rem,6vw,5rem) clamp(2rem,5vw,4rem);max-width:64rem;margin:0 auto}
.pub a.cover{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--panel);padding:8%;text-decoration:none}
.pub a.cover img{max-height:100%;width:auto;object-fit:contain;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.pub h3{margin:1.4rem 0 .5rem}
.pub p{color:#3c3832}

/* aesthetics dimensions */
.dims{max-width:64rem;margin:0 auto}

/* columns of info */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem);max-width:64rem;margin:0 auto}
.cols.two{grid-template-columns:repeat(2,1fr);max-width:52rem}
.col{border-top:1px solid var(--ink);padding-top:1.6rem}
.col h3{font-size:1.6rem}
.more{display:inline-block;margin-top:.4rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:.15rem}
.more:hover{color:var(--muted);border-color:var(--muted)}
ul.plain{list-style:none;padding:0;margin:0 0 1.2em}
ul.plain li{padding:.35rem 0;border-bottom:1px solid var(--line)}
ul.plain li:first-child{border-top:1px solid var(--line)}
.button{display:inline-block;padding:1rem 2.2rem;border:1px solid var(--ink);text-decoration:none;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;transition:background .2s,color .2s}
.button:hover{background:var(--ink);color:var(--paper)}
.small{font-size:1rem;color:var(--muted)}
.legal{font-size:1rem;line-height:1.6}
.legal h3{font-family:var(--serif);font-size:1rem;font-weight:500;margin:1.8rem 0 .4rem}
.legal h2{font-size:1.9rem;margin-top:3.5rem}

/* gallery */
.gallery{columns:4 14rem;column-gap:clamp(.8rem,1.8vw,1.4rem);max-width:80rem;margin:0 auto}
.gallery a{display:block;margin-bottom:clamp(.8rem,1.8vw,1.4rem);break-inside:avoid}

/* chapter nav + footer */
.turn{display:flex;justify-content:space-between;gap:2rem;max-width:72rem;margin:0 auto;padding:3rem clamp(1.25rem,4vw,3.5rem);border-top:1px solid var(--line)}
.turn a{text-decoration:none;display:block}
.turn a .t{display:block;font-family:var(--display);font-size:1.6rem;line-height:1.2;margin-top:.3rem}
.turn a:hover .t{font-style:italic}
.turn .next{text-align:right;margin-left:auto}
.colophon{background:var(--ink);color:#cfc8bb;padding:4.5rem clamp(1.25rem,4vw,3.5rem) 3rem;font-size:.95rem}
.colophon .inner{max-width:72rem;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:3rem}
.colophon .name{font-family:var(--display);font-size:1.7rem;color:#f5f2ec;line-height:1.2}
.colophon ul{list-style:none;margin:0;padding:0}
.colophon li{padding:.15rem 0}
.colophon a{text-decoration:none}
.colophon a:hover{color:#fff}
.colophon .label{color:#8f887c;display:block;margin-bottom:1rem}
.colophon .fine{max-width:72rem;margin:3.5rem auto 0;padding-top:1.6rem;border-top:1px solid #3a3631;color:#8f887c;font-size:.85rem}

/* lightbox */
.lb{position:fixed;inset:0;z-index:60;background:rgba(14,13,12,.97);display:none;align-items:center;justify-content:center}
.lb.open{display:flex;animation:fade .2s ease}
.lb img{max-width:92vw;max-height:88vh;width:auto;height:auto}
.lb button{position:absolute;background:none;border:0;color:#cfc8bb;font-family:var(--display);font-size:2.4rem;cursor:pointer;padding:1rem 1.4rem;line-height:1}
.lb button:hover{color:#fff}
.lb .close{top:.6rem;right:.8rem;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;font-family:var(--serif)}
.lb .prev{left:.5rem;top:50%;transform:translateY(-50%)}
.lb .next{right:.5rem;top:50%;transform:translateY(-50%)}
.lb .count{position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;color:#8f887c;font-size:.72rem;letter-spacing:.24em}

@media (max-width:820px){
  body{font-size:1.09rem}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .entry,.voice{grid-template-columns:1fr;gap:1.2rem}
  .voice figure{max-width:9rem}
  .pair{grid-template-columns:1fr;gap:2rem}
  .pair.flip > figure{order:0}
  .pubs,.cols,.cols.two{grid-template-columns:1fr}
  .colophon .inner{grid-template-columns:1fr;gap:2.2rem}
  .masthead .mark img,.index-top img{height:38px}
  .index-toggle .word{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
