/* Hemfall: the dye trough on the oak bench, seen from above; below it, sections hang from the rail like cloth, each at its own length. */

@font-face {
  font-family: "Darker Grotesque";
  src: url("/assets/fonts/specimen/darker-grotesque-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baskervville";
  src: url("/assets/fonts/specimen/baskervville-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baskervville";
  src: url("/assets/fonts/specimen/baskervville-var-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

body.spec-hemfall { margin: 0; background: #E9E6DF; }

.spec-hemfall {
  --hf-chalk: #E9E6DF;
  --hf-ink: #1B130B;
  --hf-indigo: #26306E;
  --hf-cream: #F3EBDD;
  --hf-cream-fold: #E7DCC8;
  --hf-steel-hi: #D7D8D4;
  --hf-steel-lo: #8E918F;
  --hf-steel: linear-gradient(180deg, #E6E7E3, #B7B9B5 48%, #8E918F);
  --hf-madder: #A5432F;
  --hf-walnut: #6A4A2C;
  --hf-timber: #B08B5B;
  --hf-stitch: repeating-linear-gradient(90deg, rgba(27, 19, 11, .32) 0 6px, transparent 6px 11px);
  --hf-stitch-c: repeating-linear-gradient(90deg, rgba(243, 235, 221, .6) 0 6px, transparent 6px 11px);
  --hf-dyed: linear-gradient(0deg, #26306E 0 30%, #3C4679 42%, #7880A6 60%, #C7C8D6 78%, #F3EBDD 94%);
  --hf-settle: linear(0, .18 7%, .55 17%, .86 29%, 1.02 40%, 1.05 48%, 1.03 58%, 1 72%, .995 84%, 1);
  --hf-recut: linear(0, .08 10%, .2 20%, .34 30%, .5 40%, .66 50%, .8 60%, .91 70%, .98 80%, 1.01 90%, 1);
  --hf-disp: "Darker Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --hf-serif: "Baskervville", "Libre Baskerville", Baskerville, "Times New Roman", serif;
  --hf-t-h1: clamp(3.25rem, 1.6rem + 5.6vw, 7.75rem);
  --hf-t-h2: clamp(2.75rem, 1.55rem + 4vw, 6rem);
  --hf-t-h2-big: clamp(3.25rem, 1.3rem + 6.6vw, 9rem);
  --hf-t-h3: clamp(1.75rem, 1.35rem + 1.3vw, 2.625rem);
  --hf-t-lede: clamp(1.3125rem, 1.1rem + .85vw, 1.875rem);
  --hf-t-body: clamp(1.125rem, 1.02rem + .42vw, 1.4375rem);
  --hf-t-small: 1rem;
  --hf-inset: clamp(16px, 4vw, 64px);
  --hf-gap: clamp(14px, 1.6vw, 26px);
  --hf-w-crepe: repeating-linear-gradient(97deg, rgba(90, 70, 40, .09) 0 1px, transparent 1px 2px, rgba(255, 255, 255, .28) 2px 3px, transparent 3px 5px), repeating-linear-gradient(8deg, rgba(90, 70, 40, .05) 0 1px, transparent 1px 3px);
  --hf-w-jersey: repeating-linear-gradient(90deg, rgba(90, 70, 40, .13) 0 1.5px, transparent 1.5px 4px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px 3px);
  --hf-w-linen: repeating-linear-gradient(90deg, transparent 0 9px, rgba(90, 70, 40, .14) 9px 10px, transparent 10px 23px), repeating-linear-gradient(0deg, rgba(90, 70, 40, .08) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90, 70, 40, .07) 0 1px, transparent 1px 2.6px);
  --hf-w-georgette: repeating-linear-gradient(45deg, rgba(90, 70, 40, .1) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgba(90, 70, 40, .1) 0 1px, transparent 1px 3px);
  --hf-w-voile: repeating-linear-gradient(0deg, rgba(90, 70, 40, .09) 0 1px, transparent 1px 2.4px), repeating-linear-gradient(90deg, rgba(90, 70, 40, .09) 0 1px, transparent 1px 2.4px);
  --hf-w-indigo: repeating-linear-gradient(97deg, rgba(0, 0, 20, .16) 0 1px, transparent 1px 2px, rgba(255, 255, 255, .05) 2px 3px, transparent 3px 5px), repeating-linear-gradient(8deg, rgba(0, 0, 20, .08) 0 1px, transparent 1px 3px);
  --hf-dip-indigo: linear-gradient(0deg, #26306E 0 34%, #3C4679 44%, #7880A6 58%, #C7C8D6 72%, #F3EBDD 84%);
  --hf-dip-madder: linear-gradient(0deg, #A5432F 0 34%, #B25B45 44%, #CD8E79 58%, #E9CDBE 72%, #F3EBDD 84%);
  --hf-dip-walnut: linear-gradient(0deg, #6A4A2C 0 34%, #7A5B3E 44%, #A68D72 58%, #D9CBB5 72%, #F3EBDD 84%);
}

.hf-page {
  position: relative;
  background: var(--hf-chalk);
  color: var(--hf-ink);
  font-family: var(--hf-serif);
  font-size: var(--hf-t-body);
  font-weight: 400;
  line-height: 1.5;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  --b2c: 1.3fr .8fr .95fr 1.12fr;
  --h1: 21; --h2: 31; --h3: 40;
  --sf: 56; --hn: 36; --ha1: 18; --ha2: 30;
}
.hf-page[data-cut="abaya"] { --b2c: 1.14fr 1fr 1fr 1fr; --h1: 34; --h2: 34; --h3: 34; --hn: 44; --ha1: 26; --ha2: 26; }
.hf-page[data-cut="trousers"] { --b2c: 1.3fr .96fr .6fr .96fr; --h1: 42; --h2: 17; --h3: 42; --hn: 46; --ha1: 32; --ha2: 32; }
.hf-page[data-cut="tunic"] { --b2c: 1.2fr 1.04fr 1.04fr 1.04fr; --h1: 22; --h2: 24; --h3: 22; --hn: 24; --ha1: 15; --ha2: 16; }

.hf-page *, .hf-page *::before, .hf-page *::after { box-sizing: border-box; }
.hf-page :where(h1, h2, h3, p, ul, ol, figure, fieldset) { margin: 0; }
.hf-page :where(ul, ol) { padding: 0; list-style: none; }
.hf-page :where(h1, h2, h3) { text-wrap: balance; }
.hf-page :where(p, li) { text-wrap: pretty; }
.hf-page em { font-style: italic; }
.hf-page img { display: block; max-width: 100%; height: auto; }
.hf-page a { color: var(--hf-indigo); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.hf-page :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--hf-indigo); outline-offset: 3px; }
.hf-page :where(button) { font: inherit; color: inherit; }

.hf-page :is(h1, .hf-h2) { font-family: var(--hf-disp); font-weight: 800; letter-spacing: -.012em; }
.hf-page .hf-h2 { font-size: var(--hf-t-h2); line-height: .86; }
.hf-page h3 { font-family: var(--hf-disp); font-size: var(--hf-t-h3); font-weight: 800; line-height: .95; letter-spacing: -.005em; }
.hf-runin { display: block; margin-bottom: 10px; font-family: var(--hf-disp); font-size: var(--hf-t-h3); font-weight: 800; line-height: .95; }
.hf-lede { font-size: var(--hf-t-lede); font-weight: 420; line-height: 1.36; }

.hf-nav {
  position: sticky;
  top: var(--bar-h, 40px);
  z-index: 800;
  height: 56px;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 36px);
  padding: 0 var(--hf-inset);
  background: var(--hf-chalk);
  box-shadow: inset 0 -2px 0 var(--hf-steel-lo), inset 0 -3px 0 var(--hf-steel-hi);
  font-size: 1.0625rem;
  line-height: 1;
}
.hf-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-family: var(--hf-disp);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.hf-brand span { translate: 0 -2px; }
.hf-page .hf-brand { color: var(--hf-ink); text-decoration: none; }
.hf-mark { width: 30px; height: 30px; flex: none; display: block; }
.hf-links { display: flex; gap: clamp(16px, 2.2vw, 34px); }
.hf-page .hf-links a, .hf-page .hf-ask {
  color: var(--hf-ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 0;
  background: linear-gradient(var(--hf-ink), var(--hf-ink)) left calc(100% - 4px) / 0 1px no-repeat;
  transition: background-size .32s var(--hf-settle);
}
.hf-page .hf-links a:hover, .hf-page .hf-ask:hover { background-size: 100% 1px; }
.hf-page .hf-ask { background: linear-gradient(var(--hf-indigo), var(--hf-indigo)) left calc(100% - 4px) / 100% 2px no-repeat; }
.hf-ask-short { display: none; }

.hf-band { position: relative; scroll-margin-top: calc(var(--bar-h, 40px) + 56px); }
.hf-in { position: relative; width: min(100% - 2 * var(--hf-inset), 1600px); margin-inline: auto; }
.hf-in p { max-width: 38em; }
.hf-hang {
  --pad: clamp(18px, 2vw, 32px);
  position: relative;
  padding: var(--pad) var(--pad) calc(var(--pad) + 30px);
  background: var(--hf-w-crepe), var(--hf-cream);
  box-shadow: 0 22px 30px -26px rgba(50, 36, 20, .5), inset 0 -1px 0 rgba(27, 19, 11, .08);
}
.hf-hang::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 15px; height: 1px; background: var(--hf-stitch); }
.hf-hang.hf-indigo { background: var(--hf-w-indigo), var(--hf-indigo); color: var(--hf-cream); }
.hf-hang.hf-indigo::after { background: var(--hf-stitch-c); }
.hf-dyefield { background: var(--hf-w-indigo), var(--hf-indigo); color: var(--hf-cream); }
.hf-page .hf-dyefield a { color: var(--hf-cream); }
.hf-page .hf-dyefield :focus-visible { outline-color: var(--hf-cream); }
.hf-rod {
  display: block;
  height: 10px;
  border-radius: 5px;
  background: var(--hf-steel);
  box-shadow: 0 3px 4px -1px rgba(60, 40, 20, .28);
}
.hf-window { position: relative; overflow: hidden; background: var(--hf-cream-fold); }
.hf-window img { width: 100%; }

.hf-b1 { --win-h: clamp(460px, calc(100svh - var(--bar-h, 40px) - 56px), 900px); }
.hf-b1-in { position: relative; z-index: 2; display: grid; grid-template-areas: "win"; }
.hf-dye {
  grid-area: win;
  position: relative;
  height: var(--win-h);
  overflow: hidden;
  background: #A88F72;
  isolation: isolate;
}
.hf-poster, .hf-poster img {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  max-width: none;
}
.hf-dye .hf-room { position: absolute; left: 0; top: 0; max-width: none; height: auto; opacity: 0; transition: opacity .5s ease; }
.hf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.hf-length, .hf-tag { display: none; }

/* the words sit on the bare timber: the headline above the length, the rest below it */
.hf-head, .hf-wall { grid-area: win; position: relative; z-index: 3; justify-self: start; pointer-events: none; }
.hf-head { align-self: start; margin: clamp(22px, 5.2svh, 52px) 0 0 var(--hf-inset); width: min(46vw, 640px); }
.hf-wall {
  align-self: end;
  width: min(44vw, 620px);
  margin: 0 0 clamp(16px, 3.4svh, 40px) var(--hf-inset);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hf-head::before, .hf-wall::before {
  content: "";
  position: absolute;
  inset: -60px -90px -50px -100px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(243, 235, 221, .42) 45%, rgba(243, 235, 221, 0));
}
.hf-wall a, .hf-wall button { pointer-events: auto; }
.hf-sub { grid-row: 1; }
.hf-ctl { grid-row: 2; grid-column: 1; }
.hf-picks { grid-row: 3; }
.hf-now { grid-row: 4; }
.hf-page h1 { font-size: min(var(--hf-t-h1), 14svh); line-height: .84; max-width: 6.4em; }
.hf-sub {
  font-size: clamp(1.1875rem, .98rem + .4vw, 1.375rem);
  font-weight: 460;
  line-height: 1.36;
  max-width: 28.5em;
}
.hf-ctl {
  margin-top: clamp(10px, 1.2vw, 18px);
  font-size: clamp(1.125rem, 1rem + .3vw, 1.25rem);
  line-height: 1.4;
  font-weight: 460;
  max-width: 30em;
}
.hf-ctl em { font-weight: 600; }
.hf-w-dye { font-weight: 600; }
.hf-ctl-live, .hf-picks, .hf-now { visibility: hidden; }

.hf-picks { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin-top: 16px; }
.hf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  margin: 0;
  padding: 5px 9px 5px 6px;
  border: 0;
  border-radius: 0;
  background: rgba(247, 241, 230, .93);
  box-shadow: inset 0 0 0 1px rgba(27, 19, 11, .18), 2px 3px 6px -2px rgba(60, 40, 20, .3);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.2;
  transition: box-shadow .24s var(--hf-settle), transform .24s var(--hf-settle), background-color .24s;
}
.hf-chip em { font-weight: 500; }
.hf-chip:hover { transform: translateY(-1px); background: #FCF8F0; }
.hf-chip[aria-checked="true"] { background: #FFFDF8; box-shadow: inset 0 0 0 1.5px var(--hf-ink), inset 0 -4px 0 var(--sw-c, var(--hf-indigo)), 2px 4px 8px -2px rgba(60, 40, 20, .34); }
.hf-chip[data-dye="madder"] { --sw-c: var(--hf-madder); }
.hf-chip[data-dye="walnut"] { --sw-c: var(--hf-walnut); }
.hf-sw { flex: none; width: 21px; height: 30px; box-shadow: inset 0 0 0 1px rgba(27, 19, 11, .2); }
.hf-sw-crepe { background: var(--hf-w-crepe), #F1E8D6; }
.hf-sw-jersey { background: var(--hf-w-jersey), #E6D9C1; }
.hf-sw-linen { background: var(--hf-w-linen), #E1D3B8; }
.hf-sw-georgette { background: var(--hf-w-georgette), linear-gradient(90deg, #FBF8F2, #EFE6D6); }
.hf-sw-voile { background: var(--hf-w-voile), #F4EDE1; }
.hf-sw-undyed { background: var(--hf-w-crepe), #F3EBDD; }
.hf-sw-indigo { background: var(--hf-w-crepe), var(--hf-dip-indigo); }
.hf-sw-madder { background: var(--hf-w-crepe), var(--hf-dip-madder); }
.hf-sw-walnut { background: var(--hf-w-crepe), var(--hf-dip-walnut); }
.hf-sw-help { background: none; box-shadow: none; outline: 1px dashed rgba(27, 19, 11, .45); outline-offset: -1px; }

.hf-now { margin-top: 10px; min-height: 1.45em; font-size: var(--hf-t-small); line-height: 1.45; }
.hf-fresh {
  display: inline;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: var(--hf-t-small);
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: rgba(27, 19, 11, .45);
}
.hf-fresh:hover { text-decoration-color: var(--hf-indigo); color: var(--hf-indigo); }

.hf-js .hf-ctl-live, .hf-js .hf-picks, .hf-js .hf-now { visibility: visible; }
.hf-js .hf-ctl-still { visibility: hidden; }
.hf-js .hf-canvas { display: block; opacity: 0; transition: opacity .5s ease; }
.hf-live .hf-canvas, .hf-live .hf-dye .hf-room { opacity: 1; }
.hf-live .hf-poster { opacity: 0; visibility: hidden; transition: opacity .5s ease .1s, visibility 0s linear .6s; }
.hf-page.hf-nogl :is(.hf-ctl-live, .hf-picks, .hf-now) { visibility: hidden; }
.hf-page.hf-nogl .hf-ctl-still { visibility: visible; }

.hf-gl .hf-length {
  display: block;
  position: absolute;
  z-index: 4;
  left: var(--lx, 40%);
  top: var(--ly, 40%);
  width: var(--lw, 40%);
  height: var(--lh, 30%);
  cursor: grab;
  touch-action: none;
  outline: none;
}
.hf-gl .hf-length:active { cursor: grabbing; }
.hf-page .hf-length:focus-visible { outline: none; }
.hf-grab {
  position: absolute;
  left: calc(var(--gx, 50%) - 17px);
  top: calc(50% - 17px);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--hf-w-crepe), radial-gradient(circle at 36% 30%, #FFFDF7, #EFE6D4 58%, #D8CBB2);
  box-shadow: 0 0 0 1px rgba(27, 19, 11, .55), 3px 4px 7px -1px rgba(40, 25, 10, .5);
  transition: transform .24s var(--hf-settle), box-shadow .2s;
}
.hf-grab svg { width: 17px; height: 17px; fill: none; stroke: var(--hf-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hf-length:hover .hf-grab { transform: scale(1.1); }
.hf-length:active .hf-grab { transform: scale(.94); }
.hf-length:focus-visible .hf-grab { box-shadow: 0 0 0 1px rgba(27, 19, 11, .55), 0 0 0 4px #FFFDF7, 0 0 0 6.5px var(--hf-indigo), 3px 4px 7px -1px rgba(40, 25, 10, .5); }
.hf-touched .hf-length:not(:hover):not(:focus-visible):not(:active) .hf-grab { opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .hf-live:not(.hf-touched) .hf-grab::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(243, 235, 221, .8);
    animation: hf-call 1.8s ease-out 1.2s 3 both;
  }
}
@keyframes hf-call { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }

/* the status and the hint: words on the timber right of the trough, above the length */
.hf-live .hf-tag { display: block; }
.hf-tag {
  position: absolute;
  z-index: 5;
  left: var(--tx, 80%);
  top: var(--ty, 30%);
  width: var(--tw, 260px);
  translate: 0 -100%;
  pointer-events: none;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.hf-tag::before {
  content: "";
  position: absolute;
  inset: -34px -44px -30px -44px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(243, 235, 221, .55) 40%, rgba(243, 235, 221, 0));
}
.hf-tag.hf-tag-off { display: none; }
.hf-status { font-size: 1.25rem; line-height: 1.26; font-weight: 560; }
.hf-status:empty { display: none; }
.hf-status:not(:empty) + .hf-taghint { margin-top: 6px; }
.hf-taghint { font-size: 1.0625rem; line-height: 1.35; }
.hf-taghint > span { display: none; }
.hf-taghint > .hf-hint-drag { display: block; }
.hf-touched .hf-taghint > .hf-hint-drag, .hf-invat .hf-taghint > .hf-hint-drag { display: none; }
.hf-invat .hf-taghint > .hf-hint-lift { display: block; }
.hf-b1-in:has(.hf-length:focus-visible) .hf-taghint > span { display: none; }
.hf-b1-in:has(.hf-length:focus-visible) .hf-taghint > .hf-hint-keys { display: block; }
.hf-touched:not(.hf-invat) .hf-b1-in:not(:has(.hf-length:focus-visible)) .hf-taghint { display: none; }

.hf-b2 { padding: clamp(56px, 7vw, 112px) 0 clamp(72px, 8vw, 128px); }
.hf-hung { display: grid; gap: 0 var(--hf-gap); align-items: start; }
.hf-hung .hf-h2 { max-width: 7.5em; }
.hf-hung .hf-hang p { max-width: 30em; }
.hf-p1 { min-height: min(calc(var(--h1) * 1vw), calc(var(--h1) * 14.4px)); }
.hf-p2 { min-height: min(calc(var(--h2) * 1vw), calc(var(--h2) * 14.4px)); }
.hf-p3 { min-height: min(calc(var(--h3) * 1vw), calc(var(--h3) * 14.4px)); }

.hf-b3 { padding: clamp(40px, 4vw, 64px) 0 clamp(72px, 8vw, 128px); }
.hf-b3-in { display: grid; gap: 0 var(--hf-gap); align-items: start; }
.hf-b3-head .hf-pick { margin-top: 18px; font-size: 1.125rem; max-width: 22em; }
.hf-rail { position: relative; padding-top: 4px; }
.hf-railbar {
  position: absolute;
  left: -4px; right: -4px; top: 4px;
  height: 9px;
  border-radius: 5px;
  background: var(--hf-steel);
  box-shadow: 0 3px 4px -1px rgba(60, 40, 20, .28);
}
.hf-railbar::before, .hf-railbar::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 7px; height: 22px;
  background: linear-gradient(90deg, #8E918F, #C9CBC7 50%, #7C7F7D);
}
.hf-railbar::before { left: 10px; }
.hf-railbar::after { right: 10px; }
.hf-hangers { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-inline: 24px; }
.hf-hanger {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0 0 10px;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 0;
  transition: transform 240ms var(--hf-settle), filter 240ms ease;
}
.hf-flat { display: block; width: min(100%, 118px); height: auto; margin-top: -9px; overflow: visible; }
.hf-f-cloth { fill: #FAF6EE; stroke: var(--hf-ink); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hf-f-line { fill: none; stroke: var(--hf-ink); stroke-width: 1.1px; vector-effect: non-scaling-stroke; }
.hf-f-dash { fill: none; stroke: rgba(27, 19, 11, .5); stroke-width: 1px; stroke-dasharray: 3 2.5; vector-effect: non-scaling-stroke; }
.hf-f-dots circle { fill: #FAF6EE; stroke: var(--hf-ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hf-f-hook { fill: none; stroke: #8E918F; stroke-width: 2.4px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hf-f-bar { fill: var(--hf-timber); stroke: #6E5231; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hf-hname { margin-top: 8px; font-size: 1.0625rem; line-height: 1.3; padding-bottom: 3px; background: linear-gradient(var(--hf-indigo), var(--hf-indigo)) 50% 100% / 0 2px no-repeat; transition: background-size 240ms var(--hf-settle); }
.hf-hanger:hover { transform: rotate(-1.4deg); }
.hf-hanger[aria-checked="true"] { transform: translateY(6px) scale(1.035); filter: drop-shadow(0 12px 10px rgba(70, 46, 20, .2)); }
.hf-hanger[aria-checked="true"] .hf-hname { font-weight: 700; color: var(--hf-indigo); background-size: 100% 2px; }
.hf-hanger[aria-checked="true"] .hf-f-cloth { fill: #FFFDF8; }

.hf-season { position: relative; display: grid; gap: var(--hf-gap); align-items: start; container-type: inline-size; }
.hf-seasonpic { --u: .177; width: 100%; aspect-ratio: 2 / 3; }
.hf-season { --pic-h: 150cqw; }
.hf-seasonpic img { position: absolute; left: 50%; bottom: 0; width: 333%; height: auto; max-width: none; translate: calc(var(--u) * -100%) 0; transition: translate 1.1s var(--hf-recut); }
.hf-page[data-cut="abaya"] .hf-seasonpic { --u: .385; }
.hf-page[data-cut="trousers"] .hf-seasonpic { --u: .595; }
.hf-page[data-cut="tunic"] .hf-seasonpic { --u: .822; }
.hf-notes { min-height: min(calc(var(--hn) * 1vw), calc(var(--hn) * 14.4px)); }
.hf-note > p { max-width: 30em; }
.hf-page .hf-gname {
  position: absolute;
  z-index: 2;
  top: calc(-1 * (var(--pic-h) + var(--hf-gap)) + 18px);
  left: 0;
  width: 100cqw;
  padding: 0 12px;
  text-align: center;
  font-size: clamp(2.75rem, 1.4rem + 4.4vw, 6rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.015em;
  color: var(--hf-ink);
  pointer-events: none;
}
.hf-asides { display: grid; gap: var(--hf-gap); align-items: start; }
.hf-asides .hf-a1 { min-height: min(calc(var(--ha1) * 1vw), calc(var(--ha1) * 14.4px)); }
.hf-asides .hf-a2 { min-height: min(calc(var(--ha2) * 1vw), calc(var(--ha2) * 14.4px)); }

.hf-b4 { padding: 0 0 clamp(80px, 9vw, 140px); }
.hf-b4-in { display: grid; gap: 0 var(--hf-gap); align-items: start; }
.hf-b4-head .hf-lede { margin-top: 18px; max-width: 20em; }
.hf-held { margin-top: 22px; font-size: 1.125rem; max-width: 26em; }
.hf-light {
  --drop: clamp(300px, 34vw, 500px);
  position: relative;
  padding: 26px clamp(12px, 2vw, 34px) 0;
  background:
    linear-gradient(90deg, #0000 calc(50% - 4px), #96806019 0 calc(50% + 4px), #0000 0),
    linear-gradient(0deg, #0000 calc(38% - 4px), #96806014 0 calc(38% + 4px), #0000 0),
    radial-gradient(120% 90% at 50% 20%, #FFFEFA 0%, #FCF7EC 55%, #F1E7D5 100%);
  box-shadow: inset 0 0 0 1px rgba(27, 19, 11, .1), inset 0 -24px 40px -30px rgba(120, 96, 60, .3);
}
.hf-light .hf-railbar { top: 18px; left: 6px; right: 6px; }
.hf-drops {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 1.1fr .96fr 1.06fr 1.02fr;
  gap: clamp(8px, 1.6vw, 26px);
  align-items: start;
  padding-top: 8px;
}
.hf-drop {
  position: relative;
  display: block;
  height: calc(var(--drop) * var(--dl, 1));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  container-type: size;
}
.hf-behind { position: absolute; inset: 0; display: grid; place-items: center; }
.hf-giant {
  writing-mode: vertical-rl;
  font-style: italic;
  font-weight: var(--gw);
  font-size: min(calc(90cqh / var(--fw)), 78cqw);
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  color: var(--hf-ink);
}
.hf-veil {
  position: absolute;
  inset: 0;
  opacity: var(--veil);
  background:
    var(--hf-stitch) 0 calc(100% - 12px) / 100% 1px no-repeat,
    radial-gradient(circle at 22% 5px, #D9DBD6 0 3px, #8E918F 3.2px 4.4px, transparent 4.6px),
    radial-gradient(circle at 78% 5px, #D9DBD6 0 3px, #8E918F 3.2px 4.4px, transparent 4.6px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0, rgba(90, 70, 40, .07) 11%, rgba(255, 255, 255, .12) 19%, rgba(90, 70, 40, .05) 27%, rgba(255, 255, 255, 0) 33%),
    var(--weave),
    var(--vc);
  box-shadow: 0 8px 14px -10px rgba(60, 40, 20, .55);
  transition: transform 420ms var(--hf-settle);
}
.hf-cl-crepe { --dl: .92; --veil: .96; --vc: #E3D9C6; --fw: 2.37; --gw: 420; --weave: var(--hf-w-crepe); }
.hf-cl-jersey { --dl: .84; --veil: .98; --vc: #D8CAB0; --fw: 2.67; --gw: 700; --weave: var(--hf-w-jersey); }
.hf-cl-linen { --dl: .96; --veil: .8; --vc: #E0D3B9; --fw: 2.39; --gw: 560; --weave: var(--hf-w-linen); }
.hf-cl-georgette { --dl: 1; --veil: .44; --vc: #F8F3EA; --fw: 3.88; --gw: 440; --weave: var(--hf-w-georgette); }
.hf-cl-voile { --dl: .97; --veil: .55; --vc: #F4EDE1; --fw: 4.8; --gw: 400; --weave: var(--hf-w-voile); }
.hf-drop:hover .hf-veil, .hf-drop:focus-visible .hf-veil, .hf-drop[aria-checked="true"] .hf-veil { transform: translateY(-76%); }
.hf-drop:focus-visible { outline-offset: -3px; }
.hf-cdescs { display: grid; }
.hf-cdesc { display: grid; row-gap: .55em; align-content: start; }
.hf-cdesc + .hf-cdesc { margin-top: 36px; }
.hf-cdesc h3 { font-family: var(--hf-serif); font-size: calc(var(--hf-t-h3) * 1.2); font-weight: 600; line-height: 1.05; }
.hf-cdesc p { max-width: 34ch; }
.hf-tovat { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 1rem; justify-self: start; }
.hf-tovat svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hf-js .hf-cdesc[hidden] { display: none; }
.hf-js .hf-cdesc + .hf-cdesc { margin-top: 0; }

.hf-b5 { padding: clamp(64px, 8vw, 128px) 0 clamp(72px, 8vw, 128px); }
.hf-making { --step: clamp(64px, 7.6vw, 136px); display: grid; align-items: start; }
.hf-b5 .hf-h2 { font-size: var(--hf-t-h2-big); line-height: .82; }
.hf-tack { position: relative; padding-top: 22px; }
.hf-tack h3 { display: inline-block; margin-bottom: .3em; padding-bottom: 5px; background: linear-gradient(var(--hf-cream), var(--hf-cream)) 0 100% / 100% 2px no-repeat; }
.hf-tack p { max-width: 30ch; }
.hf-sx, .hf-sy { position: absolute; pointer-events: none; }
.hf-sx { left: 0; top: 0; right: calc(-1 * var(--hf-gap)); height: 2px; background: var(--hf-stitch-c); }
.hf-sy { right: calc(-1 * var(--hf-gap)); top: 0; width: 2px; height: var(--step); background: repeating-linear-gradient(180deg, rgba(243, 235, 221, .6) 0 6px, transparent 6px 11px); }
.hf-tack:last-child .hf-sx { right: 0; }
.hf-tie {
  position: absolute;
  left: -15px; top: -4px;
  width: 30px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M4 5h22' stroke='%23F3EBDD' stroke-width='2.6'/%3E%3Cpath d='M.8 1.8l4.4 6.4m0-6.4L.8 8.2m24-6.4 4.4 6.4m0-6.4-4.4 6.4' stroke='%23F3EBDD' stroke-width='1.1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.hf-pin { width: min(100%, 420px); }
.hf-close { font-family: var(--hf-disp); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); font-weight: 300; line-height: 1; max-width: 12em; }

.hf-b6 { padding: clamp(72px, 8vw, 128px) 0 clamp(72px, 8vw, 120px); }
.hf-b6-in { display: grid; gap: 48px var(--hf-gap); align-items: start; }
.hf-page .hf-big { font-size: var(--hf-t-h2-big); line-height: .82; }
.hf-b6-text > * + * { margin-top: 1em; }
.hf-b6-text > h2 + p { margin-top: 36px; }
.hf-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hf-lentab { width: 100%; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.hf-lentab caption { caption-side: bottom; text-align: left; padding-top: 16px; font-size: 1rem; }
.hf-lentab th, .hf-lentab td { padding: 0; font-weight: 400; text-align: right; }
.hf-lentab thead th { padding-bottom: 12px; font-size: 1.0625rem; font-style: italic; }
.hf-lentab tbody th { text-align: left; font-family: var(--hf-disp); font-size: var(--hf-t-h3); font-weight: 700; line-height: 1; padding-right: 12px; }
.hf-lentab tbody td { font-family: var(--hf-disp); font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4.25rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; padding-left: clamp(10px, 2vw, 32px); }
.hf-lentab tbody tr { background: var(--hf-stitch) 0 100% / 100% 1px no-repeat; transition: color .3s; }
.hf-lentab tbody :is(th, td) { padding-block: 14px 12px; }
.hf-page[data-cut="dress"] .hf-len-dress, .hf-page[data-cut="abaya"] .hf-len-abaya, .hf-page[data-cut="trousers"] .hf-len-trousers, .hf-page[data-cut="tunic"] .hf-len-tunic { color: var(--hf-indigo); background: linear-gradient(var(--hf-indigo), var(--hf-indigo)) 0 100% / 100% 2px no-repeat; }
.hf-page[data-cut="dress"] .hf-len-dress td, .hf-page[data-cut="abaya"] .hf-len-abaya td, .hf-page[data-cut="trousers"] .hf-len-trousers td, .hf-page[data-cut="tunic"] .hf-len-tunic td { font-weight: 700; }
.hf-lennote { margin-top: 10px; font-size: 1rem; }
.hf-page:not(.hf-js) .hf-pick { display: none; }

.hf-b7 { padding: 0 0 clamp(72px, 8vw, 128px); }
.hf-line img { height: clamp(360px, 68svh, 760px); object-fit: cover; object-position: 50% 42%; }
.hf-b7-in { display: grid; gap: 0 var(--hf-gap); align-items: start; }
.hf-b7 .hf-h2 { padding-top: clamp(40px, 5vw, 72px); }
.hf-scarves li { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline; padding: 14px 0 16px; border-top: 1px solid rgba(27, 19, 11, .2); }
.hf-scarves li:first-child { border-top: 0; padding-top: 0; }
.hf-scarves em { font-size: var(--hf-t-h3); line-height: 1.2; }
.hf-dim { font-variant-numeric: lining-nums tabular-nums; font-size: 1.0625rem; }
.hf-sn { grid-column: 1 / -1; }
.hf-dips { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; margin-top: 36px; }
.hf-dipsvg { width: 150px; height: auto; overflow: visible; }
.hf-dipline { fill: none; stroke: #8E7A5C; stroke-width: 1.2; }
.hf-peg { fill: var(--hf-timber); }
.hf-scarfnote { max-width: 26em; }

.hf-b8 { padding: clamp(72px, 8vw, 128px) 0 clamp(88px, 10vw, 160px); }
.hf-b8-in { display: grid; gap: 28px var(--hf-gap); align-items: start; }
.hf-b8 .hf-h2 { font-size: var(--hf-t-h2-big); line-height: .82; }
.hf-care { padding-top: 16px; background: var(--hf-stitch-c) 0 0 / 100% 1px no-repeat; }

.hf-b9 { padding: clamp(80px, 9vw, 150px) 0 0; }
.hf-page .hf-biggest { font-size: var(--hf-t-h2-big); line-height: .82; }
.hf-b9-in { display: grid; gap: 0 var(--hf-gap); align-items: start; }
.hf-in > .hf-b9-lede { max-width: 30em; margin-top: 28px; }
.hf-form { display: grid; gap: 34px; margin-top: 64px; }
.hf-fields, .hf-msg { display: grid; gap: 30px; align-content: start; min-width: 0; }
.hf-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.hf-field > label, .hf-field > legend, .hf-flabel { font-size: 1rem; font-weight: 600; padding: 0; }
.hf-field input[type="text"], .hf-field select, .hf-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 8px 0 9px;
  border: 0;
  border-bottom: 1px solid var(--hf-ink);
  border-radius: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  font-variant-numeric: lining-nums tabular-nums;
}
.hf-field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.hf-field ::placeholder { color: rgba(27, 19, 11, .6); opacity: 1; }
.hf-selectwrap { position: relative; display: block; }
.hf-selectwrap::after { content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border: solid var(--hf-ink); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.hf-field select { appearance: none; padding-right: 28px; cursor: pointer; }
.hf-chipset legend { margin-bottom: 10px; }
.hf-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.hf-fchip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 5px 13px 5px 6px;
  background: #F8F4EC;
  box-shadow: inset 0 0 0 1px rgba(27, 19, 11, .2);
  font-size: 1.0625rem;
  line-height: 1.2;
  cursor: pointer;
  transition: box-shadow .24s var(--hf-settle), background-color .24s;
}
.hf-fchip-plain { padding-left: 13px; }
.hf-fchip .hf-sw { width: 24px; }
.hf-fchip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hf-fchip:hover { background: #FCF8F0; }
.hf-fchip:has(input:checked) { background: #FFFDF8; box-shadow: inset 0 0 0 1.5px var(--hf-ink), inset 0 -4px 0 var(--sw-c, var(--hf-indigo)); }
.hf-fchip:has(input[value="madder"]) { --sw-c: var(--hf-madder); }
.hf-fchip:has(input[value="walnut"]) { --sw-c: var(--hf-walnut); }
.hf-fchip:has(input[value="undyed"]) { --sw-c: #C9BBA2; }
.hf-fchip:has(input:focus-visible) { outline: 2px solid var(--hf-indigo); outline-offset: 2px; }
.hf-fchip em { font-weight: 500; }
.hf-dipcard { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: center; padding: 10px 14px 10px 10px; background: #F8F4EC; box-shadow: inset 0 0 0 1px rgba(27, 19, 11, .16); }
.hf-dipsw { grid-row: 1 / span 2; width: 38px; height: 76px; background: var(--hf-w-crepe), var(--hf-dyed); box-shadow: inset 0 0 0 1px rgba(27, 19, 11, .2), 2px 3px 5px -2px rgba(60, 40, 20, .35); }
.hf-diptext { font-size: 1rem; line-height: 1.4; }
.hf-dipclear { justify-self: start; margin: 0; padding: 6px 0; border: 0; background: none; cursor: pointer; font-size: 1rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(27, 19, 11, .45); }
.hf-dipclear[hidden] { display: none; }
.hf-help { font-size: 1rem; }
.hf-sendbtn {
  min-height: 52px;
  padding: 14px 30px;
  border: 0;
  border-radius: 0;
  background: var(--hf-ink);
  cursor: pointer;
  font-weight: 600;
  box-shadow: inset 0 0 0 0 var(--hf-indigo);
  transition: box-shadow .24s var(--hf-settle);
}
.hf-page .hf-sendbtn { color: var(--hf-cream); }
.hf-sendbtn:hover { box-shadow: inset 0 -5px 0 0 #5C66A8; }
.hf-formstatus { margin-top: 12px; min-height: 1.5em; font-size: 1rem; }
.hf-hemline {
  --fit: 7.8;
  display: flex;
  flex-wrap: wrap;
  column-gap: .22em;
  margin-top: clamp(80px, 9vw, 140px);
  font-family: var(--hf-disp);
  font-size: min(15rem, calc((min(100vw, 1600px + 2 * var(--hf-inset)) - 2 * var(--hf-inset)) * .97 / var(--fit)));
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.hf-page .hf-in > .hf-hemline { max-width: none; }
.hf-sign { margin-top: 48px; padding-bottom: 44px; font-size: 1.125rem; }
.hf-bh { height: clamp(96px, 14vh, 180px); background: var(--hf-stitch-c) 0 18px / 100% 1px no-repeat, var(--hf-stitch-c) 0 30px / 100% 1px no-repeat, var(--hf-w-crepe), var(--hf-dyed); }

@media (min-width: 1024px) {
  .hf-hung { grid-template-columns: var(--b2c); grid-template-rows: auto 1fr; }
  .hf-hung .hf-h2 { grid-column: 1; grid-row: 1 / span 2; padding-top: 40px; }
  .hf-hung .hf-rod { grid-column: 2 / -1; grid-row: 1; margin-right: calc(-1 * var(--hf-inset)); border-radius: 5px 0 0 5px; }
  .hf-hung .hf-hang { grid-row: 2; }
  .hf-p1 { grid-column: 2; }
  .hf-p2 { grid-column: 3; }
  .hf-p3 { grid-column: 4; }
  .hf-b3-in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hf-b3-head { grid-column: 1 / span 4; grid-row: 1; padding-top: 20px; }
  .hf-rail { grid-column: 5 / -1; grid-row: 1; }
  .hf-season { grid-column: 1 / span 9; grid-row: 2; margin-top: 56px; grid-template-columns: calc(var(--sf) * 1%) minmax(0, 1fr); }
  .hf-page .hf-season .hf-gname { top: clamp(14px, 1.8vw, 26px); left: calc(-1 * (var(--sf) * 1cqw + var(--hf-gap))); width: calc(var(--sf) * 1cqw); }
  .hf-asides { grid-column: 10 / -1; grid-row: 2; margin-top: 56px; }
  .hf-b4-in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hf-table { grid-column: 1 / span 7; grid-row: 1; }
  .hf-b4-head { grid-column: 9 / -1; grid-row: 1; padding-top: clamp(40px, 5vw, 80px); }
  .hf-cdescs { grid-column: 1 / span 3; grid-row: 2; margin-top: 64px; }
  .hf-light { grid-column: 4 / -1; grid-row: 2; margin-top: 64px; }
  .hf-making { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--hf-gap); }
  .hf-making > .hf-h2 { grid-column: 3 / -1; grid-row: 1; justify-self: end; text-align: right; }
  .hf-tacks { display: contents; }
  .hf-tack { grid-row: 1; }
  .hf-tack:nth-child(1) { grid-column: 1; margin-top: 0; }
  .hf-tack:nth-child(2) { grid-column: 2; margin-top: var(--step); }
  .hf-tack:nth-child(3) { grid-column: 3; margin-top: calc(2 * var(--step)); }
  .hf-tack:nth-child(4) { grid-column: 4; margin-top: calc(3 * var(--step)); }
  .hf-tack:nth-child(5) { grid-column: 5; margin-top: calc(4 * var(--step)); }
  .hf-pin { grid-column: 1 / span 2; grid-row: 2; margin-top: calc(-1.4 * var(--step)); }
  .hf-close { grid-column: 3 / span 2; grid-row: 2; align-self: end; }
  .hf-b6-in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hf-b6-text { grid-column: 1 / span 6; }
  .hf-lens { grid-column: 8 / -1; padding-top: 12px; }
  .hf-b7-in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hf-b7 .hf-h2 { grid-column: 1 / span 5; grid-row: 1; }
  .hf-dips { grid-column: 1 / span 5; grid-row: 2; }
  .hf-scarves { grid-column: 7 / -1; grid-row: 1 / span 2; min-height: 30vw; }
  .hf-b8-in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hf-b8 .hf-h2 { grid-column: 1 / span 6; grid-row: 1 / span 2; }
  .hf-c1 { grid-column: 7 / span 3; grid-row: 1; }
  .hf-c2 { grid-column: 10 / span 3; grid-row: 1; margin-top: 88px; }
  .hf-c3 { grid-column: 7 / span 3; grid-row: 2; margin-top: 24px; }
  .hf-c4 { grid-column: 10 / span 3; grid-row: 2; margin-top: 96px; }
  .hf-b9-in { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hf-b9-in > :is(.hf-h2, .hf-hemline, .hf-sign) { grid-column: 1 / -1; }
  .hf-b9-lede { grid-column: 1 / span 7; }
  .hf-form { grid-column: 1 / -1; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--hf-gap); }
  .hf-fields { grid-column: 1 / span 7; }
  .hf-msg { grid-column: 9 / -1; padding-top: 12px; }
}

.hf-nav { view-transition-name: hf-nav; }
::view-transition-group(*.hf-c) { animation-duration: 1000ms; animation-timing-function: linear(0, .08 10%, .2 20%, .34 30%, .5 40%, .66 50%, .8 60%, .91 70%, .98 80%, 1.01 90%, 1); }
::view-transition-old(*.hf-l), ::view-transition-new(*.hf-l) { block-size: 100%; overflow: visible; object-fit: none; object-position: left top; }
::view-transition-old(*.hf-s), ::view-transition-new(*.hf-s) { block-size: 100%; inline-size: 100%; object-fit: fill; }
::view-transition-old(*.hf-c) { animation: hf-out 320ms ease-in-out both; }
::view-transition-new(*.hf-c) { animation: hf-in 320ms ease-in-out both; }
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; }
@keyframes hf-out { to { opacity: 0; } }
@keyframes hf-in { from { opacity: 0; } }
.hf-hold { overflow-anchor: none; }
.hf-clip { clip-path: polygon(-100vw var(--clip), calc(100% + 100vw) var(--clip), calc(100% + 100vw) calc(100% + 100vh), -100vw calc(100% + 100vh)); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hf-rv { animation: hf-drop linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .hf-sx { animation: hf-sewx linear both; animation-timeline: view(); animation-range: cover calc(50vh - 30px) cover calc(50vh + 110px); }
    .hf-sy { animation: hf-sewy linear both; animation-timeline: view(); animation-range: cover calc(50vh + 80px) cover calc(50vh + 80px + var(--step)); }
    .hf-tie { animation: hf-tie linear both; animation-timeline: view(); animation-range: cover calc(50vh - 50px) cover calc(50vh + 10px); }
    .hf-tack h3 { animation: hf-thread linear both; animation-timeline: view(); animation-range: cover calc(50vh - 40px) cover calc(50vh + 60px); }
  }
}
@keyframes hf-drop { from { opacity: 0; translate: 0 -10px; } 70% { opacity: 1; translate: 0 1.5px; } to { opacity: 1; translate: 0 0; } }
@keyframes hf-sewx { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hf-sewy { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hf-tie { from { transform: scale(.2, .6); opacity: .3; } to { transform: scale(1); opacity: 1; } }
@keyframes hf-thread { from { background-size: 0 2px; } to { background-size: 100% 2px; } }

@media (min-width: 1024px) and (max-height: 820px) {
  .hf-sub { font-size: min(1.25rem, 2.7svh); }
  .hf-ctl { display: none; }
  .hf-picks { margin-top: 10px; gap: 6px; }
  .hf-chip { min-height: 38px; padding-block: 3px; }
  .hf-sw { height: 26px; }
  .hf-now { margin-top: 2px; }
}
@media (min-width: 1024px) and (max-width: 1259.98px) {
  .hf-head { width: 50%; }
  .hf-wall { width: 62%; }
  .hf-sub { max-width: 23.5em; }
}

@media (max-width: 1023.98px) {
  .hf-b1 { --win-h: clamp(420px, min(calc(100svh - 330px), 90vw), 760px); }
  /* the words that are not the headline go under the window, beside nothing */
  .hf-b1-in { grid-template-areas: "win" "picks" "sub" "tag" "now"; }
  .hf-head { margin: clamp(22px, 4svh, 44px) 0 0 var(--hf-inset); width: auto; }
  .hf-head::before { display: none; }
  .hf-wall { display: contents; }
  .hf-wall::before { display: none; }
  .hf-ctl { display: none; }
  .hf-picks { grid-area: picks; margin: 18px var(--hf-inset) 0; gap: 8px 16px; }
  .hf-page:is(:not(.hf-js), .hf-nogl) :is(.hf-picks, .hf-now) { display: none; }
  .hf-sub { grid-area: sub; margin: 18px var(--hf-inset) 0; max-width: 34em; }
  .hf-now { grid-area: now; margin: 6px var(--hf-inset) 32px; }
  .hf-fresh { padding: 10px 0; }
  .hf-tag { grid-area: tag; position: relative; left: auto; top: auto; width: auto; translate: none; margin: 16px var(--hf-inset) 0; padding-left: 12px; box-shadow: inset 2px 0 0 var(--hf-indigo); }
  .hf-tag::before { display: none; }
  .hf-hung .hf-h2 { margin-bottom: 36px; }
  .hf-b3-head { margin-bottom: 28px; }
  .hf-rail { margin-bottom: 36px; }
  .hf-b4-head { margin: 40px 0 0; }
  .hf-light, .hf-cdescs { margin-top: 40px; }
  .hf-making > .hf-h2 { margin-bottom: 32px; }
  .hf-tack { margin-left: calc(var(--i) * 6%); margin-top: 28px; }
  .hf-tack:nth-child(1) { --i: 0; } .hf-tack:nth-child(2) { --i: 1; } .hf-tack:nth-child(3) { --i: 2; } .hf-tack:nth-child(4) { --i: 3; } .hf-tack:nth-child(5) { --i: 4; }
  .hf-sx { right: 0; }
  .hf-tack { padding-left: 24px; }
  .hf-sy { right: auto; left: 0; height: calc(100% + 28px); }
  .hf-making { --step: 160px; }
  .hf-pin { margin-top: 48px; }
  .hf-close { margin-top: 32px; }
  .hf-b7 .hf-h2 { margin-bottom: 28px; }
  .hf-scarves { margin-top: 36px; }
  .hf-c2, .hf-c4 { margin-left: 12%; }
}
@media (min-width: 700px) and (max-width: 1023.98px) {
  .hf-hung { grid-template-columns: .8fr 1fr .9fr; }
  .hf-hung .hf-h2, .hf-hung .hf-rod { grid-column: 1 / -1; }
  .hf-hung .hf-rod { margin-right: calc(-1 * var(--hf-inset)); }
  .hf-p1 { --h1: 36; } .hf-p2 { --h2: 48; } .hf-p3 { --h3: 58; }
  .hf-page .hf-season { grid-template-columns: 52% minmax(0, 1fr); }
  .hf-page .hf-season .hf-gname { top: clamp(14px, 1.8vw, 26px); left: calc(-52cqw - var(--hf-gap)); width: 52cqw; }
  .hf-asides { grid-template-columns: 1fr 1.2fr; margin-top: var(--hf-gap); }
  .hf-b4-in { grid-template-columns: 1fr 1fr; }
  .hf-b4-in > :is(.hf-table, .hf-light) { grid-column: 1 / -1; }
  .hf-b4-head { grid-column: 1 / -1; }
  .hf-cdescs { grid-column: 1 / -1; }
  .hf-b6-in { grid-template-columns: 1fr; }
  .hf-lens { max-width: 640px; }
  .hf-b8-in { grid-template-columns: 1fr 1fr; }
  .hf-b8 .hf-h2 { grid-column: 1 / -1; }
  .hf-c2, .hf-c4 { margin-left: 0; margin-top: 56px; }
  .hf-hemline { font-size: calc((100vw - 2 * var(--hf-inset)) * .97 / var(--fit)); }
}

@media (max-width: 699.98px) {
  .spec-hemfall { --hf-inset: 16px; }
  .hf-nav { height: 52px; gap: 14px; }
  .hf-links, .hf-ask-long { display: none; }
  .hf-ask-short { display: inline; }
  .hf-brand { font-size: 27px; gap: 9px; }
  .hf-mark { width: 28px; height: 28px; }
  .hf-b1 { --win-h: clamp(292px, calc(100svh - 348px), 520px); }
  .hf-head { margin: calc(var(--win-h) * .06 + 4px) 0 0 16px; }
  .hf-page h1 { font-size: clamp(2.25rem, 11.6vw, 3.25rem); max-width: 5.2em; }
  .hf-picks { margin: 12px 16px 0; }
  .hf-chip { min-height: 44px; padding: 5px 11px 5px 6px; gap: 7px; font-size: 1rem; }
  .hf-sw { width: 22px; height: 30px; }
  .hf-sub { margin: 14px 16px 0; font-size: clamp(1.0625rem, .9rem + .9vw, 1.1875rem); }
  .hf-now { margin: 4px 16px 26px; }
  .hf-tag { margin: 12px 16px 0; }
  .hf-status { font-size: 1.125rem; }
  .hf-taghint { font-size: 1rem; }
  .hf-hung .hf-rod { margin-inline: calc(-1 * var(--hf-inset)); border-radius: 0; }
  .hf-hung .hf-hang { min-height: 0; }
  .hf-p1 { width: 86%; }
  .hf-p2 { width: 100%; margin-top: 14px; }
  .hf-p3 { width: 78%; justify-self: end; margin-top: 14px; }
  .hf-page[data-cut="abaya"] :is(.hf-p1, .hf-p3) { width: 100%; }
  .hf-page[data-cut="tunic"] :is(.hf-p1, .hf-p2, .hf-p3) { width: 92%; }
  .hf-page[data-cut="trousers"] .hf-p2 { width: 70%; justify-self: center; }
  .hf-hangers { gap: 2px; padding-inline: 8px; }
  .hf-flat { width: min(100%, 84px); }
  .hf-hname { font-size: 1rem; text-align: center; }
  .hf-season .hf-seasonpic { aspect-ratio: 4 / 5; }
  .hf-season { --pic-h: 125cqw; }
  .hf-notes, .hf-asides .hf-hang { min-height: 0; }
  .hf-asides { margin-top: var(--hf-gap); }
  .hf-asides .hf-a2 { width: 90%; justify-self: end; }
  .hf-light { --drop: clamp(250px, 80vw, 330px); padding-inline: 8px; }
  .hf-drops { gap: 5px; }
  .hf-table { margin-inline: calc(-1 * var(--hf-inset)); }
  .hf-tack { margin-left: calc(var(--i) * 4%); }
  .hf-b6-in { gap: 40px; }
  .hf-scarves li { grid-template-columns: 1fr; }
  .hf-dips { grid-template-columns: 1fr; }
  .hf-line img { height: auto; aspect-ratio: 4 / 5; }
  .hf-scarves { margin-inline: 0; }
  .hf-c2, .hf-c4 { margin-left: 10%; }
  .hf-hemline { font-size: calc((100vw - 32px) * .97 / var(--fit)); }
}
@media (max-width: 359.98px) {
  .hf-nav { gap: 10px; padding: 0 12px; }
  .hf-brand { font-size: 24px; }
  .hf-chip { padding: 5px 9px 5px 5px; gap: 6px; }
  .hf-sw { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-page *, .hf-page *::before, .hf-page *::after { transition-duration: 0s !important; animation: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}