/* Texas Foundry — "the workshop and the letter". Fonts self-hosted (OFL): Fraunces, Libre Franklin. */
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2190,U+2192}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-italic.woff2) format("woff2");font-weight:300 500;font-style:italic;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2190,U+2192}
@font-face{font-family:"Libre Franklin";src:url(/fonts/franklin.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2190,U+2192}

:root{
  /* sampled from the anvil photograph */
  --soot:#1b120c; --soot-2:#251810; --leather:#3a271b; --bronze:#74513a; --bronze-lt:#c9a37c;
  --paper:#f2eadc; --paper-2:#e9dfcd; --ink:#21170f; --ink-2:#4a3a2c; --rule:#cdbda3;
  --ember:#a8441b; --ember-hi:#c2541f; --ivory:#f3e8d6; --ivory-2:#cdbba2;
  --serif:"Fraunces",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --margin:12.5rem; --gap:clamp(1.25rem,3vw,3.5rem); --pad:clamp(1.25rem,5vw,4rem);
  --max:78rem; --measure:40rem; --step:clamp(0rem,5vw,5.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;text-wrap:balance;font-optical-sizing:auto}
h1 em,h2 em{font-style:italic;font-weight:350}
p{margin:0 0 1em;text-wrap:pretty}
strong{font-weight:600}
cite{font-family:var(--serif);font-style:italic;font-size:1.05em}
:focus-visible{outline:3px solid var(--ember-hi);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;z-index:50;background:var(--ink);color:var(--paper);padding:.6rem 1rem}
.skip:focus{left:1rem;top:1rem}

/* preview banner: plain, honest, quiet */
.preview-banner{background:var(--paper-2);color:var(--ink-2);font-size:.82rem;line-height:1.4;padding:.5rem var(--pad);text-align:center;border-bottom:1px solid var(--rule)}
.preview-banner strong{color:var(--ink)}
.top-dark .preview-banner{background:#120c08;color:var(--ivory-2);border-color:#2e2016}
.top-dark .preview-banner strong{color:var(--ivory)}

/* header */
header.site{position:relative;z-index:10}
.bar{max-width:var(--max);margin:0 auto;padding:1.4rem var(--pad);display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem}
.wordmark em{font-style:italic;font-weight:400}
.wordmark{font-family:var(--serif);font-size:1.45rem;font-weight:450;letter-spacing:-.005em;text-decoration:none;font-variation-settings:"opsz" 48;white-space:nowrap}
nav.primary ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(1rem,2.4vw,2.2rem);align-items:baseline}
nav.primary a{text-decoration:none;font-size:.97rem;padding:.3rem 0;border-bottom:1px solid transparent}
nav.primary a:hover,nav.primary a[aria-current="page"]{border-bottom-color:currentColor}
nav.primary .nav-talk a{font-family:var(--serif);font-style:italic;font-size:1.05rem}
.menu-toggle{display:none;font:500 .95rem var(--sans);background:none;border:1px solid currentColor;color:inherit;padding:.45rem .9rem;border-radius:2px;cursor:pointer}
.menu-toggle .mt-close{display:none}
.top-dark header.site{position:absolute;left:0;right:0;color:var(--ivory)}
.top-dark .preview-banner+header.site{top:auto}

/* the entrance: one picture */
.entrance{position:relative;background:var(--soot);color:var(--ivory);min-height:min(100svh,62rem);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.entrance-img{position:absolute;inset:0;z-index:-1}
.entrance-img img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;animation:settle 2.4s cubic-bezier(.2,.7,.2,1) both}
.entrance-img::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(18,12,8,.72) 0%,rgba(18,12,8,0) 22%),
  linear-gradient(90deg,rgba(18,12,8,.7) 0%,rgba(18,12,8,.35) 38%,rgba(18,12,8,0) 60%),
  linear-gradient(0deg,rgba(18,12,8,.98) 0%,rgba(18,12,8,.9) 24%,rgba(18,12,8,.5) 46%,rgba(18,12,8,0) 66%)}
