/* V12 sub pages: the same system as the home page, with the motion held back. Loads after style.css.
   Three templates share this file: a service page (sheetfed-printing.html), an industry page
   (restaurant-printing.html) and a product page (brochures.html). Each is meant to be copied for its siblings.
   The only motion on a sub page: the hero photograph prints itself in once on load (a dot mask that grows until the
   dots merge, CSS only, added by sub.js so a no-JS or reduced-motion visitor gets the still image), the quiet
   one-time reveals from the home page, the sticky figure beside a product list that cross-fades as the list scrolls,
   and a plant clip that plays only while on screen. No pinned stages, no 3D, no page-wide timeline. */

/* ---------- breadcrumb ---------- */
.crumbs { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--n5); }
.crumbs a { text-decoration: none; transition: color .2s; }
.crumbs a:hover { color: var(--ink); }
.crumbs li + li::before { content: "/"; margin: 0 .7em; color: var(--n4); }
.crumbs li[aria-current] { color: var(--ink); }

/* ---------- page hero: copy beside the photograph, never on it ---------- */
.ph { padding-block: clamp(24px, 3.6vw, 52px) clamp(32px, 4.4vw, 64px); }
.ph-grid { display: grid; gap: 28px; align-items: center; }
.ph h1 { font-size: clamp(34px, 3.9vw, 58px); line-height: 1.04; letter-spacing: -0.02em; max-width: 15ch; }
.ph-a { margin-top: 18px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.5; max-width: 34rem; text-wrap: pretty; }
.ph-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 26px; margin-top: 26px; }
.ph-cta .link-arrow { padding: 4px 0; }
.ph-fig { margin: 0; border-radius: 10px; overflow: hidden; background: var(--n1); aspect-ratio: 4 / 3; }
.ph-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 801px) {
  .ph-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); }
  .ph-grid.is-even { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}
@media (max-width: 800px) { .ph-grid { grid-template-areas: "fig" "copy"; } .ph-fig { grid-area: fig; aspect-ratio: 4 / 3; } .ph-copy { grid-area: copy; } }

/* the print-in: a dot screen over the photograph whose dots grow until they merge. Registered so the length animates.
   sub.js adds .printin on load and removes it when the animation ends, so the mask never stays on the image. */
@property --dot { syntax: "<length>"; inherits: false; initial-value: 0px; }
.printin { --dot: 0px;
  -webkit-mask-image: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + .7px)); mask-image: radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + .7px));
  -webkit-mask-size: 12px 12px; mask-size: 12px 12px; -webkit-mask-position: center; mask-position: center;
  animation: lc-printin 1.6s cubic-bezier(.22, .61, .36, 1) forwards; }
@keyframes lc-printin { from { --dot: 0.6px; transform: scale(1.04); } to { --dot: 9.5px; transform: scale(1); } }
html.rm .printin { animation: none; -webkit-mask-image: none; mask-image: none; }

/* ---------- the facts strip, page specific ---------- */
.facts-strip.is-sub { border-top: 0; }

/* ---------- plain sections ---------- */
.sec { padding-block: var(--sec-pad); }
.sec-n1 { background: var(--n1); }
.sec-n2 { background: var(--n2); }
.sec + .sec { border-top: var(--hair); }
/* two same-colour bands never stack their padding (her flag on the home page) */
.sec-n1 + .sec-n1, .sec-n2 + .sec-n2, .sec:not([class*="sec-n"]) + .sec:not([class*="sec-n"]) { padding-top: clamp(20px, 2.4vw, 32px); }

