/* Margin Objects, a broadsheet with a letterpress nameplate. */
.editorial {
  --paper:#f4efdf;
  --ink:#28251e;
  --line:#807862;
  --side:5vw;
}

.folio-mast {
  margin:0 var(--side);
  text-align:center;
}

.folio-mast>div,.folio-mast>p {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--ink);
  font:10px/1.3 ui-monospace,monospace;
}

.folio-logo {
  display:block;
  font:bold clamp(58px,11.2vw,174px)/1.05 Georgia,serif;
  letter-spacing:-.085em;
  border-bottom:5px double var(--ink);
  padding:0 0 8px;
}

.folio-logo span {
  vertical-align:top;
  font:18px/2 Georgia,serif;
  letter-spacing:0;
}

.folio-mast>p {
  font-family:Georgia,serif;
  font-style:italic;
  font-size:15px;
}

.folio-mast>p span {
  font:10px ui-monospace,monospace;
}

.folio-lead {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:5vw;
  align-items:center;
  margin:24px var(--side) 40px;
}

.folio-lead h1 {
  font:500 clamp(50px,6.3vw,103px)/.9 Georgia,serif;
  letter-spacing:-.07em;
}

.folio-lead h1 em,.folio-story h2 {
  font-weight:400;
}

.standfirst {
  font:clamp(17px,1.8vw,25px)/1.34 Georgia,serif;
  max-width:32ch;
  margin:18px 0;
}

.folio-lead a {
  font-size:12px;
  border-bottom:1px solid;
  padding-bottom:4px;
}

.folio-lead img {
  width:100%;
  border:1px solid #2d221a33;
}

.folio-lead figcaption {
  font:9px ui-monospace,monospace;
  letter-spacing:.07em;
  padding-top:7px;
}

.folio-story,.folio-notes {
  margin:0 var(--side);
  padding:36px 0;
  border-top:3px double #5a564c;
}

.folio-story h2 {
  font:400 clamp(36px,4.6vw,72px)/1.05 Georgia,serif;
  letter-spacing:-.05em;
  margin-bottom:18px;
}

.folio-story>div {
  columns:2;
  column-gap:4vw;
  font:18px/1.65 Georgia,serif;
}

.folio-story p+p {
  margin-top:12px;
}

.folio-story>div p:first-child:first-letter {
  float:left;
  font:62px/.8 Georgia,serif;
  margin:6px 6px 0 0;
}

.folio-notes details {
  border-top:1px solid #aca38f;
  padding:13px 0;
}

.folio-notes summary {
  font:21px Georgia,serif;
}

.folio-notes details p {
  font:16px/1.6 Georgia,serif;
  margin:12px 0;
  max-width:57ch;
}

/* Bar Sera, the poster outside and the paper menu on the table. */
.supper {
  --paper:#702932;
  --ink:#ffe3ad;
  --line:#f3d69d66;
  --focus:#ffb96d;
}

.sera-mast,.crumb-mast {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:15px 6vw;
  border-bottom:1px solid var(--line);
  text-align:center;
}

.sera-mast>span,.crumb-mast>span {
  font:10px/1.3 ui-monospace,monospace;
  letter-spacing:.12em;
}

.sera-mast>a {
  font:700 23px Georgia,serif;
  letter-spacing:.07em;
}