@keyframes settle{from{transform:scale(1.045);filter:brightness(.8)}to{transform:none;filter:none}}
.entrance-text{max-width:var(--max);width:100%;margin:0 auto;padding:0 var(--pad) clamp(2.5rem,6vh,4.5rem);display:grid;grid-template-columns:minmax(0,46rem) minmax(0,1fr);column-gap:var(--gap)}
.entrance-text>*{grid-column:1}
.kicker{font-family:var(--serif);font-style:italic;color:#e3c39e;font-size:1.12rem;margin-bottom:1.1rem;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.entrance h1{font-size:clamp(3.3rem,7.6vw,7rem);line-height:.95;letter-spacing:-.025em;font-weight:360;margin-bottom:1.6rem;font-variation-settings:"opsz" 144}
.entrance h1 em{display:block;color:#f7d9b4}
.lede{font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.55;max-width:36em}
.entrance .lede{color:#e9dcc8}
.entrance-link{margin:1.4rem 0 0}
.entrance-cap{position:absolute;right:var(--pad);bottom:1rem;margin:0;font-size:.72rem;color:#a8957e;max-width:22rem;text-align:right;line-height:1.35}

/* quiet links + the one ember action */
.quiet-link{font-family:var(--serif);font-style:italic;font-size:1.12rem;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.08em}
.quiet-link::after{content:" →";font-style:normal;font-family:var(--sans);font-size:.9em}
.quiet-link:hover{color:var(--ember)}
.close .quiet-link:hover,.entrance .quiet-link:hover{color:#f7c48f}
.ember{display:inline-block;background:var(--ember);color:#fff8ef;font:500 1.05rem/1 var(--sans);letter-spacing:.01em;padding:1.1rem 1.7rem;border:0;border-radius:3px;text-decoration:none;cursor:pointer;transition:background .2s}
.ember:hover{background:var(--ember-hi)}
.actions{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center}

/* the reading register */
.paper{background:var(--paper);padding:clamp(4rem,10vw,8rem) 0}
.paper.shade{background:var(--paper-2)}
.paper.rule-top{padding-top:0}
.paper.rule-top>.row:first-child{position:relative;padding-top:clamp(3.5rem,8vw,6rem)}
.paper.rule-top>.row:first-child::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);border-top:1px solid var(--rule)}
.row{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:var(--margin) minmax(0,1fr);column-gap:var(--gap)}
.row+.row{margin-top:clamp(2.5rem,5vw,4rem)}
.note{grid-column:1;margin:.55rem 0 0;font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.35;color:var(--bronze)}
.main{grid-column:2;max-width:var(--measure)}
.main.narrow{max-width:36rem}
.paper h1{font-size:clamp(2.8rem,6.6vw,5.8rem);line-height:.98;letter-spacing:-.022em;font-weight:360;margin-bottom:1.6rem;font-variation-settings:"opsz" 144}
.paper h1 em{display:block;color:var(--leather)}
.opening{padding-top:clamp(3rem,7vw,6rem)}
h2{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.02;letter-spacing:-.018em;margin-bottom:1.1rem;font-weight:380}
h2.h-small{font-size:clamp(1.7rem,3vw,2.4rem)}
.intro{font-size:1.15rem;color:var(--ink-2);max-width:34em}
.head{margin-bottom:clamp(2.5rem,5vw,4rem)}

/* Discover / Develop / Serve: a sequence, not three boxes */
.sequence{list-style:none;margin:0 auto;padding:0 var(--pad);max-width:var(--max)}
.step{display:grid;grid-template-columns:13rem minmax(0,32rem);column-gap:var(--gap);align-items:baseline;border-top:1px solid var(--rule);padding:1.8rem 0 1.6rem;margin-left:calc(var(--margin) + var(--gap))}
.step:last-child{border-bottom:1px solid var(--rule)}
.step.s2{margin-left:calc(var(--margin) + var(--gap) + var(--step))}
.step.s3{margin-left:calc(var(--margin) + var(--gap) + var(--step)*2)}
.step h3{font-size:clamp(2rem,3.6vw,3rem);font-style:italic;font-weight:340;line-height:1;letter-spacing:-.015em;color:var(--leather)}
.step p{margin:0;max-width:34em}
.step strong{font-weight:600;color:var(--ink)}

.gifts-row{margin-top:clamp(4rem,8vw,6.5rem)}
.gifts{list-style:none;margin:1.6rem 0 0;padding:0;font-family:var(--serif);font-style:italic;font-weight:330;font-size:clamp(1.6rem,3.3vw,2.6rem);line-height:1.25;color:var(--leather);letter-spacing:-.01em}
.gifts li{display:inline}
.gifts li+li{text-transform:lowercase}
.gifts li::after{content:", "}
.gifts li:last-child::after{content:"."}

/* the letter */
.letter{grid-column:2;max-width:35rem;font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.38rem);line-height:1.6;font-variation-settings:"opsz" 18;font-weight:380}
.letter h2{font-size:clamp(2.1rem,4vw,3.2rem);margin-bottom:1.4rem}
.letter h3{font-style:italic;font-size:1.5rem;font-weight:380;margin:2.2rem 0 .6rem;color:var(--leather)}
.letter p{margin-bottom:1.1em}
.letter .sign{margin-top:2rem}
.letter-band{padding:clamp(5rem,12vw,9rem) 0}
.triad{font-style:italic;color:var(--leather)}

/* figures */
figure{margin:0}
figcaption{font-size:.8rem;line-height:1.4;color:var(--ink-2);margin-top:.7rem}
.strip{max-width:var(--max);margin:clamp(3rem,6vw,5rem) auto clamp(3rem,6vw,5rem);padding:0 var(--pad)}
.strip img{width:100%;aspect-ratio:1536/464;object-fit:cover;border-radius:2px}
.strip.tall img{aspect-ratio:3/2;max-height:44rem}
.strip figcaption{margin-left:calc(var(--margin) + var(--gap))}
.opening .strip{margin-bottom:0}
.opening+.paper{padding-top:clamp(3.5rem,8vw,6rem)}

.statements{align-items:baseline}
.row.first-statement{margin-top:clamp(3.5rem,7vw,5.5rem)}
.statement{grid-column:2;max-width:34rem;font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.3;font-weight:360;letter-spacing:-.008em;margin:0}

/* God. Family. Work. */
.order-wrap{display:grid;grid-template-columns:minmax(0,auto) minmax(0,22rem);gap:var(--gap);align-items:end;max-width:none}
.order{font-size:clamp(3rem,7vw,6rem);line-height:.98;margin:0;letter-spacing:-.025em;font-weight:360;font-variation-settings:"opsz" 144}
.order span{display:block}
.order span:nth-child(2){padding-left:.5em}
.order span:nth-child(3){padding-left:1em;font-style:italic;color:var(--leather)}
.order-lead{font-family:var(--serif);font-size:1.3rem;line-height:1.4}

/* pathways */
.notice{border:1px solid var(--ink);padding:1.4rem 1.6rem;max-width:38rem;background:var(--paper)}
.notice-title{font-family:var(--serif);font-style:italic;font-size:1.45rem;margin:0 0 .4rem;color:var(--ink)}
.notice p:last-child{margin:0}
.first-path{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:var(--gap);max-width:none;align-items:start}
.first-path h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
.status{font-family:var(--serif);font-style:italic;color:var(--bronze);font-size:1.05rem}
.inset img{width:100%;border-radius:2px}
.ledger{margin:0;max-width:52rem}
.ledger>div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;gap:.3rem var(--gap);padding:1.3rem 0;border-top:1px solid var(--rule);align-items:baseline}
.ledger>div:last-child{border-bottom:1px solid var(--rule)}
.ledger dt{font-family:var(--serif);font-size:1.45rem;line-height:1.2;font-weight:400}
.ledger dd{margin:0}
.ledger dd.status{font-size:.98rem;white-space:nowrap}
.roles>div{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
.roles dt{font-style:italic;color:var(--leather);font-size:1.7rem}
.path{list-style:none;counter-reset:p;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);max-width:none}
.path li{counter-increment:p;border-top:1px solid var(--ink);padding-top:1rem}
.path li::before{content:counter(p);display:block;font-family:var(--serif);font-size:2.4rem;line-height:1;font-weight:300;color:var(--bronze);margin-bottom:.6rem;font-variant-numeric:oldstyle-nums}
.path strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.4rem;margin-bottom:.25rem}

/* the close: back at the fire, one action */
.close{background:var(--soot);color:var(--ivory);padding:clamp(4.5rem,11vw,8.5rem) 0;}
.close .note{color:var(--bronze-lt)}
.close h2{color:var(--ivory);font-size:clamp(2.3rem,5.2vw,4.4rem)}
.close h2 em{color:#f7d9b4}
.close p{color:#e2d4bf}
.aside-note{margin-top:clamp(3rem,6vw,4.5rem);padding-top:1.6rem;border-top:1px solid #4a3527;max-width:36rem}
.aside-note h3{font-size:1.4rem;font-style:italic;margin-bottom:.5rem;color:var(--ivory)}
.aside-note p{font-size:.98rem;color:#cdbca4}

/* form, like a good paper form */
.convo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:calc(var(--gap)*1.3);max-width:none}
.form-note{font-size:.88rem;color:#b9a68c}
.convo .field{margin-bottom:1.4rem}
.convo label{display:block;font-family:var(--serif);font-style:italic;font-size:1.08rem;margin-bottom:.3rem;color:var(--ivory)}
.convo input,.convo select,.convo textarea{width:100%;font:400 1.05rem/1.4 var(--sans);color:var(--ivory);background:rgba(243,232,214,.04);border:0;border-bottom:1px solid #8a6d55;border-radius:0;padding:.6rem .2rem}
.convo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#cdbba2 50%),linear-gradient(135deg,#cdbba2 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.convo select option{color:#21170f}
.convo textarea{min-height:7rem;resize:vertical}
.convo input:focus,.convo select:focus,.convo textarea:focus{outline:none;border-bottom:2px solid var(--ember-hi);background:rgba(243,232,214,.08)}
.form-status{margin-top:1rem;padding:1rem 1.2rem;border-left:3px solid var(--ember-hi);background:rgba(243,232,214,.06);color:var(--ivory)}

/* footer */
footer.site{background:var(--soot);color:var(--ivory-2);border-top:1px solid #34251a}
.foot{max-width:var(--max);margin:0 auto;padding:2.6rem var(--pad) 2rem;display:grid;grid-template-columns:var(--margin) 1fr;column-gap:var(--gap);row-gap:1.2rem}
.foot .wordmark{color:var(--ivory);font-size:1.3rem}
.tagline{font-family:var(--serif);font-style:italic;margin:.2rem 0 0;color:var(--bronze-lt);font-size:.98rem}
.foot nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;justify-content:flex-end}
.foot nav a{text-decoration:none;font-size:.92rem}
.foot nav a:hover{text-decoration:underline}
.fine{grid-column:1/-1;font-size:.78rem;color:#9a8670;margin:0;border-top:1px solid #34251a;padding-top:1.2rem}

/* tablet */
@media (max-width:1000px){
  :root{--margin:9rem}
  .order-wrap{grid-template-columns:1fr}
  .first-path{grid-template-columns:1fr}
  .inset{max-width:30rem}
  .path{grid-template-columns:repeat(2,minmax(0,1fr))}
  .convo-grid{grid-template-columns:1fr}
}
/* phone */
@media (max-width:760px){
  :root{--step:1.1rem}
  body{font-size:1.02rem}
  .bar{padding:1rem var(--pad);align-items:center;flex-wrap:wrap}
  .menu-toggle{display:inline-block}
  .js nav.primary{display:none;width:100%}
  .js nav.primary.open{display:block}
  nav.primary ul{flex-direction:column;align-items:stretch;gap:0;padding:.6rem 0 .4rem}
  nav.primary li{border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
  nav.primary a{display:block;padding:.85rem 0;font-size:1.1rem;border:0}
  .menu-open .mt-open{display:none}.menu-open .mt-close{display:inline}
  .top-dark header.site.menu-open{background:rgba(18,12,8,.96)}
  .row,.foot{grid-template-columns:1fr}
  .note,.main,.letter,.statement{grid-column:1}
  .note{margin:0 0 .7rem}
  .note:empty{display:none}
  .sequence{padding:0 var(--pad)}
  .step,.step.s2,.step.s3{grid-template-columns:1fr;margin-left:0;row-gap:.6rem}
  .step.s2{padding-left:var(--step)}.step.s3{padding-left:calc(var(--step)*2)}
  .entrance{min-height:auto;display:block}
  .entrance-img{position:relative;height:62svh;min-height:22rem}
  .entrance-img img{object-position:46% 40%}
  .entrance-img::after{background:linear-gradient(180deg,rgba(18,12,8,.7) 0%,rgba(18,12,8,0) 26%),linear-gradient(0deg,rgba(27,18,12,1) 0%,rgba(27,18,12,0) 40%)}
  .entrance-text{display:block;margin-top:-5.5rem;position:relative}
  .entrance-cap{position:static;text-align:left;padding:0 var(--pad) 1.4rem;max-width:none}
  .strip figcaption{margin-left:0}
  .strip.tall img{aspect-ratio:4/3}
  .ledger>div,.roles>div{grid-template-columns:1fr}
  .path{grid-template-columns:1fr}
  .foot nav ul{justify-content:flex-start}
  .order span:nth-child(2){padding-left:.4em}.order span:nth-child(3){padding-left:.8em}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (forced-colors:active){.ember{border:2px solid ButtonText}}