/* ---------- a product list beside a sticky figure ---------- */
.plist-wrap { display: grid; gap: 28px; }
.plist { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.plist li { border-bottom: var(--hair); }
.plist a, .plist .plist-static { display: grid; grid-template-columns: minmax(0, 1fr) 22px; grid-template-rows: auto auto; gap: 4px 16px; padding: 16px 0; text-decoration: none; align-items: center; }
.plist h3 { font-weight: 300; font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -0.015em; line-height: 1.08; transition: color .2s; }
.plist p { grid-column: 1; font-size: 15px; line-height: 1.45; color: var(--n6); max-width: 36rem; text-wrap: pretty; }
.plist svg { grid-column: 2; grid-row: 1 / 3; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .45; transition: transform .35s var(--ease), opacity .35s; }
@media (hover: hover) { .plist a:hover svg { transform: translateX(6px); opacity: 1; } .plist a:hover h3 { color: var(--magenta); } }
.plist-fig { margin: 0; }
/* contain, never cover: a menu photographed landscape was being cut off inside a portrait box (her flag).
   Nothing on these pages crops a printed piece. */
.plist-fig .fig-box { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--paper); }
.plist-fig .fig-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .9s var(--ease); }
.plist-fig .fig-box img.is-on { opacity: 1; }
@media (min-width: 801px) {
  .plist-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
  /* a list with no figure beside it takes the full measure rather than leaving a hole */
  .plist-wrap.is-solo { grid-template-columns: minmax(0, 1fr); }
  .plist-fig { position: sticky; top: calc(var(--nav-h) + 24px); }
}
/* phones: the photograph comes before the list (her preference, images before words) */
@media (max-width: 800px) { .plist-wrap { grid-template-areas: "fig" "list"; } .plist-fig { grid-area: fig; } .plist { grid-area: list; } .plist-fig .fig-box { aspect-ratio: 4 / 3; } .plist h3 { font-size: 24px; } }

/* ---------- two and three column spec lists ---------- */
.cols2 { display: grid; gap: 28px; }
.cols3 { display: grid; gap: 28px; }
@media (min-width: 801px) { .cols2 { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); } .cols3 { grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); } }
.spec h3 { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--n5); margin-bottom: 10px; }
.spec ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n4); }
.spec li { padding: 10px 0; border-bottom: 1px solid var(--n4); font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.spec li b { font-weight: 600; }
.spec .link-arrow { margin-top: 18px; }

/* ---------- a chapter with a plant clip or a photograph beside its list ---------- */
.side-grid { display: grid; gap: 28px; }
@media (min-width: 801px) { .side-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; } .side-grid.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.side-grid .ch-head { margin-bottom: 0; }
/* a spec list sitting beside a chapter head starts level with it: the head's own rule is 1.5px and its
   padding 18px, so the list's first word lines up with the eyebrow (her flag on the brochures page) */
/* not inside a two-column list (.cols2): there both columns start level (her flag on every service page, 2026-10-01) */
@media (min-width: 801px) { .side-grid > .spec, .side-grid > div:not(.cols2) > .spec:first-child { padding-top: 19.5px; } }
/* 16:9 because every clip we hold is 16:9: a 16:10 box with cover was trimming 10% off every video */
.clip { margin: 0; border-radius: 8px; overflow: hidden; background: var(--n3); aspect-ratio: 16 / 9; }
.clip video, .clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip-cap { margin-top: 10px; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--n5); max-width: none; }
.side-fig { margin: 0; border-radius: 8px; overflow: hidden; background: var(--n1); aspect-ratio: 4 / 3; }
.side-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- the work strip: the home montage at four columns, so each piece reads larger ---------- */
.montage.is-4 { columns: 2; }
@media (min-width: 601px)  { .montage.is-4 { columns: 3; } }
@media (min-width: 1001px) { .montage.is-4 { columns: 4; column-gap: 10px; } .montage.is-4 li { margin-bottom: 10px; } }
/* three-up montage, for a section that has three real pieces and will not be padded with stock */
.montage.is-3 { columns: 2; }
@media (min-width: 1001px) { .montage.is-3 { columns: 3; column-gap: 10px; } .montage.is-3 li { margin-bottom: 10px; } }

/* ---------- related links: the home page's slash statement, at a smaller size ---------- */
.rel { padding-block: clamp(28px, 3.5vw, 48px); border-top: var(--hair); }
.rel .eyebrow { margin-bottom: 14px; }
.ind-lines.is-small { font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -0.02em; line-height: 1.1; }
.ind-lines.is-small .ind { margin-bottom: 10px; max-width: none; }
.ind-lines.is-small .ind + .ind { margin-left: .8em; }
.ind-lines.is-small .ind .sl { left: -.5em; }
@media (max-width: 800px) { .ind-lines.is-small .ind { max-width: none; } }

