/** Shopify CDN: Minification failed

Line 259:0 Unexpected "}"
Line 392:0 Expected "}" to go with "{"

**/
/* ==========================================================================
   ONTFIHS — storefront sections
   Scoped to the .otf-* namespace so it can live next to Refresh untouched.
   Loaded by every ontfihs-* section via {{ 'ontfihs.css' | asset_url | stylesheet_tag }}
   ========================================================================== */

@font-face {
  font-family: "OTF Fraunces";
  src: url("ontfihs-fraunces.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "OTF Fraunces";
  src: url("ontfihs-fraunces-italic.woff2") format("woff2");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "OTF Inter";
  src: url("ontfihs-inter.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

.otf {
  --otf-ink: #0c1a14;
  --otf-pine: #12251c;
  --otf-pine-2: #1a3629;
  --otf-moss: #3d5b48;
  --otf-bone: #f1ebdf;
  --otf-paper: #faf7f0;
  --otf-sand: #e3d9c7;
  --otf-sand-2: #d6c9b2;
  --otf-brass: #c08a45;
  --otf-brass-l: #dcb177;
  --otf-rust: #a2442c;
  --otf-text: #16211b;
  --otf-muted: #6a6a60;

  --otf-display: "OTF Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --otf-sans: "OTF Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --otf-shell: 1320px;
  --otf-gut: clamp(20px, 5vw, 64px);
  --otf-sect: clamp(56px, 7vw, 104px);
  --otf-r: 2px;
  --otf-line: 1px solid rgba(22, 33, 27, 0.14);
  --otf-shadow-m: 0 2px 4px rgba(12, 26, 20, 0.05), 0 18px 40px -22px rgba(12, 26, 20, 0.4);
  --otf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  font-family: var(--otf-sans);
  color: var(--otf-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.otf *,
.otf *::before,
.otf *::after { box-sizing: border-box; }
.otf img { display: block; max-width: 100%; height: auto; }
.otf ul, .otf ol { margin: 0; padding: 0; list-style: none; }
.otf p { margin: 0; }
.otf h1, .otf h2, .otf h3 {
  margin: 0;
  font-family: var(--otf-display);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.02;
  color: inherit;
}
.otf em { font-style: italic; }
/* :where() keeps the reset at zero specificity so button colours still win */
.otf :where(a) { color: inherit; text-decoration: none; }

/* .otf ul reset would otherwise beat a single class, so keep the shell explicit */
.otf .otf__shell {
  width: 100%;
  max-width: var(--otf-shell);
  margin-inline: auto;
  padding-inline: var(--otf-gut);
}
/* vertical rhythm for the plain light sections */
.otf-sec { padding-block: var(--otf-sect); }
.otf__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--otf-moss);
  margin-bottom: 20px;
}
.otf__eyebrow--brass { color: var(--otf-brass); }
.otf__eyebrow-rule { display: block; width: 26px; height: 1px; background: currentColor; opacity: 0.8; }
.otf__title { font-size: clamp(28px, 3.4vw, 50px); max-width: 16ch; }
.otf__lede { font-size: 15.5px; line-height: 1.62; color: var(--otf-muted); max-width: 42ch; }
.otf__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(22px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(30px, 4vw, 52px);
}
.otf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 14px 26px;
  border-radius: var(--otf-r);
  font-family: var(--otf-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--otf-ease), background-color 0.25s var(--otf-ease),
    color 0.25s var(--otf-ease), border-color 0.25s var(--otf-ease);
}
.otf__btn:hover { transform: translateY(-2px); }
.otf__btn--brass { background: var(--otf-brass); color: #1a1207; }
.otf__btn--brass:hover { background: var(--otf-brass-l); }
.otf__btn--ghost { color: var(--otf-bone); border-color: rgba(241, 235, 223, 0.34); }
.otf__btn--ghost:hover { background: rgba(241, 235, 223, 0.09); border-color: rgba(241, 235, 223, 0.6); }
.otf__btn--bone { background: var(--otf-bone); color: var(--otf-ink); }
.otf__btn--dark { background: var(--otf-ink); color: var(--otf-bone); }

/* ------------------------------------------------------------------ hero */
.otf-hero {
  position: relative;
  overflow: hidden;
  background: var(--otf-ink);
  color: var(--otf-bone);
}
.otf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 62% at 78% 34%, rgba(60, 96, 74, 0.55) 0%, rgba(18, 37, 28, 0) 62%),
    radial-gradient(52% 48% at 12% 8%, rgba(192, 138, 69, 0.14) 0%, rgba(12, 26, 20, 0) 70%),
    linear-gradient(168deg, #10241b 0%, #0c1a14 46%, #0a1712 100%);
}
.otf-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(36px, 5vw, 84px);
}
.otf-hero__copy { max-width: 560px; }
.otf-hero__title { font-size: clamp(40px, 6.2vw, 84px); line-height: 0.94; letter-spacing: -0.032em; margin-bottom: 24px; }
.otf-hero__title em { color: var(--otf-brass-l); }
.otf-hero__lede { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.65; color: #c3cfc4; margin-bottom: 30px; max-width: 46ch; }
.otf-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }
.otf-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #9fb0a4; }
.otf-hero__trust li { display: flex; align-items: center; gap: 8px; }
.otf-hero__art { position: relative; display: grid; place-items: center; min-height: clamp(280px, 40vw, 540px); }
.otf-hero__fan {
  position: relative;
  z-index: 1;
  width: min(104%, 620px);
  object-fit: contain;
  filter: drop-shadow(0 34px 44px rgba(0, 0, 0, 0.55)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
  transform: rotate(-3.5deg);
  animation: otf-float 9s ease-in-out infinite;
}
@keyframes otf-float {
  0%, 100% { transform: rotate(-3.5deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-12px); }
}
.otf-hero__stamp {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 6%;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgba(12, 26, 20, 0.72);
  border: 1px solid rgba(220, 177, 119, 0.45);
  backdrop-filter: blur(6px);
  color: var(--otf-brass-l);
}
.otf-hero__stamp b { font-family: var(--otf-display); font-size: 32px; line-height: 1; font-weight: 400; }
.otf-hero__stamp span { font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #c9d3c7; line-height: 1.4; margin-top: 4px; }
.otf-hero__spec {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 10%;
  background: rgba(250, 247, 240, 0.97);
  color: var(--otf-text);
  padding: 14px 18px;
  border-radius: var(--otf-r);
  box-shadow: var(--otf-shadow-m);
  min-width: 190px;
}
.otf-hero__spec-label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--otf-brass); margin-bottom: 6px; }
.otf-hero__spec-title { font-family: var(--otf-display); font-size: 17px; line-height: 1.1; }
.otf-hero__spec-meta { font-size: 11.5px; color: var(--otf-muted); margin-top: 5px; }

/* ------------------------------------------------------------- trust bar */
.otf-trust { background: var(--otf-bone); border-block: 1px solid rgba(22, 33, 27, 0.1); }
.otf-trust__list { display: grid; grid-template-columns: repeat(var(--otf-cols, 4), 1fr); }
.otf-trust__list li { padding: 22px clamp(12px, 1.8vw, 26px); display: grid; gap: 5px; border-left: 1px solid rgba(22, 33, 27, 0.12); }
.otf-trust__list li:first-child { border-left: 0; padding-left: 0; }
.otf-trust__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--otf-moss); }
.otf-trust__v { font-size: 13.5px; line-height: 1.45; color: #3f4a42; }

/* ------------------------------------------------------------- size grid */
.otf-sizes { display: grid; grid-template-columns: repeat(var(--otf-cols, 6), minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.otf-size { display: grid; height: 100%; background: #fff; border: 1px solid var(--otf-sand); border-radius: var(--otf-r); overflow: hidden; transition: border-color 0.3s var(--otf-ease), transform 0.3s var(--otf-ease), box-shadow 0.3s var(--otf-ease); }
.otf-size:hover { transform: translateY(-4px); border-color: rgba(22, 33, 27, 0.34); box-shadow: var(--otf-shadow-m); }
.otf-size__media { display: block; aspect-ratio: 1 / 1; padding: 12px; overflow: hidden; }
.otf-size__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s var(--otf-ease); }
.otf-size:hover .otf-size__media img { transform: scale(1.06); }
.otf-size__body { display: grid; gap: 3px; padding: 14px 16px 6px; }
.otf-size__size { font-family: var(--otf-display); font-size: 22px; line-height: 1; }
.otf-size__name { font-size: 12px; color: var(--otf-muted); }
.otf-size__meta { font-size: 11px; color: var(--otf-moss); margin-top: 2px; }
.otf-size__price { padding: 10px 16px 16px; font-size: 12.5px; font-weight: 600; }

/* --- guard rails: a section must fill its container and never widen the page --- */
.otf, .shopify-section > .otf { width: 100%; max-width: 100%; box-sizing: border-box; }
.otf__shell { width: 100%; max-width: 100%; box-sizing: border-box; }
.otf img, .otf svg { max-width: 100%; }

/* ----------------------------------------------------------- cut library */
.otf-cuts { background: var(--otf-pine); color: var(--otf-bone); position: relative; overflow: hidden; padding-block: var(--otf-sect) clamp(40px, 5vw, 68px); }
.otf-cuts::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 0%, rgba(192, 138, 69, 0.13), transparent 62%); pointer-events: none; }
.otf-cuts .otf__title { color: var(--otf-bone); }
.otf-cuts .otf__lede { color: #a9b7ad; }
.otf-cuts { container-type: inline-size; }
/* The grid follows the SECTION's own width, not the viewport. If the section is
   ever rendered narrower than the screen (webview, zoom, padded wrapper, editor
   frame) the cards reflow instead of being squeezed into a strip. */
}
.otf-cuts__rail { position: relative; overflow: visible; }
.otf-cuts__rail::-webkit-scrollbar { display: none; }
.otf .otf-cuts__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  /* percentage, not 100vw: the padding must follow this section's own width, otherwise
     any ancestor that narrows the section (padded wrapper, scrollbar, zoom) turns the
     padding into a huge value and crushes the grid into a strip */
  padding-inline: max(var(--otf-gut), calc((100% - var(--otf-shell)) / 2));
}
.otf-cut__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.otf-cut__cta {
  margin-top: 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--otf-brass-l); opacity: 0; transform: translateY(4px);
  transition: opacity 0.28s var(--otf-ease), transform 0.28s var(--otf-ease);
}
.otf-cut:hover .otf-cut__cta, .otf-cut:focus-within .otf-cut__cta { opacity: 1; transform: none; }
.otf-cut__link:focus-visible { outline: 2px solid var(--otf-brass-l); outline-offset: 3px; }
.otf-cut { width: auto; padding: 24px 18px 22px; border: 1px solid rgba(241, 235, 223, 0.14); border-radius: var(--otf-r); background: rgba(241, 235, 223, 0.03); transition: border-color 0.3s var(--otf-ease), background-color 0.3s, transform 0.3s var(--otf-ease); }
.otf-cut:hover { border-color: rgba(220, 177, 119, 0.6); background: rgba(220, 177, 119, 0.07); transform: translateY(-3px); }
.otf-cut__art { display: block; height: 78px; margin-bottom: 20px; }
.otf-cut__art svg { width: 100%; height: 100%; fill: rgba(241, 235, 223, 0.05); stroke: rgba(241, 235, 223, 0.6); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: fill 0.3s, stroke 0.3s, transform 0.4s var(--otf-ease); transform-origin: bottom center; }
.otf-cut:hover .otf-cut__art svg { fill: rgba(220, 177, 119, 0.12); stroke: var(--otf-brass-l); transform: scale(1.03); }
.otf-cut__name { display: block; font-family: var(--otf-display); font-size: 19px; line-height: 1.1; margin-bottom: 7px; }
.otf-cut__desc { display: block; font-size: 11.5px; line-height: 1.5; color: rgba(241, 235, 223, 0.66); }

