/* Three ADDICTED product-line editorials. The source photography sets the colour. */
.line-page { --line-accent:#d9ff00; --line-tint:#f5f6f5; color:#17181c; background:#fff; }
.line-page--pride { --line-accent:#ff6caa; --line-tint:#fff5f8; }
.line-page--mesh { --line-accent:#97c6ff; --line-tint:#f2f6fb; }
.line-page--neon { --line-accent:#d9ff00; --line-tint:#f6f8e9; }
.line-page main { overflow:hidden; }
.line-hero { display:grid; grid-template-columns:minmax(0,42%) minmax(0,58%); min-height:min(690px,calc(100svh - 68px)); width:100%; }
.line-hero__copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(36px,6vw,104px); background:var(--line-tint); }
.line-hero__eyebrow,.line-eyebrow { margin:0 0 22px; font-size:11px; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.line-hero__copy h1 { max-width:10ch; margin:0 0 22px; font-size:clamp(48px,5.1vw,92px); line-height:.94; letter-spacing:-.065em; }
.line-hero__copy > p:not(.line-hero__eyebrow) { max-width:32rem; margin:0 0 27px; font-size:clamp(16px,1.25vw,19px); line-height:1.55; }
.line-hero__copy > a { display:inline-flex; align-items:center; gap:14px; padding:12px 0; border-bottom:2px solid currentColor; color:inherit; font-size:13px; font-weight:800; text-decoration:none; text-transform:uppercase; letter-spacing:.055em; }
.line-hero__copy > a:hover,.line-hero__copy > a:focus-visible { border-color:var(--line-accent); }
.line-hero__media { position:relative; min-height:440px; margin:0; background:#e8e8e8; }
.line-hero__media img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--line-hero-position,center); }
.line-hero__media figcaption { position:absolute; bottom:0; left:0; padding:8px 12px; background:rgba(0,0,0,.78); color:#fff; font-size:10px; letter-spacing:.05em; }
.line-page--mesh .line-hero__media { background:#e9eef4; }
.line-page--mesh .line-hero__media img { object-fit:cover; object-position:var(--line-hero-position,center); }
.line-ribbon { height:7px; background:var(--line-accent); }
.line-page--pride .line-ribbon { background:linear-gradient(90deg,#ed3954 0 16%,#ffad34 16% 32%,#e5d941 32% 48%,#4ba969 48% 64%,#5284cf 64% 80%,#9a5dc4 80%); }
.line-lead { display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(24px,5vw,96px); align-items:start; max-width:1450px; margin:auto; padding:clamp(56px,7vw,112px) clamp(20px,5vw,80px); }
.line-lead h2 { max-width:12ch; margin:0; font-size:clamp(36px,3.3vw,62px); line-height:1.02; letter-spacing:-.055em; }
.line-lead__copy { max-width:700px; }
.line-lead__copy p { margin:0 0 20px; font-size:clamp(17px,1.38vw,21px); line-height:1.55; }
.line-products { padding:clamp(52px,6vw,88px) clamp(20px,5vw,80px) clamp(64px,7vw,110px); background:#f6f6f5; }
.line-products__head { display:flex; justify-content:space-between; align-items:end; gap:24px; max-width:1450px; margin:0 auto 32px; }
.line-products__head h2 { max-width:18ch; margin:0; font-size:clamp(38px,3.4vw,64px); line-height:1.03; letter-spacing:-.055em; }
.line-products__head p { max-width:30rem; margin:0; font-size:15px; line-height:1.55; }
.line-products__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.5vw,25px); max-width:1450px; margin:auto; }
.line-product { min-width:0; margin:0; }
.line-product img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; background:#fff; }
.line-product figcaption { padding:17px 2px 0; }
.line-product strong { display:block; font-size:clamp(17px,1.35vw,22px); line-height:1.15; letter-spacing:-.025em; }
.line-product span { display:block; margin-top:8px; font-size:13px; line-height:1.5; color:#45484c; }
.line-feature { display:grid; grid-template-columns:minmax(0,56%) minmax(0,44%); align-items:stretch; max-width:1600px; margin:auto; }
.line-feature--reverse { grid-template-columns:minmax(0,44%) minmax(0,56%); }
.line-feature--reverse .line-feature__copy { order:0; }
.line-feature--reverse figure { order:1; }
.line-feature figure { margin:0; background:var(--line-tint); }
.line-feature figure img { display:block; width:100%; height:100%; min-height:460px; object-fit:cover; object-position:var(--line-feature-position,center); }
.line-feature--product figure img { object-fit:contain; max-height:680px; padding:24px; }
.line-feature__copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:clamp(38px,6vw,96px); }
.line-feature__copy h2 { max-width:15ch; margin:0 0 20px; font-size:clamp(36px,3.6vw,64px); line-height:1; letter-spacing:-.055em; }
.line-feature__copy p:not(.line-eyebrow) { max-width:34rem; margin:0 0 18px; font-size:clamp(16px,1.3vw,19px); line-height:1.56; }
.line-feature__copy a { margin-top:10px; padding-bottom:8px; border-bottom:2px solid currentColor; color:inherit; font-size:13px; font-weight:800; text-decoration:none; text-transform:uppercase; letter-spacing:.05em; }
.line-archive { padding:clamp(64px,8vw,122px) clamp(20px,5vw,80px); background:#18191d; color:#fff; }
.line-archive__head { display:grid; grid-template-columns:1fr 1fr; gap:36px; max-width:1450px; margin:0 auto 32px; }
.line-archive__head h2 { max-width:16ch; margin:0; font-size:clamp(38px,4vw,72px); line-height:1; letter-spacing:-.055em; }
.line-archive__head p { max-width:36rem; align-self:end; margin:0; font-size:clamp(16px,1.3vw,19px); line-height:1.55; }
.line-archive__grid { columns:2; column-gap:16px; max-width:1450px; margin:auto; }
.line-archive__grid figure { break-inside:avoid; margin:0 0 16px; }
.line-archive__grid img { display:block; width:100%; height:auto; }
.line-archive__grid figcaption { padding:10px 2px 2px; font-size:12px; line-height:1.4; color:#cfd0d3; }
.line-end { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end; max-width:1450px; margin:auto; padding:clamp(55px,7vw,100px) clamp(20px,5vw,80px); }
.line-end h2 { max-width:14ch; margin:0; font-size:clamp(36px,3.5vw,64px); line-height:1; letter-spacing:-.055em; }
.line-end nav { display:flex; flex-direction:column; }
.line-end a { display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid #aaa; color:inherit; font-size:16px; font-weight:700; text-decoration:none; }
.line-end a:hover,.line-end a:focus-visible { color:#3f42a0; }
@media (max-width:900px) {
  .line-hero { grid-template-columns:1fr; min-height:0; }
  .line-hero__copy { padding:50px 24px 42px; }
  .line-hero__copy h1 { max-width:13ch; font-size:clamp(46px,8vw,70px); }
  .line-hero__media { min-height:0; height:clamp(340px,62vw,590px); }
  .line-lead,.line-archive__head,.line-end { grid-template-columns:1fr; }
  .line-products__head { align-items:start; flex-direction:column; }
  .line-products__grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 14px; }
  .line-feature,.line-feature--reverse { grid-template-columns:1fr; }
  .line-feature--reverse figure { order:0; }
  .line-feature--reverse .line-feature__copy { order:1; }
  .line-feature figure img { min-height:0; max-height:640px; }
  .line-feature__copy { padding:46px 24px 60px; }
}
@media (max-width:600px) {
  .line-hero__media { height:390px; }
  .line-page--mesh .line-hero__media { height:340px; }
  .line-lead { padding:57px 22px 65px; gap:22px; }
  .line-products { padding:55px 18px 68px; }
  .line-products__head { margin-bottom:26px; }
  .line-products__grid { gap:26px 12px; }
  .line-product figcaption { padding-top:11px; }
  .line-product span { font-size:12px; }
  .line-feature figure img { width:100%; max-height:510px; height:auto; }
  .line-archive { padding:65px 18px; }
  .line-archive__grid { columns:1; }
  .line-end { padding:65px 22px; }
}
@media (prefers-reduced-motion:reduce) { .line-page .reveal { opacity:1; transform:none; } }