.sera-front {
  padding:32px 7vw 45px;
  display:grid;
  grid-template-columns:1.12fr .8fr;
  gap:10%;
  align-items:center;
  background:repeating-linear-gradient(90deg,#fff0 0 46px,#ffffff12 46px 47px),#702932;
}

.sera-poster {
  background:#f6dca5;
  color:#853029;
  padding:14px 23px;
  transform:rotate(-2deg);
  border:6px double #8f382b;
  box-shadow:8px 9px 0 #451c2566;
  text-align:center;
}

.sera-top,.sera-poster>p {
  display:flex;
  justify-content:space-around;
  gap:5px;
  font:700 9px/1.4 ui-monospace,monospace;
  letter-spacing:.08em;
}

.sera-poster h1 {
  font:700 clamp(63px,9vw,154px)/1 Georgia,serif;
  letter-spacing:-.09em;
}

.sera-poster img {
  width:100%;
  height:clamp(150px,24vw,330px);
  object-fit:cover;
  mix-blend-mode:multiply;
}

.sera-poster>p {
  border-top:1px solid;
  padding-top:8px;
}

.sera-invite h2,.sera-menu h2 {
  font:400 clamp(48px,6.8vw,106px)/.94 Georgia,serif;
  letter-spacing:-.06em;
}

.sera-invite>p:not(.eyeline) {
  font:19px/1.5 Georgia,serif;
  margin:17px 0 25px;
  max-width:32ch;
}

.sera-invite a {
  font-size:14px;
  border-bottom:1px solid;
  padding-bottom:5px;
}

.sera-menu {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:9%;
  padding:65px 7vw;
  background:#fcf0d4;
  color:#64252a;
  --ink:#64252a;
  --paper:#fcf0d4;
}

.sera-menu h2 {
  font-size:clamp(38px,5vw,72px);
  margin-bottom:22px;
}

.menu-sub {
  font:italic 24px Georgia,serif;
  margin-bottom:10px;
}

.sera-menu dl>div {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:12px 0;
  border-top:1px dotted #a56864;
  gap:10px;
}

.sera-menu dt {
  font:21px Georgia,serif;
}

.sera-menu small {
  display:block;
  font:13px/1.4 Arial,sans-serif;
  margin-top:5px;
}

.sera-menu dd {
  white-space:nowrap;
}

/* Sunday Crumb, a flour-sack print and a perforated baker's ticket. */
.letterpress {
  --paper:#eee1bf;
  --ink:#303f4b;
  --line:#696d65;
  --side:6vw;
  background:repeating-linear-gradient(0deg,#34445105 0 1px,transparent 1px 4px),#eee1bf!important;
}

.crumb-mast>a {
  font:bold 23px/1 'Courier New',monospace;
  letter-spacing:-.1em;
}

.crumb-front {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:3%;
  align-items:center;
  padding:33px var(--side);
  border-bottom:4px double;
}

.crumb-intro {
  position:relative;
}

.crumb-intro h1,.bake-board h2 {
  font:900 clamp(54px,7.2vw,105px)/.94 Georgia,serif;
  letter-spacing:-.065em;
}

.crumb-stamp {
  width:62px;
  height:62px;
  border:3px double #a44535;
  border-radius:100%;
  display:grid;
  place-content:center;
  text-align:center;
  color:#a44535;
  font:bold 12px/1.05 'Courier New',monospace;
  transform:rotate(-15deg);
  margin-bottom:16px;
}

.crumb-intro>p:not(.eyeline) {
  font:17px/1.5 'Courier New',monospace;
  max-width:36ch;
  margin:20px 0;
}

.crumb-intro>a {
  display:inline-block;
  border:1px dashed;
  padding:9px 13px;
  font:bold 12px 'Courier New',monospace;
}

.crumb-front img {
  width:100%;
  mix-blend-mode:multiply;
}

.crumb-front figcaption {
  text-align:center;
  font:11px 'Courier New',monospace;
  letter-spacing:.12em;
}

.bake-board {
  padding:55px var(--side);
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:9%;
}

.bake-board h2 {
  font-size:clamp(38px,5vw,76px);
}

.bake-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:22px;
}

.bake-tabs button {
  font:bold 13px 'Courier New',monospace;
  border:1px solid;
  background:none;
  padding:10px;
}

.bake-tabs button[aria-pressed=true] {
  background:#303f4b;
  color:#fff4d6;
}

.bake-slip {
  border-left:4px dotted #b8a887;
  background:#f9efd6;
  padding:25px;
  box-shadow:3px 4px 0 #172b430e;
  font-family:'Courier New',monospace;
}

.bake-slip h3 {
  font:700 29px Georgia,serif;
  margin:8px 0;
}

.bake-slip p {
  font-size:14px;
  line-height:1.5;
}

.bake-slip dl {
  margin-top:16px;
}

.bake-slip dl>div {
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-top:1px dashed #a19b8a;
  padding:7px 0;
  font-size:13px;
}

/* Selvedge, a warp and weft swatch with a loom-side work surface. */
.textile {
  --paper:#efe4cf;
  --ink:#392e29;
  --line:#8c7868;
}

.textile .wordmark {
  font:italic 29px Georgia,serif;
  letter-spacing:-.075em;
}

.textile .wordmark span {
  color:#a65239;
  font-size:17px;
}

.textile .sample-mast {
  border-bottom:2px solid;
}

.loom-hero {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  min-height:550px;
}

.loom-cloth {
  --warp:#ad6147;
  --weft:#e9d5ab;
  position:relative;
  isolation:isolate;
  min-height:320px;
  background-color:#837762;
  background-image:repeating-linear-gradient(0deg,#261c2540 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#fff3 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,transparent 0 25px,var(--weft) 25px 51px,transparent 51px 90px,var(--weft) 90px 96px),repeating-linear-gradient(90deg,var(--warp) 0 54px,#eadac1 54px 64px,var(--warp) 64px 74px,#5c5049 74px 106px);
  background-blend-mode:multiply,screen,multiply,normal;
}

.loom-cloth:after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(45deg,#fff2 0 1px,transparent 1px 3px);
  mix-blend-mode:soft-light;
}

.loom-label {
  position:absolute;
  bottom:30px;
  left:24px;
  padding:12px 20px;
  background:#f1e4c9;
  transform:rotate(-4deg);
  border:1px dashed currentColor;
  outline:5px solid #f1e4c9;
  box-shadow:3px 7px 9px #15100d42;
}

.loom-label span {
  display:block;
  font:9px 'Courier New',monospace;
  letter-spacing:.08em;
}

.loom-label b {
  font:25px Georgia,serif;
}

.loom-desk {
  padding:clamp(28px,5vw,70px);
  align-self:center;
}

.loom-desk h1 {
  font:400 clamp(58px,7.7vw,116px)/.88 Georgia,serif;
  letter-spacing:-.085em;
}

.loom-desk>p:not(.eyeline) {
  font-size:15px;
  line-height:1.55;
  max-width:39ch;
  margin:18px 0;
}

.loom-desk fieldset {
  border-top:1px solid #bca88f;
  padding:7px 0 10px;
}

.loom-desk legend {
  padding-right:10px;
  font:bold 11px ui-monospace,monospace;
  text-transform:uppercase;
}

.loom-desk fieldset>div {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.loom-desk label {
  position:relative;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  padding:5px 3px;
  cursor:pointer;
}

.loom-desk input {
  position:absolute;
  opacity:0;
}

.yarn-chip {
  width:17px;
  height:17px;
  border-radius:50%;
  border:1px solid #49362870;
}

.yarn-clay {
  background:#ad6147;
}

.yarn-indigo {
  background:#424f73;
}

.yarn-oat {
  background:#e9d5ab;
}

.yarn-moss {
  background:#79805b;
}

.loom-desk input:checked+span,.loom-desk input:focus-visible+span {
  outline:2px solid #4b3b2d;
  outline-offset:2px;
}

.loom-desk .swatch-number {
  font:11px/1.4 ui-monospace,monospace!important;
}

.loom-notes {
  background:#463e36;
  color:#f3e5cf;
  padding:48px 6vw;
  display:grid;
  grid-template-columns:.6fr 1fr 1.2fr;
  gap:4%;
}

.loom-notes h2 {
  font:normal clamp(36px,4vw,62px)/1 Georgia,serif;
}

.loom-notes div p {
  line-height:1.55;
  margin-bottom:12px;
  max-width:45ch;
}

@media(max-width:680px) {
  .folio-mast>div>span:nth-child(2) {
    display:none;
  }
  .folio-lead,.sera-front,.sera-menu,.crumb-front,.bake-board,.loom-hero,.loom-notes {
    grid-template-columns:1fr;
    gap:22px;
  }
  .folio-lead {
    margin-top:24px;
  }
  .folio-story>div {
    columns:1;
  }
  .sera-front {
    padding-top:26px;
  }
  .sera-mast>span,.crumb-mast>span {
    font-size:8px;
  }
  .sera-invite h2 br {
    display:none;
  }
  .sera-menu {
    padding-block:42px;
  }
  .crumb-front figure {
    order:-1;
    max-height:180px;
    overflow:hidden;
  }
  .crumb-front figure img {
    height:164px;
    object-fit:contain;
  }
  .crumb-stamp {
    position:absolute;
    right:4px;
    top:20px;
    width:52px;
    height:52px;
  }
  .loom-cloth {
    min-height:230px;
  }
  .loom-desk h1 br {
    display:none;
  }
  .loom-desk {
    padding-top:0;
  }
  .loom-notes {
    gap:14px;
  }
}

.bread-club {display:grid;grid-template-columns:1fr 1.1fr;gap:9%;padding:36px var(--side) 52px;border-top:3px double currentColor}
.bread-club h2 {font:bold clamp(34px,5vw,65px)/1 Georgia,serif;letter-spacing:-.055em}.bread-club header p:not(.eyeline){line-height:1.6;max-width:40ch;margin:12px 0}
.bread-club label {font:600 13px ui-monospace,monospace}.bread-club select,.club-slip button {background:#f8f0d9;color:#303f4b;border:1px solid currentColor;padding:8px;font:600 13px ui-monospace,monospace}
.club-slip{padding:22px;background:#fbf1d8;border:2px dashed #9f9884}.club-slip h3{font:26px Georgia,serif;margin:8px 0}.club-slip li{padding:4px}.club-slip small{display:block;margin-top:9px}
@media(max-width:650px){.bread-club{grid-template-columns:1fr;gap:15px}}

#fabric-form {display:flex;align-items:center;gap:9px;flex-wrap:wrap}#fabric-form label{font:12px ui-monospace,monospace}
#fabric-length {max-width:72px;padding:7px;border:1px solid #8b7967;background:#fbf2e1}
#fabric-form button,.trade-list button {border:1px solid #695241;background:#533e32;color:#fff2db;padding:9px 13px}
.trade-list {border-top:2px solid;padding:32px 6vw;background:#f6ebd5}.trade-list h2{font:36px Georgia,serif}.trade-list>p:not(.eyeline){margin:12px 0}
.trade-list ul{list-style:none;padding:0;max-width:760px}.trade-list li{display:flex;align-items:center;gap:10px;border-top:1px solid #af9c83;padding:9px 0}
.trade-list li button{margin-left:auto;color:inherit;background:none}.trade-list button:disabled{opacity:.5}

.folio-contents {margin:0 var(--side);padding:17px 0;border-top:3px double}.folio-contents>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3%}.folio-contents a{padding:8px 0;border-top:1px solid}
.folio-contents b,.folio-contents span{display:block}.folio-contents b{font:23px/1.15 Georgia,serif;margin:6px 0}.folio-contents small,.folio-contents span,.byline,.feature-article figcaption{font:11px/1.5 ui-monospace,monospace}.folio-contents a:hover b,.issue-next a:hover{text-decoration:underline}
.article-mast,.issue-next{display:flex;justify-content:space-between;align-items:center;gap:15px;border-block:1px solid;padding:14px 0;margin:0 5vw}.article-mast a:first-child{font:bold 28px Georgia,serif;letter-spacing:-.06em}.article-mast a:last-child,.issue-next{font:12px ui-monospace,monospace}
.feature-article{max-width:1080px;margin:auto;padding:38px 6vw}.feature-article h1{font:400 clamp(48px,7.5vw,94px)/1 Georgia,serif;letter-spacing:-.065em}.feature-article .standfirst{max-width:50ch}.feature-article figure{margin:24px 0}.feature-article figure img{width:100%;max-height:460px;object-fit:contain;background:#e8deca}.feature-article figcaption{margin-top:8px}.article-copy{max-width:59ch;margin:26px auto;font:19px/1.65 Georgia,serif}.article-copy p+p{margin-top:16px}.issue-next{margin:20px 0}
@media(max-width:580px){.folio-contents>div{grid-template-columns:1fr}.folio-contents a{display:grid;grid-template-columns:1fr auto;align-items:center}.folio-contents small{grid-column:1/-1}.issue-next{align-items:flex-start}}

.sera-diet{display:block;margin-top:15px;font-size:13px}.sera-diet input{accent-color:#773239}