/* DM Sans: normal, latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url(assets/fonts/dm-sans-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;
}

/* DM Sans: normal, latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url(assets/fonts/dm-sans-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;
}

/* Playfair Display: italic, cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 500;
  font-display: block;
  src: url(assets/fonts/playfair-display-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Playfair Display: italic, vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 500;
  font-display: block;
  src: url(assets/fonts/playfair-display-italic-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Playfair Display: italic, latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 500;
  font-display: block;
  src: url(assets/fonts/playfair-display-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;
}

/* Playfair Display: italic, latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 500;
  font-display: block;
  src: url(assets/fonts/playfair-display-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;
}

/* Playfair Display: normal, cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: block;
  src: url(assets/fonts/playfair-display-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Playfair Display: normal, vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: block;
  src: url(assets/fonts/playfair-display-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Playfair Display: normal, latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: block;
  src: url(assets/fonts/playfair-display-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;
}

/* Playfair Display: normal, latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 500;
  font-display: block;
  src: url(assets/fonts/playfair-display-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;
}

body{overflow-x:clip}
.site-header,main > section,.site-footer{position:relative;isolation:isolate}
:root{--paper:#d1c1a9;--ink:#252821;--muted:#62645e;--line:#d7d3c9;--forest:#2d433b;--cream:#f9f6ee}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:focus-visible{outline:2px solid #ac704d;outline-offset:5px}.shell{width:min(1160px,calc(100% - 88px));margin:0 auto}.site-header{display:flex;align-items:center;justify-content:space-between;padding-top:34px;padding-bottom:26px;border-bottom:1px solid var(--line)}.wordmark{font-family:'Playfair Display',Georgia,serif;font-size:24px;letter-spacing:-1.2px}.mark-dot{color:inherit}.site-header nav{display:flex;gap:38px;font-size:13px;font-weight:600;letter-spacing:.015em}.site-header nav a:hover,.text-link:hover{text-decoration:underline;text-underline-offset:5px}.hero{padding-top:105px;padding-bottom:45px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#77796f}.hero h1{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(100px,16vw,215px);letter-spacing:-.075em;line-height:.86;margin:41px 0 64px}.hero h1 em{font-weight:400;color:var(--forest)}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:40px}.hero-bottom p{max-width:375px;font-family:'Playfair Display',Georgia,serif;font-size:24px;line-height:1.5;margin:0}.text-link{font-size:13px;font-weight:700;white-space:nowrap;padding-bottom:6px}.text-link span{margin-left:15px}.fine-line{height:1px;background:var(--line);margin-top:95px}.writing-section,.about-section{padding:75px 0 110px}.section-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:35px}.section-top h2{font-family:'Playfair Display',Georgia,serif;font-size:57px;line-height:1;margin:0;font-weight:400;letter-spacing:-.04em}.writing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.writing-card{background:#e7e3d9;min-height:460px;padding:31px 35px 38px;display:flex;flex-direction:column;transition:transform .2s ease}.writing-card:hover{transform:translateY(-3px)}.card-dark{background:var(--forest);color:#f0ede4}.card-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.writing-card h3{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(39px,4.5vw,67px);line-height:1.08;letter-spacing:-.04em;margin:67px 0 18px}.writing-card h3 em{font-weight:400}.writing-card p{font-size:14px;line-height:1.8;max-width:340px;color:inherit;opacity:.8;margin:0}.card-status{display:block;border-top:1px solid currentColor;opacity:.75;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-top:auto;padding-top:20px}.publication-note{margin-top:25px;font-size:12px;color:var(--muted)}.about-section{border-top:1px solid var(--line)}.about-body{display:grid;grid-template-columns:1.25fr .75fr;gap:90px;margin-top:66px;align-items:end}.about-body .statement{font-family:'Playfair Display',Georgia,serif;font-size:clamp(31px,4vw,54px);line-height:1.35;letter-spacing:-.035em;margin:0}.about-body>p:last-child{font-size:15px;line-height:1.9;color:var(--muted);margin:0}.contact-section{background:#baa488;padding:95px 0 110px}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:50px}.contact-layout h2{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(80px,10vw,135px);line-height:.94;letter-spacing:-.07em;margin:35px 0 0}.contact-layout h2 em{color:var(--forest)}.contact-copy{align-self:end;max-width:380px;margin-left:auto}.contact-copy>p:first-child{font-family:'Playfair Display',Georgia,serif;font-size:28px;line-height:1.5}.button{display:inline-flex;align-items:center;gap:80px;background:var(--forest);color:white;font-size:13px;font-weight:700;padding:19px 23px;margin-top:22px}.button:hover{background:#172922}.contact-tip{font-size:11px;line-height:1.7;margin-top:21px;color:#605e55}.contact-tip code{font-size:10px}.site-footer{display:flex;justify-content:space-between;gap:16px;padding-top:28px;padding-bottom:33px;font-size:11px;color:var(--muted)}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:10px;top:10px;background:white;padding:8px;z-index:100}@media(max-width:750px){.shell{width:min(100% - 40px,600px)}.site-header{padding-top:24px}.wordmark{font-size:21px}.site-header nav{gap:16px;font-size:12px}.hero{padding-top:95px}.hero h1{font-size:clamp(85px,17vw,135px);margin:40px 0 60px}.hero-bottom{display:block}.hero-bottom p{font-size:21px}.text-link{display:inline-block;margin-top:30px}.fine-line{margin-top:65px}.writing-section,.about-section{padding:60px 0 75px}.section-top h2{font-size:43px}.writing-grid,.about-body,.contact-layout{grid-template-columns:1fr}.writing-card{min-height:390px}.writing-card h3{font-size:52px}.about-body{gap:26px;margin-top:35px}.contact-section{padding:70px 0}.contact-layout h2{font-size:100px}.contact-copy{margin-left:0}.site-footer{flex-wrap:wrap}}

.hero-heading{display:flex;align-items:center;gap:28px;margin-bottom:28px}
.hero-heading h1{font-size:clamp(40px,11.5vw,160px);white-space:nowrap;margin:0;text-indent:-.045em;line-height:.95}
.coffee-drawing{display:block;width:190px;height:auto;flex:none;overflow:visible}
.table-pencil{fill:none;stroke:#686868;stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round}
.hero-bottom{flex-wrap:wrap;gap:30px;width:100%}
.hero-bottom .handwriting-scene{position:relative;flex:0 0 100%;width:100%;min-width:0;padding:0;margin:0}
.hero-bottom .handwritten{max-width:none;margin:0;font-family:'Allura','Segoe Script',cursive;font-weight:400;font-size:clamp(24px,4vw,46px);line-height:1.9;white-space:nowrap;color:#403238}
.hero-bottom > .text-link{margin-left:auto}
.written-line{display:inline-block}
.has-tracing .written-line{display:none}
.js-loading .written-line{visibility:hidden}
.traced-handwriting{display:block;width:100%;height:auto;overflow:visible;color:#403238}
.letter-trace{fill:none;stroke:currentColor;stroke-width:2.16;stroke-linecap:round;stroke-linejoin:round}

@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(assets/fonts/allura-normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(assets/fonts/allura-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: 'Allura';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(assets/fonts/allura-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;
}
.writing-section{background:#baa488}
.about-section{border-top:0}
html{overflow-x:clip}
@media(max-width:750px){.hero-heading{gap:8px}.hero-heading h1{font-size:clamp(34px,11.5vw,85px)}.coffee-drawing{width:clamp(65px,22vw,125px)}.hero-bottom > .text-link{margin-top:24px}}

/* Paint the header itself so its background has straight, full-width edges. */
.site-header{display:block;background:#baa488;border-bottom:0}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.wordmark{white-space:nowrap}
@media(max-width:750px){.wordmark{font-size:19px;letter-spacing:-.8px}}

/* Shared card rows keep both descriptions on the same baseline. */
.writing-card{display:grid;grid-template-rows:auto 1fr minmax(76px,auto) auto;gap:18px;min-height:460px}
.writing-card h3{font-size:clamp(27px,3vw,40px);margin:45px 0 0;align-self:start;line-height:1.3}
.writing-card p{align-self:start}
.card-status{margin-top:0}
.fiction-title{display:flex;align-items:center;gap:10px}
.chrysanthemum-sketch{display:block;flex:none;width:33px;height:44px;opacity:.8;transform:rotate(-7deg)}
@media(max-width:750px){.writing-card{min-height:390px;grid-template-rows:auto minmax(120px,1fr) minmax(66px,auto) auto}.writing-card h3{font-size:clamp(24px,6vw,34px);margin-top:30px}.fiction-title{gap:6px}.chrysanthemum-sketch{width:27px;height:36px}}

.writing-card{min-height:400px;grid-template-rows:auto 1fr minmax(44px,auto) auto;gap:12px}
.writing-card h3{font-size:clamp(30px,3.5vw,48px);margin-top:32px;line-height:1.2}
.card-status{padding-top:16px}
@media(max-width:750px){.writing-card{min-height:350px;grid-template-rows:auto minmax(112px,1fr) minmax(44px,auto) auto}.writing-card h3{font-size:clamp(27px,7vw,39px);margin-top:22px}}


.writing-card .fiction-description{max-width:none}
.fiction-summary{white-space:nowrap;font-size:clamp(10px,1vw,14px)}
@media(max-width:750px){.fiction-summary{font-size:clamp(8px,2.35vw,13px)}}
.writing-card{grid-template-rows:auto 1fr 56px auto}
@media(max-width:750px){.writing-card{grid-template-rows:auto minmax(112px,1fr) 56px auto}}

.fiction-title{display:block}
.fiction-title-row{display:flex;align-items:center;gap:10px}
.fiction-subtitle{display:block;margin-top:8px;font-size:inherit;line-height:inherit}
.writing-card{grid-template-rows:auto 1fr auto auto;gap:0}
.writing-card h3{margin-bottom:24px}
.writing-card p{margin:0;padding-bottom:16px}
.card-status{margin:0;padding-top:16px}
@media(max-width:750px){.writing-card{grid-template-rows:auto minmax(135px,1fr) auto auto}.fiction-title-row{gap:6px}}

/* Share card rows so titles, descriptions and dividers stay aligned. */
.writing-grid{grid-template-rows:auto 1fr auto auto;column-gap:20px;row-gap:0}
.writing-card{grid-row:span 4;grid-template-rows:subgrid}
.fiction-title-row{align-items:baseline}
.chrysanthemum-sketch{align-self:center}
.fiction-subtitle{margin-top:0}
@media(max-width:750px){.writing-grid{grid-template-rows:none;row-gap:20px}.writing-card{grid-row:auto;grid-template-rows:auto minmax(135px,1fr) auto auto}}

.about-section .section-top{margin-bottom:18px}
.about-body{display:block;margin-top:0}
.about-body .statement{font-size:clamp(11px,2.8vw,36px);line-height:1.5;white-space:nowrap;margin:0 0 28px;letter-spacing:-.025em}
.about-copy{max-width:920px;font-size:15px;line-height:1.9;color:var(--muted)}
.about-copy p{margin:0 0 20px}
.about-copy p:last-child{margin-bottom:0}

.hero{padding-bottom:117px}

.contact-layout{grid-template-rows:auto auto;row-gap:35px}
.contact-layout > div:first-child{display:contents}
.contact-layout > div:first-child > .eyebrow{grid-column:1;grid-row:1;margin:0}
.contact-layout h2{grid-column:1;grid-row:2;margin:0}
.contact-copy{grid-column:2;grid-row:2;align-self:start}
.contact-copy > p:first-child{margin-top:0}
@media(max-width:750px){.contact-copy{grid-column:1;grid-row:3}}

.contact-layout{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:28px}
.contact-layout h2{white-space:nowrap}
.contact-copy{grid-column:1;grid-row:3;margin-left:0;max-width:none}
.contact-copy > p:first-child{margin:0}
.contact-copy .button{margin-top:26px}

.contact-form{max-width:700px;margin-top:32px}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.contact-form label{display:flex;flex-direction:column;gap:9px;font-size:12px;font-weight:600;letter-spacing:.02em}
.contact-form input:not([type=hidden]):not([type=checkbox]),.contact-form textarea{display:block;width:100%;border:1px solid #aaa395;border-radius:0;background:#f9f6ee80;color:var(--ink);padding:13px 14px;font:400 16px/1.5 'DM Sans',Arial,sans-serif}
.contact-form textarea{resize:vertical;min-height:140px}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.contact-form .button{border:0;border-radius:0;cursor:pointer;font-family:inherit;line-height:1.5}
.contact-form .button:focus-visible{outline:2px solid var(--forest);outline-offset:4px}
.contact-form .button:disabled{opacity:.65;cursor:wait}
.contact-form .contact-honeypot{display:none}
.contact-form .contact-result{margin:14px 0 0;min-height:1.7em;font-size:13px;line-height:1.7;color:var(--forest)}
.contact-form .contact-result[data-state=error]{color:#813b32}
@media(max-width:550px){.contact-fields{grid-template-columns:1fr}}

.contact-layout h2{font-size:clamp(64px,8vw,108px)}
.contact-section{padding-bottom:73px}
.contact-form .button{gap:40px}
.contact-form .contact-result:empty{display:none}
@media(max-width:750px){.contact-layout h2{font-size:80px}.contact-section{padding-bottom:54px}}

.contact-layout h2{font-size:clamp(51.2px,6.4vw,86.4px)}
.contact-layout{row-gap:22px}
.contact-section{padding-bottom:58px}
.contact-form{margin-top:26px}
.contact-copy .button{margin-top:20px}
.contact-form .button{gap:32px}
@media(max-width:750px){.contact-layout h2{font-size:64px}.contact-section{padding-bottom:43px}}

.contact-layout h2{font-size:clamp(40.96px,5.12vw,69.12px)}
.contact-form .button{gap:24px;padding-right:18px}
@media(max-width:750px){.contact-layout h2{font-size:51.2px}}

/* Increase contrast against the deeper paper backgrounds. */
.table-pencil{stroke:#373737}
.traced-handwriting,.hero-bottom .handwritten{color:#1a1518}
.eyebrow{color:#262621}
.about-copy{color:#23231e}

.coffee-steam{opacity:.7}
.site-footer{color:#35352d}
.site-header{background:#a98f70}

.site-header{color:#1e201a}

/* Give the smallest labels a little more breathing room and legibility. */
.eyebrow{font-size:12px}
.card-top{font-size:13px}
.card-status{font-size:12px}
.site-footer{font-size:12px}
.site-header nav{font-size:14px}
.contact-form label{font-size:13px}
.contact-form .button{font-size:14px}
.contact-form .contact-result{font-size:14px}
@media(max-width:750px){.site-header nav{font-size:13px}}

.header-inner{width:calc(100% - 64px);max-width:1440px}
.wordmark{font-size:28.8px}
.site-header nav{font-size:16.8px;gap:46px}
@media(max-width:750px){.header-inner{width:calc(100% - 32px)}.wordmark{font-size:22.8px}.site-header nav{font-size:15.6px;gap:20px}}

.header-inner{width:100%;max-width:none;padding-inline:12px}
@media(max-width:750px){.header-inner{width:100%;padding-inline:8px}}

.header-inner{padding-inline:clamp(24px,4vw,64px)}
@media(max-width:750px){.header-inner{padding-inline:20px}}

.wordmark{font-size:43.2px;color:#181a15}
.hero-heading{justify-content:center}
.coffee-drawing{width:285px}
.table-pencil{stroke:#2c2c2c}
@media(max-width:750px){.wordmark{font-size:34.2px}.coffee-drawing{width:clamp(97.5px,33vw,187.5px)}}
.traced-handwriting,.hero-bottom .handwritten{color:#151113}

.traced-handwriting,.hero-bottom .handwritten{color:#0f0c0d}
.hero-bottom .handwritten{font-size:clamp(26.4px,4.4vw,50.6px)}

.hero-bottom .handwritten{text-align:center}
.traced-handwriting{margin-inline:auto}

.hero{padding-top:80px}

.hero-bottom .handwritten{position:relative;left:50%;transform:translateX(-50%)}

/* Increase the smallest text styles by twenty percent. */
.eyebrow,.card-status,.site-footer{font-size:14.4px}
.card-top,.contact-form label{font-size:15.6px}
.writing-card p,.contact-form .button,.contact-form .contact-result{font-size:16.8px}
.fiction-summary{font-size:clamp(12px,1.2vw,16.8px)}
@media(max-width:750px){.fiction-summary{font-size:clamp(9.6px,2.82vw,15.6px)}}

.writing-card:not(.card-dark) > p{max-width:none;white-space:nowrap}

.about-copy > p:first-child{font-size:16px}

body{position:relative}
.background-brushstrokes{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:hidden;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.23}

.contact-form .button{color:#f0ede4;font-weight:700;letter-spacing:.12em}


/* Keep card tracks within the page, and let descriptions wrap naturally. */
.writing-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.writing-card,.writing-card > *{min-width:0}
.writing-card p,.writing-card:not(.card-dark) > p{max-width:none;white-space:normal}
.fiction-summary{font-size:inherit;white-space:normal}
.fiction-title-row{min-width:0}
.fiction-title-row > span{min-width:0;overflow-wrap:anywhere}
.fiction-subtitle{overflow-wrap:break-word}
@media(max-width:900px){
  .writing-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:20px}
  .writing-card{grid-row:auto;grid-template-rows:auto minmax(135px,1fr) auto auto}
}
@media(max-width:750px){
  html{scroll-padding-top:140px}
  .site-header{position:sticky;top:0;z-index:20;padding-top:14px;padding-bottom:14px}
  .header-inner{row-gap:10px}
  .site-header nav{width:100%;justify-content:space-between;gap:16px}
  .hero{padding-top:38px}
  .coffee-drawing{width:min(285px,80vw)}
  .writing-card{padding:28px 24px;min-height:350px}
}

@media(max-width:750px){
  .header-inner{row-gap:6px}
  .site-header nav{justify-content:center;gap:24px}
}

@media(max-width:750px){
  .header-inner{justify-content:center}
}

@media(max-width:750px){
  .site-header{border-bottom:3px solid var(--forest)}
}

@media(max-width:750px){
  .site-header{border-bottom-width:1px}
  .header-inner{justify-content:flex-start}
  .site-header nav{display:none}
}

.mobile-contact{display:none}
@media(max-width:750px){
  .header-inner{justify-content:space-between}
  .mobile-contact{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border:1px solid var(--forest);color:var(--forest);font-size:14px;font-weight:600;line-height:1.2}
  .mobile-contact:hover{background:var(--forest);color:var(--paper)}
}

@media(max-width:750px){
  .mobile-contact{background:var(--forest);color:var(--paper)}
  .mobile-contact:hover{background:#24362f}
}

@media(max-width:750px){
  .contact-form .button{background:var(--forest);color:var(--paper)}
  .contact-form .button:hover{background:#24362f}
}

@media(max-width:750px){
  .button > span[aria-hidden="true"],.card-top > span[aria-hidden="true"]{display:none}
  .contact-form .button{gap:0;padding-inline:23px}
}

@media(max-width:750px){
  /* Scroll the brown contact background beneath the sticky header. */
  #contact{scroll-margin-top:-140px}
}

@media(max-width:750px){
  #contact{padding-top:95px}
}