/* ---------- one quote ---------- */
.quotes.is-one { grid-template-columns: 1fr; max-width: 44rem; }
.quotes.is-one blockquote p { max-width: 40ch; font-size: clamp(21px, 1.9vw, 26px); }

/* ---------- the ask, on a sub page: the same doors, a page-specific line ---------- */
.doors.is-sub h2 { max-width: 16em; }

/* ---------- a product grid: one real piece per job type, the pattern the live site uses ----------
   object-fit is contain on a paper tile, so a piece is shown whole at its own shape and nothing is cropped.
   A job type we have no photograph of yet gets a type-only tile rather than a stock mockup. */
.pgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 701px)  { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; } }
@media (min-width: 1101px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* three cards fill the row instead of leaving an empty fourth column (Who We Are family, 2026-10-01) */
@media (min-width: 701px) { .pgrid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pgrid a { display: block; text-decoration: none; }
.pgrid .pg-fig { margin: 0 0 14px; border-radius: 8px; overflow: hidden; background: var(--paper); border: var(--hair); aspect-ratio: 4 / 3; }
.pgrid .pg-fig img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .6s var(--ease); }
/* a job type we have no photograph of yet: the house mark, quiet, instead of a stock mockup */
.pgrid h3 { font-weight: 400; font-size: clamp(19px, 1.5vw, 23px); letter-spacing: -0.015em; line-height: 1.12; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; transition: color .2s; }
.pgrid h3 svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .4; transition: transform .35s var(--ease), opacity .35s; align-self: center; }
.pgrid p { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--n6); max-width: none; text-wrap: pretty; }
@media (hover: hover) {
  .pgrid a:hover h3 { color: var(--magenta); }
  .pgrid a:hover h3 svg { transform: translateX(5px); opacity: 1; }
  .pgrid a:hover .pg-fig img { transform: scale(1.04); }
}

/* ---------- her CMYK ampersand, set in place of the & in a heading ---------- */
img.amp { display: inline-block; height: .74em; width: auto; vertical-align: -.035em; margin-inline: .04em; }
.ch-q img.amp, h1 img.amp { height: .78em; vertical-align: -.055em; }

/* ---------- the then and now pair, on Who We Are ----------
   The only two captions left on the site: the 1900 / Present seam, which she approved and worded herself.
   Both photographs keep their own shape; neither is cropped. */
@media (min-width: 701px) { 
/* ---------- running prose under a chapter head, for the one-off pages ---------- */
.story-body { display: grid; gap: 16px; max-width: 42rem; }
.story-body p { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--n6); max-width: none; text-wrap: pretty; }
.story-body p b { color: var(--ink); font-weight: 600; }

  border: 1px solid var(--n4); border-radius: 6px; padding: 11px 13px; width: 100%; transition: border-color .2s; }

/* the Present half of the 1900 seam, where the 1900 photograph is the page hero */
.now-fig { margin: 0 0 clamp(26px, 3.2vw, 44px); max-width: 46rem; }
.now-fig img { width: 100%; height: auto; display: block; border-radius: 10px; background: var(--n1); }

/* ---------- contact: the form leads, the details sit beside it ---------- */
.contact-grid { display: grid; gap: 34px; }
@media (min-width: 801px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start; } }
.contact-aside { display: grid; gap: 28px; }
@media (min-width: 801px) { .contact-aside { padding-top: 19.5px; } }

/* ---------- the brand film ---------- */
.film-clip { aspect-ratio: 16 / 9; max-width: 900px; border-radius: 10px; }

/* ---------- the historical marks, on Who We Are ---------- */
.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 601px)  { .marks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1001px) { .marks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.marks li { background: var(--paper); border: var(--hair); border-radius: 8px; aspect-ratio: 5 / 3;
  display: grid; place-items: center; padding: 16px 18px; overflow: hidden; }
.marks img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;
  transition: transform .5s var(--ease); }
@media (hover: hover) { .marks li:hover img { transform: scale(1.05); } }

/* ---------- the WBENC mark beside her certification sentence ---------- */
.wbenc { display: grid; gap: 16px; align-items: center; margin-top: 6px; }
.wbenc img { width: 168px; height: auto; display: block; }
.wbenc p { margin: 0; max-width: 34rem; }
@media (min-width: 601px) { .wbenc { grid-template-columns: auto minmax(0, 1fr); gap: 24px; } }

