/* Hide Fashion — phone mode. Standalone stylesheet: reveal.css and hidefashion.css are
   NOT loaded when this applies (short side <= 600px); sections flow as one long page. */
:root {
  --hf-paper: #F2EFE8; --hf-paper-deep: #E8E4DB; --hf-ink: #171714; --hf-ink-soft: #4F534D;
  --hf-oxblood: #9A453F; --hf-oxblood-deep: #571F1B; --hf-rule: #C9C4B8;
  --hf-eyebrow-dark: #D9A39C; --hf-code-dark: #E6E1D6;
  --hf-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --hf-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --bar-h: 52px;
}

/* base */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--hf-paper); color: var(--hf-ink); font-family: var(--hf-sans); font-size: 17px; line-height: 1.45; }
h1, h2, h3 { font-family: var(--hf-serif); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 12px; }
h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.15em; }
p { margin: 0 0 10px; }
a { color: var(--hf-oxblood); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--hf-oxblood); margin-bottom: 10px; }
.design-render { margin: -4px 0 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hf-ink-soft); font-weight: 500; }
.caption .design-render { margin: 0; font-size: inherit; letter-spacing: 0.12em; }
.code { font-weight: 700; font-size: max(0.8em, 13px); letter-spacing: 0.14em; text-transform: uppercase; }
.code-lg { font-size: 1em; letter-spacing: 0.18em; margin: 0 0 4px; }
.sub { color: var(--hf-ink-soft); }
.rule { border: 0; border-top: 1px solid var(--hf-rule); margin: 14px 0; }

/* sticky top bar */
.phone-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; height: var(--bar-h); padding: 0 16px; box-sizing: border-box; background: var(--hf-paper); border-bottom: 1px solid var(--hf-rule); }
.phone-bar .brand { display: flex; align-items: center; height: 44px; margin-right: auto; }
.phone-bar .brand img { height: 26px; width: auto; }
.menu-btn { position: relative; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; padding: 0; cursor: pointer; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { position: absolute; left: 11px; width: 22px; height: 2px; background: var(--hf-ink); content: ""; transition: transform .18s, opacity .18s; }
.menu-btn span { top: 21px; }
.menu-btn span::before { left: 0; top: -7px; }
.menu-btn span::after { left: 0; top: 7px; }
html.menu-open .menu-btn span { background: transparent; }
html.menu-open .menu-btn span::before { transform: translateY(7px) rotate(45deg); }
html.menu-open .menu-btn span::after { transform: translateY(-7px) rotate(-45deg); }
.phone-menu { position: fixed; top: var(--bar-h); left: 0; right: 0; z-index: 9; background: var(--hf-paper); border-bottom: 1px solid var(--hf-rule); box-shadow: 0 12px 24px rgba(23,23,20,0.12); max-height: calc(100vh - var(--bar-h)); overflow-y: auto; padding: 6px 0 10px; }
.phone-menu a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px max(16px, calc((100% - 600px) / 2)); color: var(--hf-ink); text-decoration: none; border-bottom: 1px solid var(--hf-paper-deep); }
.phone-menu a:last-child { border-bottom: 0; }
.phone-menu .g-name { font-family: var(--hf-serif); font-size: 21px; font-weight: 500; }
.phone-menu .g-count { font-size: 13px; color: var(--hf-ink-soft); letter-spacing: 0.08em; }
.phone-menu .secondary-link .g-name { font-family: var(--hf-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hf-oxblood); }
.phone-bar .jump:last-child { padding-right: 0; }

/* sections: one column, content capped at 600px and centred via padding */
.reveal, .slides { display: block; }
section { display: block; box-sizing: border-box; padding: 24px max(16px, calc((100% - 600px) / 2)); border-bottom: 1px solid var(--hf-paper-deep); scroll-margin-top: var(--bar-h); }
section:has(> section), section.stack { padding: 0; border: 0; }
section.dark, section.dark h1, section.dark h2, section.dark h3, section.dark p { color: var(--hf-paper); }
section.dark .eyebrow { color: var(--hf-eyebrow-dark); }
section.dark .code { color: var(--hf-code-dark); }

