/* Denesha Farms. One stylesheet for the hub.
   A quiet printed page: lichen grey paper, iron ink, one tobacco barn brown.
   Recovered from the October 6 hub draft and extended to separate pages. */

@font-face{font-family:"EB Garamond";src:url("/fonts/eb-garamond.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/fonts/eb-garamond-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --paper:#E8EAE3;   /* lichen grey, not cream */
  --leaf:#DFE2DA;    /* a shade under the paper, for plates */
  --ink:#23272A;     /* iron gall */
  --faded:#565C56;   /* worn ink */
  --rule:#BFC3B8;
  --barn:#6B4F2E;    /* old tobacco barn board, the one accent */
  --text:"EB Garamond",Garamond,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --measure:34em;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#16191A;--leaf:#1D2122;--ink:#DEDFD8;--faded:#A2A59D;--rule:#353A39;--barn:#C9A878;color-scheme:dark}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:19px;line-height:1.55;
  font-variant-numeric:oldstyle-nums proportional-nums;font-kerning:normal;-webkit-font-smoothing:antialiased;
  text-shadow:0 0 .35px currentColor} /* a touch of ink spread */
@media (min-width:700px){body{font-size:20px}}
p{margin:0}
p+p{margin-top:1em}
a{color:inherit;text-decoration-line:underline;text-decoration-color:var(--barn);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--barn)}
:focus-visible{outline:1.5px solid var(--barn);outline-offset:3px}
img,svg{max-width:100%;display:block}
.wrap{max-width:980px;margin:0 auto;padding-inline:22px}
.col{max-width:var(--measure)}
.sc{font-variant-caps:all-small-caps;letter-spacing:.08em}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:12px;top:12px;background:var(--paper);padding:6px 10px;z-index:10}

/* Masthead */
.masthead{border-bottom:3px double var(--rule)}
.masthead .bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 28px;padding-block:18px 14px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .lockup{height:76px;width:auto;flex:none;overflow:visible}
.brand .lockup .acc{fill:var(--barn)}
@media (max-width:620px){.brand .lockup{height:58px}}
nav.main{display:flex;gap:4px 22px;flex-wrap:wrap;font-size:1.15rem}
nav.main a{text-decoration:none;color:var(--faded);padding-block:4px;border-bottom:1px solid transparent}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--barn)}
@media (max-width:620px){nav.main{width:100%;flex-wrap:nowrap;justify-content:space-between;gap:8px;font-size:1.02rem;letter-spacing:.04em;overflow-x:auto;scrollbar-width:none}nav.main a{white-space:nowrap}}

/* Opening of a page */
.opening{padding-block:72px 40px}
@media (min-width:700px){.opening{padding-block:112px 56px}}
.where{color:var(--faded);font-size:1.15rem;margin-bottom:14px}
h1,h2,h3{font-weight:400;margin:0;line-height:1.08;text-wrap:balance}
h1{font-size:clamp(2.6rem,9vw,5.4rem);letter-spacing:-.01em}
.opening h1.page{font-size:clamp(2.2rem,6.5vw,3.6rem);max-width:15em}
.line{font-style:italic;color:var(--faded);font-size:1.25rem;max-width:32em;margin-top:18px}
.kicker{color:var(--barn);font-size:1.15rem;margin-bottom:14px}
section.part h2.kicker{font-size:1.15rem;margin-bottom:14px}

/* Sections */
section.part{padding-block:56px}
section.part+section.part{border-top:1px solid var(--rule)}
.opening+section.part{padding-top:0}
section.part h2{font-size:clamp(1.7rem,4.4vw,2.4rem);margin-bottom:22px;max-width:18em}
.aside{font-style:italic;color:var(--faded)}
.after{margin-top:32px}
.more{display:inline-block;margin-top:26px;font-variant-caps:all-small-caps;letter-spacing:.08em;font-size:1.1rem}
.more+.more{margin-left:26px}
.fleuron{text-align:center;color:var(--rule);letter-spacing:.6em;margin:0;padding-block:8px;font-size:1.1rem}

/* Contents on the home page */
.contents{list-style:none;margin:0;padding:0;max-width:900px}
.contents li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:4px 14px;padding-block:22px;border-top:1px solid var(--rule)}
.contents li:last-child{border-bottom:1px solid var(--rule)}
.contents .n{color:var(--barn);font-variant-caps:all-small-caps;letter-spacing:.08em;padding-top:.35em}
.contents h3{font-size:1.6rem;margin-bottom:6px}
.contents h3 a{text-decoration:none}
.contents h3 a:hover{text-decoration:underline}
.contents p{color:var(--faded)}

/* Ledger: label and entry, like a farm book */
.ledger{margin:34px 0 0;max-width:720px}
.ledger div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:4px 22px;padding-block:12px;border-top:1px solid var(--rule)}
.ledger div:last-child{border-bottom:1px solid var(--rule)}
.ledger dt{font-size:1.08em;color:var(--barn);font-variant-caps:all-small-caps;letter-spacing:.08em}
.ledger dd{margin:0}
@media (max-width:520px){.ledger div{grid-template-columns:1fr}}