/* the film in the contact column, under the address */
.contact-aside .film-clip { max-width: none; margin-top: 4px; }

/* ---------- what happens next, under the contact form ---------- */
.next-steps { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: var(--hair); display: grid; gap: 12px; max-width: 34rem; }
.next-steps li { font-size: 14.5px; line-height: 1.5; color: var(--n6); text-wrap: pretty; }
.next-steps b { color: var(--ink); font-weight: 600; }

/* one or two real pieces, shown at their size rather than stretched across empty columns */
.montage.is-2 { columns: 2; column-gap: 10px; }
.montage.is-2 li { margin-bottom: 10px; }
.montage.is-1 { columns: 1; max-width: 46rem; margin-inline: auto; }

/* ---------- utility pages: text-only hero, JotForm embeds, blog list, legal text ---------- */
.ph.is-text h1 { max-width: 20ch; }
.ph.is-text .ph-a { max-width: 40rem; }
.jf { margin-top: clamp(16px, 2vw, 24px); border-radius: 10px; overflow: hidden; background: var(--paper); }
.jf iframe { display: block; width: 100%; min-width: 100%; min-height: 760px; border: 0; }
.posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--n4); max-width: 64rem; }
.post { padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--n4); display: grid; grid-template-columns: minmax(0, 1fr) clamp(104px, 24vw, 280px); gap: clamp(16px, 3vw, 44px); align-items: start; }
.post-text { display: grid; gap: 10px; min-width: 0; grid-column: 1; grid-row: 1; }
.post-thumb { grid-column: 2; grid-row: 1; display: block; border-radius: 8px; overflow: hidden; background: var(--n1); }
.post-thumb img { width: 100%; height: auto; display: block; }
.post-meta { font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--n5); max-width: none; }
.post h2 { font-size: clamp(22px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.01em; }
.post h2 a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .post h2 a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.post-text > p:not(.post-meta) { font-size: 16px; line-height: 1.55; color: var(--n6); max-width: 44rem; }
.post-text .link-arrow { justify-self: start; }
.legal-body { max-width: 46rem; display: grid; gap: 14px; }
.legal-body h2 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; margin-top: 18px; }
.legal-body p, .legal-body li { font-size: 16px; line-height: 1.6; color: var(--n6); }
.legal-body ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.legal-body a { color: var(--ink); overflow-wrap: anywhere; }
.ph.is-text { padding-bottom: clamp(12px, 1.6vw, 22px); }
.ph.is-text + .sec { padding-top: clamp(12px, 1.6vw, 22px); }
.dieline { margin-top: clamp(26px, 3vw, 38px); padding-top: 18px; border-top: 1px solid var(--n4); display: grid; gap: 8px; max-width: 40rem; }
.dieline .link-arrow { justify-self: start; }
.dieline p { font-size: 15px; line-height: 1.5; color: var(--n6); }

/* ---------- blog: category row, post pages ---------- */
.cats { margin: 0 0 clamp(18px, 2vw, 28px); }
.cats ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cats a { display: inline-block; padding: 7px 13px; border: 1px solid var(--n3); border-radius: 999px; font-size: 13px; line-height: 1.2; color: var(--n6); text-decoration: none; transition: border-color .2s, color .2s; }
.cats a:hover { border-color: var(--ink); color: var(--ink); }
.cats a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.post-head h1 { max-width: 24ch; }
.post-head .post-meta { margin: 0 0 12px; }
.post-cover { margin: 0 0 clamp(28px, 3.4vw, 48px); max-width: 64rem; }
.post-cover img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--n1); }
.article-body { max-width: 44rem; }
.article-body h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -0.015em; margin: clamp(34px, 3.4vw, 48px) 0 14px; max-width: none; }
.article-body h3 { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.25; margin: 26px 0 10px; max-width: none; }
.article-body h2:first-child { margin-top: 0; }
.article-body h2 + h3 { margin-top: 14px; }
.article-body p, .article-body li { font-size: 17px; line-height: 1.65; color: var(--n6); max-width: none; }
.article-body p + p { margin-top: 14px; }
.article-body ul, .article-body ol { margin: 12px 0 16px; padding-left: 1.25em; display: grid; gap: 6px; }
.article-body a { color: var(--ink); text-underline-offset: 3px; }
.article-body strong { color: var(--ink); }
.post-cats { margin-top: clamp(28px, 3vw, 40px); padding-top: 18px; border-top: 1px solid var(--n3); max-width: 44rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 15px; }
.post-cats span { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--n5); }
.post-cats a { color: var(--ink); text-underline-offset: 3px; }
.more-posts .eyebrow { margin-bottom: 14px; }
.post h3 { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.18; letter-spacing: -0.01em; font-weight: 400; }
.post h3 a { color: var(--ink); text-decoration: none; }
@media (hover: hover) { .post h3 a:hover { text-decoration: underline; text-underline-offset: 4px; } }

