/* The catalogue opens after dusk, the studio products remain on warm chalk. */
body.home {
  --horizon-night: #101726;
  --horizon-ink: #142338;
  --horizon-silver: #d5e6f1;
  --horizon-amber: #eabe8b;
  --evening-photo: url("assets/ownhours-evening-light.webp?v=2.10.1");
}
body.home .oh-launch-band {background:#1d3043;color:#e5e8e9}
body.home .mast {position:relative;inset:auto;background:var(--horizon-night);color:#e8eaf0;border-bottom:1px solid #344153}
body.home .mast .wordmark img {filter:brightness(0) invert(94%)}
body.home .mast-inner::after {display:none}
body.home .mast nav a {color:#e2e6ea}
body.home .mast nav a:hover {text-decoration-color:var(--horizon-amber)}

.catalogue-home .catalogue-cover {
  --cover-pad:clamp(26px,4.8vw,105px);
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.23fr);
  align-items:center;gap:clamp(32px,3.8vw,78px) clamp(16px,3vw,75px);
  position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:none;
  padding:clamp(42px,5vw,96px) var(--cover-pad) clamp(20px,2.4vw,44px);
  background-color:var(--horizon-night);color:#fff7e9;
}
.catalogue-home .catalogue-cover::before {
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(270deg,#081a2f70 0%,#081a2f70 22%,transparent 43%),linear-gradient(0deg,#07132629,#0a182b35 60%,#101a2d5c),var(--evening-photo);
  background-size:cover;background-position:center 62%;transform:scaleX(-1);
}
.catalogue-cover::after {
  content:"";position:absolute;height:1px;inset:auto 0 0;pointer-events:none;
  background:linear-gradient(90deg,#7d96ae15,#b5d7e1 32%,#e4bf91 72%,#7c92a915);
}
.catalogue-home .cover-head {align-self:center;order:initial;padding:0;max-width:36rem}
.catalogue-home .cover-head .eyebrow {color:#d7e7ed;letter-spacing:.2em}
.catalogue-home .cover-head .eyebrow .rule,.reverse-study .eyebrow .rule {
  width:clamp(34px,4vw,70px);height:1px;
  background:linear-gradient(90deg,#c5e7f000,#b2d6ef 45%,#e4b381);
}
.catalogue-home .cover-head :is(h1,h2) {
  margin:.18em 0 .20em;font-size:clamp(76px,8.1vw,165px);line-height:.83;
  letter-spacing:-.082em;color:#fff6e9;
}
.catalogue-home .cover-head :is(h1,h2) em {
  display:block;color:var(--horizon-silver);font-weight:400;letter-spacing:-.075em;
}
.catalogue-home .cover-description {max-width:33ch;color:#e0e5e8;line-height:1.52;font-size:clamp(14px,1.08vw,18px)}
.cover-explore {
  display:inline-flex;align-items:center;justify-content:space-between;gap:clamp(15px,2vw,44px);
  min-height:44px;margin-top:clamp(16px,2.3vw,42px);padding:8px 0;border-bottom:1px solid #a7bfca;
  color:#f7f1e7;font-weight:600;letter-spacing:.01em;font-size:13px;text-decoration:none;
}
.cover-explore span {color:var(--horizon-amber);font-size:17px}
.cover-explore:hover {border-color:var(--horizon-amber)}
.catalogue-home .cover-picture {
  order:initial;align-self:center;justify-self:end;aspect-ratio:3/2;width:100%;height:auto;
  outline:1px solid #b4c5cc94;outline-offset:4px;
  box-shadow:0 12px 65px #060b1670;
}
.catalogue-home .cover-picture picture,.catalogue-home .cover-picture img {height:100%;width:100%;object-fit:contain}
.cover-shopping {grid-column:1/-1;scroll-margin-top:12px}
.catalogue-home .cover-offers {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin:0;background:#101c2aeb;border:1px solid #7790a29c;
}
.catalogue-home .cover-offers>a {
  display:grid;grid-template: "photo label price arrow" auto / minmax(42px,65px) minmax(0,1fr) auto 14px;
  gap:clamp(9px,.9vw,20px);padding:clamp(10px,1.2vw,22px);
  min-height:80px;border:0;color:#faf1e7;
}
.catalogue-home .cover-offers>a+a {border-left:1px solid #778b9a80}
.catalogue-home .cover-offers>a:hover {background:#263b4d}
.catalogue-home .cover-offers .offer-photo {width:100%;height:auto;aspect-ratio:1;grid-area:photo;background:#e1e5e1}
.cover-shopping .offer-name {grid-area:label}
.cover-shopping .offer-name small {color:#bdcdd8}
.cover-shopping .offer-name strong {font-weight:500;margin-top:2px}
.cover-shopping .offer-price {grid-area:price}
.cover-shopping .cover-offers i {grid-area:arrow;color:#e4b381}
.cover-shopping .cover-delivery {max-width:none;color:#dce5ea;margin:9px 0 0;font-size:11px}
.catalogue-home .piece-catalogue {background:#f4f3ef}
.catalogue-home .piece-photo {background:#e5e8e4}
.catalogue-home .look-catalogue {background:#dde4e5}
.catalogue-home .look-catalogue .catalogue-title h2 em {color:#405f71}

.catalogue-home .reverse-study {
  position:relative;isolation:isolate;overflow:hidden;border:0;color:#f5f4ee;
  background-color:#131d30;
  background-image:linear-gradient(180deg,#0e172b24,#121d33b8),var(--evening-photo);
  background-position:center 33%;background-size:cover;
  padding-block:clamp(48px,5.8vw,112px) clamp(40px,6.8vw,140px);
}
.catalogue-home .reverse-study>.frame {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;
  gap:clamp(20px,2.5vw,48px) clamp(12px,2vw,36px);
}
.catalogue-home .reverse-study header {grid-column:1/-1;display:flex;flex-direction:column;align-items:flex-start}
.catalogue-home .reverse-study .eyebrow {color:#d2e5ef}
.catalogue-home .reverse-study h2 {
  font-size:clamp(65px,7vw,140px);line-height:.92;letter-spacing:-.07em;color:#fbf5eb;margin-top:.17em;
}
.catalogue-home .reverse-study h2 em {color:#bfd9e7}
.catalogue-home .reverse-portrait {outline:1px solid #bccdda65;outline-offset:3px}
.catalogue-home .reverse-portrait:nth-of-type(2) {margin-top:clamp(18px,3vw,65px)}
.catalogue-home .reverse-portrait:nth-of-type(3) {margin-top:clamp(38px,6vw,125px)}
body.home :is(.mast,.catalogue-cover,.reverse-study) :focus-visible {outline:2px solid #ffce95;outline-offset:3px}

@media(min-width:1800px) {
  .catalogue-home .catalogue-cover {padding-inline:max(var(--cover-pad),calc((100vw - 1770px)/2))}
}
@media(min-width:651px) and (max-width:1000px) {
  .catalogue-home .catalogue-cover {--cover-pad:4vw;grid-template-columns:minmax(0,.78fr) minmax(0,1.14fr);column-gap:4vw}
  .catalogue-home .cover-head :is(h1,h2) {font-size:clamp(62px,9vw,84px)}
  .catalogue-home .cover-offers>a {grid-template:"photo price" auto "label label" auto / minmax(35px,52px) 1fr;gap:7px 12px}
  .cover-shopping .offer-price {justify-self:end}
  .cover-shopping .cover-offers i {display:none}
}
@media(max-width:650px) {
  .catalogue-home .catalogue-cover {
    --cover-pad:clamp(18px,5vw,28px);display:grid;grid-template-columns:1fr;gap:20px;
    padding:30px var(--cover-pad) 17px;
  }
  .catalogue-home .catalogue-cover::before {
    transform:none;background-image:linear-gradient(180deg,transparent 38%,var(--horizon-night) 64%),linear-gradient(100deg,#08162480,#0e1a352b 72%),var(--evening-photo);
    background-size:cover,cover,auto 67%;background-position:center,center,70% -30px;background-repeat:no-repeat;
  }
  .catalogue-home .cover-head {width:auto;max-width:none}
  .catalogue-home .cover-head :is(h1,h2) {font-size:clamp(52px,12.7vw,78px);margin:.23em 0 .18em;line-height:.93}
  .catalogue-home .cover-head :is(h1,h2) em {display:inline}
  .catalogue-home .cover-head .eyebrow {font-size:9px}
  .catalogue-home .cover-description {max-width:36ch;font-size:14px}
  .cover-explore {margin-top:4px;min-height:39px}
  .catalogue-home .cover-picture {aspect-ratio:4/5;width:100%;max-height:none}
  .cover-shopping {grid-column:1;min-width:0}
  .catalogue-home .cover-offers>a {
    grid-template: "photo" auto "label" auto "price" auto / minmax(0,1fr);
    align-content:start;justify-items:start;gap:5px;padding:8px;min-height:108px;
  }
  .catalogue-home .cover-offers .offer-photo {width:37px;height:37px}
  .cover-shopping .offer-name strong {font-size:11px}
  .cover-shopping .offer-name small {font-size:8px}
  .cover-shopping .offer-price {font-size:20px}
  .cover-shopping .cover-offers i {display:none}
  .catalogue-home .reverse-study>.frame {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 13px}
  .catalogue-home .reverse-study header {grid-column:1/-1}
  .catalogue-home .reverse-study h2 {font-size:clamp(46px,12.7vw,72px)}
  .catalogue-home .reverse-portrait {margin:0;align-self:start!important}
  .catalogue-home .reverse-portrait:nth-of-type(1) {grid-column:1;grid-row:2}
  .catalogue-home .reverse-portrait:nth-of-type(2) {grid-column:2;grid-row:2;margin-top:20px}
  .catalogue-home .reverse-portrait:nth-of-type(3) {grid-column:1/-1;width:calc(50% - 7px);justify-self:center;margin:0}
}
