@font-face{font-family:'Vollkorn';src:url('/fonts/vollkorn.woff2') format('woff2');font-weight:400 800;font-display:swap}

:root{
  --paper:#efe7d9;
  --ink:#241a12;
  --soft:#5c4a38;
  --tan:#7d4a22;
  --hair:#cdbfa9;
  --panel:#e2d6c2;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-padding-top:4.5rem}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Vollkorn',Georgia,serif;font-size:18px;line-height:1.6;
  -webkit-text-size-adjust:100%;
}
a{color:inherit}
a:focus-visible{outline:3px solid var(--tan);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:40;text-decoration:none}
.skip:focus{left:0}

.mockup{
  max-width:none;margin:0;background:var(--ink);color:#f2ead9;
  font-size:.82rem;line-height:1.5;padding:.7rem 1.5rem;font-family:'Vollkorn',serif
}
.mockup b{color:#fff}
@media (max-width:600px){.mockup{font-size:.76rem;padding:.6rem 1.1rem}}

/* ---- top nav: a thin rule with the shop name and three links ---- */
.topnav{
  position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--hair)
}
.topnav .in{
  max-width:84rem;margin:0 auto;padding:.55rem 1.5rem;
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:baseline;justify-content:space-between
}
.topnav .shop{
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:.78rem;
  text-decoration:none;padding:.5rem 0;display:inline-block
}
.topnav ul{display:flex;flex-wrap:wrap;gap:1.5rem;list-style:none;margin:0;padding:0}
.topnav a.lnk{
  text-decoration:none;font-size:.86rem;padding:.45rem 0;display:inline-block;
  border-bottom:2px solid transparent
}
.topnav a.lnk:hover,.topnav a[aria-current="page"]{border-bottom-color:var(--tan)}

/* ---- THE SHAPE IDEA: a saddle stitch. Two offset rows of dashes, the way a
   welt is sewn. It is the one ornament on the page and it appears three times:
   under the hero, above each job, and above the footer. ---- */
.stitch{
  height:11px;margin:0;
  background:
    repeating-linear-gradient(90deg,var(--tan) 0 13px,transparent 13px 25px) 0 2px/100% 2px no-repeat,
    repeating-linear-gradient(90deg,var(--tan) 0 13px,transparent 13px 25px) 12px 7px/100% 2px no-repeat;
  opacity:.55
}

/* ---- the photograph is the hero, and it bleeds both edges ---- */
.hero{
  margin:0;padding:0;position:relative;background:var(--ink)
}
.hero img{
  display:block;width:100%;height:clamp(21rem,64vh,44rem);
  object-fit:cover;object-position:50% 46%
}
.hero figcaption{
  position:absolute;left:0;bottom:0;
  background:rgba(20,14,9,.82);color:#f0e6d4;
  font-size:.76rem;letter-spacing:.05em;padding:.5rem 1.5rem .55rem;
  max-width:46rem
}

.head{max-width:84rem;margin:0 auto;padding:2.4rem 1.5rem 0}
.head h1{
  font-size:clamp(2.1rem,1rem + 4.5vw,5rem);line-height:1.03;letter-spacing:-.022em;
  font-weight:700;margin:0;max-width:21ch
}
.head .est{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tan);
  margin:0 0 1rem;font-weight:700
}

/* the prose sits off the left edge the headline uses, and the small photograph
   sits off both of them */
.head2{
  max-width:84rem;margin:0 auto;padding:2.4rem 1.5rem 0;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.5rem 4rem;
  align-items:start
}
.head2 .tell{max-width:40rem;margin-left:8%}
.head2 .tell p{margin:0 0 1.15rem}
.head2 .tell .big{font-size:1.16rem}
.head2 .side{margin:0}
.head2 .side img{display:block;width:100%;height:auto}
.head2 .side figcaption{
  font-size:.82rem;color:var(--soft);padding-top:.55rem;border-top:1px solid var(--hair);
  margin-top:.6rem
}
@media (max-width:880px){
  .head2{grid-template-columns:1fr;gap:2rem}
  .head2 .tell{margin-left:0}
}