/* cover */
section.cover { min-height: 80vh; min-height: 80svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; background-color: var(--hf-ink); background-size: cover; background-position: center; }
.cover-panel { width: 100%; box-sizing: border-box; padding: 20px 16px; background: rgba(23,23,20,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cover-panel .lockup { height: 52px; width: auto; max-width: 100%; margin-bottom: 18px; }   /* full lockup, Manufacturing & Export subtext */
.cover-panel h1 { font-size: 2.2em; margin-bottom: 6px; }

/* company */
.two-col { display: grid; grid-template-columns: 1fr; gap: 20px; }
.numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.number strong { display: block; font-family: var(--hf-serif); font-size: 2em; line-height: 1; color: var(--hf-oxblood); }
.number span { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hf-ink-soft); }
.sedex { height: 64px; width: auto; margin-top: 18px; }
.compliance { font-size: 13px; margin-top: 8px; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-grid figcaption { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hf-ink-soft); margin-top: 6px; }

/* values, options, payment cards */
.card-row { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
.card { border-top: 2px solid var(--hf-oxblood); padding-top: 12px; }
.card h3 { margin-bottom: 8px; }
.card ul { margin: 0; padding-left: 1em; }
.card li { margin-bottom: 4px; }
.process-strip { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; font-size: 15px; }
.process-strip .step { position: relative; padding: 10px 0 0 52px; border-top: 1px solid var(--hf-rule); }   /* number in the gutter; name + bare text run flow beside it */
.process-strip .n { position: absolute; left: 0; top: 10px; font-family: var(--hf-serif); color: var(--hf-oxblood); font-size: 1.6em; line-height: 1; }
.process-strip strong { display: block; margin-bottom: 2px; }

/* catalog index */
.thumb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; max-width: none; margin-top: 8px; }
.thumb { display: block; color: var(--hf-ink); text-decoration: none; font-size: 14px; line-height: 1.25; }
.thumb img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; margin-bottom: 8px; }
.thumb .code { display: block; font-size: 13px; margin-bottom: 2px; }
.thumb .name { display: block; color: var(--hf-ink-soft); }

/* style slide */
.style-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
/* Reserve the catalog frame before lazy images arrive, so style links stay put.
   Once loaded, auto uses the image's exact intrinsic ratio. */