/* ---------------------------------------------------------------- bundle */
.otf-bundle { background: var(--otf-pine-2); color: var(--otf-bone); padding-block: clamp(46px, 6vw, 80px); }
.otf-bundle__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.otf-bundle .otf__title { color: var(--otf-bone); font-size: clamp(30px, 4vw, 56px); max-width: 18ch; }
.otf-bundle .otf__title em { color: var(--otf-brass-l); }
.otf-bundle__lede { color: #c2cfc4; font-size: 15px; line-height: 1.62; max-width: 44ch; margin-top: 20px; }
.otf-bundle__cta { display: flex; align-items: center; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.otf-bundle__save { font-family: var(--otf-display); font-size: 20px; line-height: 1.2; }
.otf-bundle__save span { display: block; font-family: var(--otf-sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #a9b7ad; margin-top: 3px; }
.otf-bundle__art { display: grid; justify-items: center; }
.otf-bundle__art img { width: min(100%, 480px); filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.5)); transform: rotate(6deg); }
.otf-bundle__caption { margin-top: 18px; font-size: 12px; letter-spacing: 0.05em; color: #a9b7ad; text-align: center; }

/* ------------------------------------------------------------ size guide */
.otf-guide { background: var(--otf-paper); }
.otf-guide__card { background: var(--otf-bone); border: 1px solid var(--otf-sand-2); border-radius: var(--otf-r); padding: clamp(22px, 2.6vw, 34px) clamp(20px, 3vw, 44px); }
.otf-guide__card h3 { font-size: 22px; margin-bottom: 14px; }
.otf-guide table { width: 100%; border-collapse: collapse; max-width: 820px; }
.otf-guide th, .otf-guide td { text-align: left; padding: 11px 16px 11px 0; font-size: 13px; border-bottom: 1px solid rgba(22, 33, 27, 0.1); }
.otf-guide thead th { font-family: var(--otf-sans); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--otf-muted); border-bottom: 1px solid rgba(22, 33, 27, 0.24); }
.otf-guide tbody th { font-family: var(--otf-display); font-weight: 400; font-size: 14px; white-space: nowrap; }
.otf-guide tbody tr:last-child th, .otf-guide tbody tr:last-child td { border-bottom: 0; }
.otf-guide__note { margin-top: 14px; font-size: 12px; color: var(--otf-muted); }

/* ------------------------------------------------------------ product row */
.otf-products { display: grid; grid-template-columns: repeat(var(--otf-cols, 4), minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); }
.otf-product { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--otf-sand); border-radius: var(--otf-r); overflow: hidden; transition: border-color 0.3s var(--otf-ease), box-shadow 0.3s var(--otf-ease), transform 0.3s var(--otf-ease); }
.otf-product:hover { border-color: rgba(22, 33, 27, 0.3); box-shadow: var(--otf-shadow-m); transform: translateY(-3px); }
.otf-product__media { position: relative; display: block; aspect-ratio: 1 / 1; padding: 16px; }
.otf-product__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s var(--otf-ease); }
.otf-product:hover .otf-product__media img { transform: scale(1.05); }
.otf-product__badge { position: absolute; left: 12px; top: 12px; z-index: 2; background: var(--otf-ink); color: var(--otf-bone); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 9px; border-radius: 1px; line-height: 1; }
.otf-product__badge--brass { background: var(--otf-brass); color: #1a1207; }
.otf-product__body { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.otf-product__swatches { display: flex; align-items: center; gap: 5px; }
.otf-product__swatches span { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.13); }
.otf-product__title { font-family: var(--otf-sans); font-size: 14.5px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.otf-product__meta { font-size: 11.5px; color: var(--otf-muted); }
.otf-product__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.otf-product__price { font-size: 15px; font-weight: 600; }
.otf-product__price s { color: var(--otf-muted); font-weight: 400; margin-right: 6px; }

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  .otf-hero__fan { animation: none; }
  .otf *, .otf *::before, .otf *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .otf-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .otf-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .otf__head { grid-template-columns: 1fr; gap: 16px; }
  .otf-hero__grid { grid-template-columns: 1fr; padding-block: 28px 40px; }
  .otf-hero__copy { order: 2; max-width: none; }
  .otf-hero__art { order: 1; min-height: 0; margin-bottom: 8px; }
  .otf-hero__fan { width: min(74%, 420px); }
  .otf-hero__spec { left: 0; top: 2%; }
  .otf-hero__stamp { right: 2%; bottom: 0; width: 88px; height: 88px; }
  .otf-hero__stamp b { font-size: 26px; }
  .otf-bundle__grid { grid-template-columns: 1fr; }
  .otf-bundle__art { order: -1; }
  .otf-bundle__art img { width: min(62%, 340px); }
  .otf-trust__list { grid-template-columns: 1fr 1fr; }
  .otf-trust__list li { border-left: 1px solid rgba(22, 33, 27, 0.12); padding: 18px 16px; }
  .otf-trust__list li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .otf-trust__list li:nth-child(n + 3) { border-top: 1px solid rgba(22, 33, 27, 0.1); }
  /* keep every cut visible: the rail becomes a grid below the desktop width */
  .otf-cuts__rail { overflow: visible; padding-bottom: 0; }
  .otf .otf-cuts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .otf-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .otf-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .otf .otf-cuts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .otf-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .otf-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .otf-cut { padding: 18px 14px 16px; }
  .otf-cut__art { height: 72px; margin-bottom: 14px; }
  .otf-cut__name { font-size: 16px; }
  .otf-cut__desc { font-size: 12px; }
}

@media (max-width: 520px) {
  .otf-products { grid-template-columns: 1fr; }
  .otf-trust__list { grid-template-columns: 1fr; }
  .otf-trust__list li { border-left: 0 !important; padding-left: 0; }
  .otf-trust__list li:nth-child(n + 2) { border-top: 1px solid rgba(22, 33, 27, 0.1); }
  .otf-hero__spec, .otf-hero__stamp { display: none; }
  .otf-hero__fan { width: min(70%, 340px); }
  .otf .otf-cuts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* container-query layer: wins over the viewport media queries above */
@container (max-width: 1024px) {
  .otf .otf-cuts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 700px) {
  .otf .otf-cuts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 300px) {
  .otf .otf-cuts__list { grid-template-columns: minmax(0, 1fr); }