/* ---- full-bleed photograph bands, alternating which edge they run off ---- */
.band{
  margin:4rem 0 0;padding:0;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:0 3rem;align-items:center;background:#e7dcc7;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)
}
.band img{display:block;width:100%;height:100%;max-height:34rem;object-fit:cover}
.band figcaption{padding:2.2rem 1.5rem 2.2rem 0;max-width:34rem}
.band.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.band.flip img{grid-column:2;max-height:38rem}
.band.flip figcaption{grid-column:1;grid-row:1;padding:2.2rem 0 2.2rem 8%;justify-self:end}
.band .what{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tan);
  font-weight:700;margin:0 0 .5rem
}
.band p{margin:0 0 1rem}
.band .fine{font-size:.82rem;color:var(--soft);margin:0}
@media (max-width:900px){
  .band,.band.flip{grid-template-columns:1fr}
  .band.flip img{grid-column:1}
  .band.flip figcaption{grid-column:1;grid-row:2;padding:1.6rem 1.5rem;justify-self:stretch}
  .band figcaption{padding:1.6rem 1.5rem}
}

/* ---- three from the window, deliberately unequal ---- */
.gal{
  max-width:84rem;margin:3.5rem auto 0;padding:0 1.5rem;
  display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;align-items:end
}
.gal figure{margin:0}
.gal img{display:block;width:100%;height:auto}
.gal figcaption{
  font-size:.82rem;color:var(--soft);padding-top:.55rem;margin-top:.6rem;
  border-top:1px solid var(--hair)
}
.gal .g1{grid-column:1/span 5}
.gal .g2{grid-column:6/span 3}
.gal .g3{grid-column:10/span 3}
@media (max-width:820px){
  .gal{grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start}
  .gal .g1{grid-column:1/-1}
  .gal .g2{grid-column:1/span 1}
  .gal .g3{grid-column:2/span 1}
}

/* ---- prose blocks, inset from the gallery width ---- */
.prose{max-width:84rem;margin:0 auto;padding:0 1.5rem}
.prose .col{max-width:34rem}
.prose p{margin:0 0 1.15rem}
.prose h2{
  font-size:1.45rem;line-height:1.2;margin:3.4rem 0 1rem;font-weight:700;letter-spacing:-.01em
}
.prose .big{font-size:1.16rem}
a.ring{
  font-weight:700;color:var(--tan);text-decoration:none;
  border-bottom:2px solid var(--tan);white-space:nowrap;padding-bottom:1px
}
a.ring:hover{background:#e7dbc6}

/* ---- the worked jobs: text, staggered, each opened by a stitch ---- */
.works{max-width:84rem;margin:4rem auto 0;padding:0 1.5rem}
.works h2{font-size:1.45rem;margin:0;font-weight:700;letter-spacing:-.01em}
.works .lede{max-width:44rem;color:var(--soft);font-size:.95rem;margin:.7rem 0 0}
.work{padding:2.4rem 0 0;margin-top:2.4rem;border-top:0;position:relative}
.work::before{
  content:"";position:absolute;left:0;right:0;top:0;height:11px;
  background:
    repeating-linear-gradient(90deg,var(--tan) 0 13px,transparent 13px 25px) 0 2px/100% 2px no-repeat,
    repeating-linear-gradient(90deg,var(--tan) 0 13px,transparent 13px 25px) 12px 7px/100% 2px no-repeat;
  opacity:.45
}
.work.wide{max-width:52rem}
.work.narrow{max-width:44rem;margin-left:auto;margin-right:6%}
.work.full{max-width:60rem;margin-left:14%}
.work h3{font-size:1.24rem;margin:0 0 .5rem;font-weight:700;line-height:1.25}
.work p{margin:0 0 .85rem;max-width:48ch}
.work .what{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tan);
  font-weight:700;margin:0 0 .35rem
}
.work .took{
  font-size:.85rem;color:var(--soft);border-top:1px solid var(--hair);padding-top:.55rem;
  margin:1rem 0 0;max-width:48ch
}
@media (max-width:820px){
  .work.narrow,.work.full{margin-left:0;margin-right:0}
}

/* ---- prices, as a written list not a table ---- */
.rates{max-width:44rem;margin:0 0 0 6%;padding:0;list-style:none}
.rates li{
  padding:.7rem 0;border-bottom:1px solid var(--hair);
  display:flex;gap:1.5rem;justify-content:space-between;align-items:baseline
}
.rates b{font-weight:700}
.rates .fig{white-space:nowrap;font-weight:700;color:var(--tan)}
.rates .as{display:block;font-size:.87rem;color:var(--soft);font-weight:400;max-width:42ch}

.close{
  margin-top:4rem;border-top:3px solid var(--ink);background:#e7dcc7
}
.close .in{max-width:84rem;margin:0 auto;padding:2.4rem 1.5rem}
.close .col{max-width:36rem}
.close h2{margin-top:0}