.style-image img { width: 100%; aspect-ratio: auto 4 / 5; background: #fff; }
body[data-series="102"] .style-image img { aspect-ratio: auto 1 / 1; }
.spec-panel h2 { font-size: 1.5em; margin: 4px 0 12px; }
.spec-panel dl { display: grid; grid-template-columns: 90px 1fr; gap: 4px 12px; font-size: 15px; margin: 0 0 10px; }
.spec-panel dt { color: var(--hf-ink-soft); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 3px; }
.spec-panel dd { margin: 0; }
.spec-panel .notes { font-size: 16px; }
.cta { border-top: 1px solid var(--hf-rule); padding-top: 12px; margin-top: 14px; font-size: 16px; }
.moq { font-size: 13px; color: var(--hf-ink-soft); }
.secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.secondary img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 62% center; background: #fff; }
.hero-caption { position: static; }

/* gallery slides */
.gallery { display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 12px; height: auto; }
.gallery img { width: 100%; height: auto; background: #fff; }           /* natural aspect: no letterbox bands */
.gallery .hero-cell { aspect-ratio: 16 / 9; object-fit: cover; background: var(--hf-ink); }
.caption { font-size: 14px; color: var(--hf-ink-soft); margin-top: 10px; }

/* duo slides */
.duo { display: grid; grid-template-columns: 1fr; gap: 32px; }
.duo-images, .duo-images.with-detail { display: grid; grid-template-columns: 1fr; gap: 10px; height: auto; margin-bottom: 14px; }
.duo-images img { width: 100%; height: auto; background: #fff; }
.duo-item h3 { font-size: 1.25em; margin: 2px 0 8px; }
.small { font-size: 15px; }
.duo-item .cta { padding-top: 10px; margin-top: 10px; }

/* leather library */
.leather-grid { display: grid; grid-template-columns: 1fr; gap: 16px 14px; margin-top: 12px; }
.leather { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; }
.leather img { width: 84px; height: 84px; object-fit: cover; }
.leather h3 { font-size: 1.1em; margin-bottom: 4px; }
.leather .meta { color: var(--hf-ink-soft); font-size: 14px; }

/* brands */
.brand-list { display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--hf-serif); font-size: 1.2em; margin: 10px 0 20px; }
.logo-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0 16px; }
.logo-tile { background: #fff; border: 1px solid var(--hf-rule); height: 96px; display: flex; align-items: center; justify-content: center; padding: 14px 16px; box-sizing: border-box; }
.logo-tile img { width: 100%; height: 100%; max-height: 60px; object-fit: contain; filter: grayscale(1); opacity: 0.92; }
.logo-tile .logo-svg { display: block; width: 100%; height: 100%; max-height: 60px; filter: grayscale(1); opacity: 0.92; }
.logo-tile .logo-svg svg { width: 100%; height: 100%; display: block; }
.logo-tile .wordmark { font-family: var(--hf-serif); font-size: 1.05em; letter-spacing: 0.06em; color: var(--hf-ink); text-align: center; line-height: 1.15; }

/* programme timeline */
.timeline { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
.timeline .step { border-top: 2px solid var(--hf-oxblood); padding-top: 8px; }
.timeline .n { display: block; font-family: var(--hf-serif); font-size: 1.6em; line-height: 1; color: var(--hf-oxblood); }
.timeline strong { display: block; margin: 4px 0; }

/* payment and thanks */
.terms { font-size: 15px; color: var(--hf-ink-soft); margin: 0; padding-left: 1.1em; }
.terms li { margin-bottom: 6px; }
.contact { font-size: 16px; line-height: 1.6; }
.contact strong { display: inline-block; width: 110px; color: var(--hf-ink-soft); font-weight: 500; }
.cta-link { margin-top: 20px; }
.cta-link a { color: var(--hf-eyebrow-dark); border-bottom: 1px solid var(--hf-eyebrow-dark); }
section.dark .contact a { color: var(--hf-eyebrow-dark); }
.reveal .slides section.dark img[alt="Hide Fashion"] { height: 64px !important; }

@media print { .logo-tile img, .logo-tile .logo-svg { filter: none; opacity: 1; } .cover-panel { backdrop-filter: none; background: rgba(23,23,20,0.85); } }

/* Long products and range shots: show the whole picture, buckle to tip. */
html[data-layout="wide"] .style-image { background: #fff; }
html[data-layout="wide"] .style-image img,
html[data-layout="wide"] .secondary img,
html[data-layout="wide"] .gallery img,
html[data-layout="wide"] .gallery .hero-cell,
html[data-layout="wide"] .thumb img,
html[data-layout="wide"] .duo-images img {
  object-fit: contain;
  object-position: center center;
  background: #fff;
  height: auto;
}
html[data-layout="wide"] .secondary img { aspect-ratio: 5 / 2; }
html[data-layout="wide"] .style-slide.frame-tall .secondary img { aspect-ratio: 4 / 3; }
html[data-layout="wide"] .thumb img { aspect-ratio: 3 / 2; }
html[data-layout="wide"] .gallery .hero-cell { aspect-ratio: auto; }

/* full-screen image viewer (phone.js) */
.viewer { position: fixed; inset: 0; z-index: 20; background: var(--hf-ink); touch-action: none; overflow: hidden; user-select: none; -webkit-user-select: none; }
.viewer img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; transform-origin: center center; will-change: transform; -webkit-user-drag: none; }
.viewer-close { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 8px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 22px; background: rgba(23,23,20,0.6); color: var(--hf-paper); font: 28px/44px "Instrument Sans", sans-serif; cursor: pointer; }
.viewer-caption { position: absolute; left: 16px; right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); margin: 0; color: var(--hf-paper); font-size: 14px; text-align: center; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
html.viewer-open, html.viewer-open body { overflow: hidden; }
.style-image img, .secondary img, .gallery img, .duo-images img { cursor: zoom-in; }