/* ---------- Promotional Products (2026-09-29) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* "Put your logo on a ___": the word lands off register and snaps in, the way a sheet comes up to color */
.promo-swap { max-width: none; }
.promo-swap .swap { display: block; color: var(--magenta); min-height: 1.1em; }
.promo-swap .swap.is-in { animation: swap-in .75s var(--ease) both; }
@keyframes swap-in {
  0%   { opacity: 0; transform: translateY(.18em); text-shadow: -.09em 0 var(--cyan), .09em 0 var(--yellow); }
  45%  { opacity: 1; text-shadow: -.05em 0 var(--cyan), .05em 0 var(--yellow); }
  100% { opacity: 1; transform: none; text-shadow: 0 0 transparent, 0 0 transparent; }
}
.promo-search { display: flex; gap: 12px; flex-wrap: wrap; max-width: 44rem; margin-top: clamp(20px, 2.4vw, 32px); }
.promo-search input { flex: 1 1 16rem; min-width: 0; font: 400 17px/1.2 var(--font); padding: .95em 1.2em; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); }
.promo-search input:focus-visible { outline: none; box-shadow: var(--focus); }
.promo-search .btn { border: 0; cursor: pointer; font-family: var(--font); }

.cat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 701px)  { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1101px) { .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cat-grid a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 22px 18px 18px; background: var(--paper); border: var(--hair); border-radius: 8px; text-decoration: none; overflow: hidden; transition: background .3s, color .3s, transform .3s var(--ease); }
/* each tile carries one of the four inks along its top edge, in press order */
.cat-grid a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--cyan); }
.cat-grid li:nth-child(4n+2) a::before { background: var(--magenta); }
.cat-grid li:nth-child(4n+3) a::before { background: var(--yellow); }
.cat-grid li:nth-child(4n+4) a::before { background: var(--ink); }
.cat-grid h3 { font-weight: 400; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.12; letter-spacing: -0.015em; }
.cat-grid p { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--n6); max-width: none; flex: 1; }
.cat-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; white-space: nowrap; font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.cat-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s var(--ease); }
@media (hover: hover) {
  .cat-grid a:hover { background: var(--ink); color: var(--paper); transform: translateY(-3px); }
  .cat-grid a:hover p { color: rgba(255,255,255,.75); }
  .cat-grid a:hover .cat-go svg { transform: translateX(4px); }
}
.cat-all { margin-top: clamp(24px, 3vw, 36px); }

.made-grid { display: grid; gap: clamp(28px, 3vw, 44px); grid-template-columns: 1fr; }
@media (min-width: 801px) { .made-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.made figure { margin: 0 0 18px; border-radius: 8px; overflow: hidden; background: var(--n1); aspect-ratio: 4 / 3; }
.made figure img { width: 100%; height: 100%; object-fit: contain; display: block; }
.made h3 { font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.02em; line-height: 1.08; }
.made p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--n6); }
.made-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px !important; }
@media (max-width: 480px) { .cat-grid a { padding: 20px 14px 16px; } .cat-go { letter-spacing: .06em; } }

/* tall pieces (the restaurant menus) get a taller box so they show large, still uncropped (2026-10-01) */
@media (min-width: 801px) { .plist-fig.is-tall .fig-box { aspect-ratio: 4 / 5; } }