footer{max-width:84rem;margin:4rem auto 0;padding:0 1.5rem 4rem}
footer .stitch{margin:0 0 1.6rem}
footer p{font-size:.85rem;color:var(--soft);max-width:80ch;margin:0 0 .7rem}

@media (max-width:600px){
  body{font-size:17px}
  .rates{margin-left:0}
}

/* ===== interior A: the yes / no ledger ===== */
.ledgerpage{max-width:66rem;margin:0 auto;padding:2.6rem 1.5rem 4rem}
.ledgerpage h1{
  font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);line-height:1.12;margin:0 0 .9rem;
  font-weight:700;letter-spacing:-.015em;max-width:18ch
}
.ledgerpage .intro{max-width:36rem;font-size:1.1rem;margin:0 0 2.6rem}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:0 3rem}
.two section{border-top:3px solid var(--ink);padding-top:1rem}
.two h2{
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 1rem;font-weight:700
}
.two.no h2{color:var(--tan)}
.two ul{list-style:none;margin:0;padding:0}
.two li{padding:.85rem 0;border-bottom:1px solid var(--hair)}
.two li b{display:block;font-weight:700}
.two li span{display:block;font-size:.9rem;color:var(--soft);line-height:1.5}
.after{max-width:36rem;margin:3rem 0 0}
.after p{margin:0 0 1.1rem}

/* ===== interior B: the turnaround page ===== */
.turn{max-width:40rem;margin:0 auto;padding:2.6rem 1.5rem 4rem}
.turn h1{
  font-size:clamp(1.8rem,1.3rem + 2vw,2.5rem);line-height:1.12;margin:0 0 1.2rem;
  font-weight:700;letter-spacing:-.015em
}
.turn p{margin:0 0 1.2rem}
.turn h2{font-size:1.2rem;margin:2.6rem 0 .6rem;font-weight:700}
.turn .clock{
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  margin:2.4rem 0;padding:.4rem 0
}
.turn .clock div{
  display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  padding:.7rem 0;border-bottom:1px solid var(--hair)
}
.turn .clock div:last-child{border-bottom:0}
.turn .clock dt{margin:0;font-weight:700}
.turn .clock dd{margin:0;color:var(--tan);font-weight:700;white-space:nowrap}
.turn .fine{font-size:.86rem;color:var(--soft)}
.two ul.quick li{padding:.55rem 0;font-weight:700}
.two p.why{margin:1.2rem 0 0;font-size:.92rem;color:var(--soft);line-height:1.55}

footer a{display:inline-block;padding:.5rem 0}
.ledgerpage .after a.ring,.turn a.ring{padding-block:.35rem}


/* =======================================================================
   MOTION, added 2026-08-02 during the fleet repair.
   The fleet measured 0 to 5 transitioned elements against a floor of 20 in
   references/motion.md, which is the largest part of what reads as "there is
   no CSS on this page". Tokens below are this site's own.
   ======================================================================= */

a, button, summary,
li, dt, dd, tr, th, td,
figure, .narrow {
  transition: color .16s ease, background-color .18s ease,
              border-color .18s ease, opacity .18s ease,
              transform .22s cubic-bezier(.2,.7,.3,1);
}

a:hover { color: var(--tan); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--tan); outline-offset: 3px;
}

/* rows respond, because a price row you are reading should acknowledge you */
li:hover, dt:hover, dd:hover, tbody tr:hover { background: rgba(36,26,18,.055); }
.narrow:hover { border-color: var(--tan); }

figure img { transition: transform .3s cubic-bezier(.2,.7,.3,1); }
figure:hover img { transform: scale(1.015); }

/* reveals. The hidden state exists ONLY under .motion, which an inline head
   script adds when reduced motion is not requested, so no JS means the plain
   document rather than an empty page. */
.motion section, .motion figure, .motion article {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}
.motion section.seen, .motion figure.seen, .motion article.seen {
  opacity: 1; transform: none;
}

/* PEAK: the rule under the opening block draws itself, left to right, once. */
.motion h1 { position: relative; }
.motion h1::after {
  content: ""; position: absolute; left: 0; bottom: -.28em; height: 3px; width: 100%;
  background: var(--tan); transform-origin: left center;
  animation: peak-rule 1.05s cubic-bezier(.16,.8,.3,1) .2s both;
}
@keyframes peak-rule { from { transform: scaleX(0) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
  .motion section, .motion figure, .motion article { opacity: 1; transform: none; }
}

/* the hero is the first thing on the page; it must never start invisible */
.motion .hero{opacity:1;transform:none}