/* Plates: photo slots */
figure.plate{margin:40px 0 0;max-width:760px}
figure.plate.wide{max-width:none}
.plate .frame{aspect-ratio:3/2;background:var(--leaf);border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:-7px;
  display:grid;place-items:center;text-align:center;padding:24px}
.plate.wide .frame{aspect-ratio:16/9}
.plate .frame span{display:block;color:var(--faded)}
.plate .frame .sc{color:var(--barn);font-size:1rem;margin-bottom:6px}
.plate .frame em{font-size:1.02rem;max-width:22em}
.plate img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.plate.wide img{aspect-ratio:16/9}
.plate figcaption{font-style:italic;color:var(--faded);font-size:.95rem;margin-top:10px}

/* Two quiet columns */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:0 48px;max-width:900px;margin-top:30px}
.cols>div{padding-block:16px;border-top:1px solid var(--rule);min-width:0}
.cols h3{font-size:1.35rem;margin-bottom:6px}
.cols p{color:var(--faded);font-size:1.02rem}

/* Terms: tiers set as a printed rate card */
.terms{margin-top:30px;max-width:900px}
.terms>div{display:grid;grid-template-columns:11rem minmax(0,1fr) auto;gap:4px 26px;align-items:baseline;padding-block:20px;border-top:1px solid var(--rule)}
.terms>div:last-child{border-bottom:1px solid var(--rule)}
.terms .nm{font-size:1.45rem}
.terms .what{font-size:1.08em;color:var(--barn);font-variant-caps:all-small-caps;letter-spacing:.08em;display:block;margin-bottom:4px}
.terms p{color:var(--faded);font-size:1.02rem}
.terms .pr{font-variant-numeric:lining-nums;white-space:nowrap;text-align:right}
@media (max-width:720px){.terms>div{grid-template-columns:1fr auto}.terms .body{grid-column:1/-1;grid-row:2}}

/* Correspondence */
.letter{display:grid;gap:16px;max-width:30em;margin-top:28px}
.letter label{display:grid;gap:2px;color:var(--faded)}
.letter input,.letter textarea{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:6px 0;width:100%;text-shadow:none}
.letter textarea{min-height:120px;resize:vertical}
.letter input:focus,.letter textarea:focus{border-bottom-color:var(--barn);outline:none}
.letter button{justify-self:start;font:inherit;font-variant-caps:all-small-caps;letter-spacing:.08em;font-size:1.1rem;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:6px 22px 8px;cursor:pointer}
.letter button:hover{color:var(--barn);border-color:var(--barn)}
.letter .note{font-style:italic;color:var(--faded);min-height:1.5em}
.hp{display:none}

/* Footer */
footer.colophon{border-top:3px double var(--rule);margin-top:24px;padding-block:36px 56px;color:var(--faded)}
footer.colophon .wrap{display:grid;gap:18px}
footer.colophon nav{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:1.05rem}
footer.colophon nav a{text-decoration:none}
footer.colophon nav a:hover{text-decoration:underline}
footer.colophon p{font-size:.95rem;max-width:40em}
footer.colophon .mark{width:56px;height:56px;color:var(--faded)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.masthead nav,.letter,.skip{display:none}body{background:#fff;color:#000;text-shadow:none}}

/* Photographs and illustrations */
figure.photo,figure.art{margin:40px 0 0;max-width:760px}
figure.photo.wide{max-width:none}
figure.photo.tall{max-width:520px}
figure.photo img,figure.art img{width:100%;height:auto;background:var(--leaf)}
figure.photo figcaption,figure.art figcaption{font-style:italic;color:var(--faded);font-size:.95rem;margin-top:10px;max-width:40em}
figure.photo img{border:1px solid var(--rule)}
figure.art.map{max-width:720px;margin-top:48px}
.enlarge{display:block;text-decoration:none}
@media (prefers-color-scheme:dark){figure.art picture{display:block;background:#E8EAE3;padding:10px}}

/* Season strip on Advising */
.season{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px}
@media (min-width:860px){.season{grid-template-columns:repeat(4,minmax(0,1fr))}}
.season li{min-width:0;display:flex;flex-direction:column}
.season picture{display:block;aspect-ratio:1/1;overflow:hidden}
.season img{width:100%;height:100%;object-fit:contain}
@media (prefers-color-scheme:dark){.season picture{background:#E8EAE3}}
.season .stage{color:var(--barn);margin-top:12px;font-size:1.02rem}
.season h3{font-size:1.3rem;margin:2px 0 6px}
.season p:not(.stage){color:var(--faded);font-size:1rem}
.credit{font-style:italic;color:var(--faded);font-size:.95rem;margin-top:24px}

/* Experience on Advising */
.about{display:grid;gap:24px 40px;align-items:start;max-width:900px}
@media (min-width:700px){.about{grid-template-columns:240px minmax(0,1fr)}}
figure.photo.portrait{margin:0;max-width:240px}
.career{display:grid;gap:10px 44px;align-items:start;max-width:980px;margin-top:20px}
@media (min-width:860px){.career{grid-template-columns:minmax(0,460px) minmax(0,1fr)}}
.career .ledger{margin-top:40px}
.career .ledger div{grid-template-columns:9.6rem minmax(0,1fr)}
.career .ledger dt{white-space:nowrap}
@media (max-width:520px){.career .ledger div{grid-template-columns:1fr}}