/* =========================================================
   CATEGORIES — 1980 x 6975
   sections: hero 0-1020 | directions 1020-4460 | submit 4460-5450
             open 5450-5958 | cta 5958-6551 | footer 6551-6975
   Same coordinate system as p34-base.css: 1rem = 10 design px.
   ========================================================= */

.hero,
.s-dir,
.s-sub,
.s-open,
.s-cta{ background:var(--bg); }

/* ---------------------------------------------------------
   1. HERO   0 – 1020

   The only one of the four new pages with a photograph, so
   .hero__bg and .hero__veil stay in play here.
   --------------------------------------------------------- */

.hero{ height:102rem; overflow:hidden; }

.hero__bg{
  position:absolute; inset:0;
  background:url("img3/categories-hero.png") center top / 198rem 102rem no-repeat;
}
.hero__veil{
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,9,0) 62%, rgba(10,10,9,.6) 84%, var(--bg) 100%);
}

.hero__eyebrow{
  position:absolute; left:4rem; top:39.2rem;
  font-size:1.05rem; font-weight:500; letter-spacing:.2em; line-height:1;
  color:var(--gold);
  z-index:3;
}
.cat-hero__title{
  position:absolute; left:3.9rem; top:44.6rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-weight:700;
  font-size:12.9rem; line-height:11.8rem;
  letter-spacing:-.022em;
  color:#efebe3;
  z-index:3;
}
.cat-hero__p1,
.cat-hero__p2{
  position:absolute; top:69.5rem;
  font-size:1.6rem; font-weight:300; line-height:2.8rem;
  color:#8d8b86;
  z-index:3;
}
.cat-hero__p1{ left:4rem; }
.cat-hero__p2{ left:56.2rem; }

/* ---------------------------------------------------------
   2. PROGRAMME DIRECTIONS   1020 – 4460

   Five rows on a 61.4rem pitch. Odd rows carry the still on
   the right, even rows on the left; the copy column swaps
   with it.
   --------------------------------------------------------- */

.s-dir{ height:344rem; }

.s-dir__lbl{ left:4rem; top:6.9rem; font-size:1.05rem; letter-spacing:.2em; }

.s-dir__h2{
  position:absolute; left:4rem; top:9.8rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-weight:700;
  font-size:8.7rem; line-height:7.7rem;
  letter-spacing:-.018em;
  color:#efebe3;
}

.dir{
  position:absolute; left:0; top:35.7rem; width:100%;
}
.dir__row{
  position:relative;
  height:61.4rem;
}

.dir__img{
  position:absolute; top:0;
  width:110.9rem; height:61.3rem;
  object-fit:cover;
}
.dir__row--r .dir__img{ right:4.1rem; }
.dir__row--l .dir__img{ left:4.1rem; }

.dir__n,
.dir__name,
.dir__sub,
.dir__body{ position:absolute; font-style:normal; }

/* The hairline that runs from the number across the column. */
.dir__n{
  top:18.2rem;
  font-size:1.05rem; font-weight:500; letter-spacing:.14em; line-height:1;
  color:rgba(239,235,227,.34);
}
.dir__n::after{
  content:""; position:absolute; left:4.1rem; top:.45rem;
  width:62rem; height:1px; background:var(--line);
}
.dir__name{
  top:22.4rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-style:italic; font-weight:400;
  font-size:6.5rem; line-height:1;
  letter-spacing:-.012em;
  color:#efebe3;
  white-space:nowrap;
}
.dir__sub{
  top:31.5rem;
  font-size:1.9rem; font-weight:300; line-height:1;
  color:var(--gold);
}
.dir__body{
  top:36rem;
  font-size:1.6rem; font-weight:300; line-height:2.5rem;
  color:var(--muted);
}

.dir__row--r .dir__n,
.dir__row--r .dir__name,
.dir__row--r .dir__sub,
.dir__row--r .dir__body{ left:9.7rem; }

.dir__row--l .dir__n,
.dir__row--l .dir__name,
.dir__row--l .dir__sub,
.dir__row--l .dir__body{ left:120.6rem; }

/* ---------------------------------------------------------
   3. SUBMISSION CATEGORIES   4460 – 5450
   --------------------------------------------------------- */

.s-sub{ height:99rem; }

.s-sub__lbl{ left:4.1rem; top:9rem; font-size:1.05rem; letter-spacing:.2em; }

.s-sub__h2{
  position:absolute; left:4rem; top:12.6rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-weight:700;
  font-size:8.3rem; line-height:6.8rem;
  letter-spacing:-.018em;
  color:#efebe3;
}
.s-sub__intro{
  position:absolute; left:151.3rem; top:12.7rem;
  font-size:1.5rem; font-weight:300; line-height:2.4rem;
  color:var(--muted);
}

.fmt{
  position:absolute; left:4rem; top:36.5rem;
  width:189.1rem; height:42.9rem;
  display:grid;
  /* the whole block sits on a faint warm field, not on the page black */
  background:rgba(199,168,110,.013);
  grid-template-columns:63.1rem 63.1rem 62.9rem;
  border:1px solid var(--line);
}
.fmt__card{
  position:relative;
  padding:5.4rem 4.6rem 0;
  border-left:1px solid var(--line);
}
.fmt__card:first-child{ border-left:0; }

/* The main category is lifted out of the row with a warmer field
   and a gold edge. */
.fmt__card--main{
  background:rgba(199,168,110,.064);
  box-shadow:inset 0 0 0 1px rgba(199,168,110,.34);
}
.fmt__tag{
  position:absolute; left:4.6rem; top:0;
  display:inline-flex; align-items:center;
  height:2rem; padding:0 .9rem;
  background:var(--gold);
  font-size:.85rem; font-weight:600; letter-spacing:.16em;
  color:#131110;
}

.fmt__name{
  display:block; font-style:normal;
  font-family:var(--serif);
  font-variation-settings:var(--fr72);
  font-weight:700; font-size:3.9rem; line-height:1;
  letter-spacing:-.004em;
  color:#efebe3;
}
.fmt__k{
  display:block; margin-top:2.7rem; font-style:normal;
  font-size:.9rem; font-weight:600; letter-spacing:.2em; line-height:1;
  color:rgba(239,235,227,.34);
}
.fmt__k--2{
  margin-top:4.2rem; padding-top:2.4rem;
  border-top:1px solid var(--line);
}
.fmt__v{
  display:block; margin-top:1.3rem;
  font-size:1.45rem; font-weight:300; line-height:1;
  color:var(--cream-2);
}
.fmt__note{
  display:block; margin-top:1rem;
  font-size:1.25rem; font-weight:300; line-height:1;
  color:var(--dim);
}
.fmt__list{ margin-top:1.7rem; }
.fmt__list li{
  position:relative; padding-left:1.5rem; margin-top:1.2rem;
  font-size:1.35rem; font-weight:300; line-height:1;
  color:var(--muted);
}
.fmt__list li::before{
  content:""; position:absolute; left:0; top:.55rem;
  width:.35rem; height:.35rem; border-radius:50%;
  background:var(--gold);
}

/* Micro Short carries one format, so its rule sits lower. */
.fmt__card--micro .fmt__k--2{ margin-top:12rem; }

.s-sub__fn{
  position:absolute; top:84.5rem;
  font-size:1.25rem; font-weight:300; line-height:2.3rem;
  color:var(--dim);
}
.s-sub__fn--1{ left:4rem; }
.s-sub__fn--2{ left:59rem; }

/* ---------------------------------------------------------
   4. INTERNATIONAL SELECTION   5450 – 5958
   --------------------------------------------------------- */

.s-open{ height:50.8rem; }

.s-open__lbl{ left:4.1rem; top:14.6rem; font-size:1.05rem; letter-spacing:.2em; }

.s-open__h2{
  position:absolute; left:4rem; top:18.4rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-weight:700;
  font-size:8.3rem; line-height:6.8rem;
  letter-spacing:-.018em;
  color:#efebe3;
}
.s-open__p{
  position:absolute; left:4rem; top:37rem;
  font-size:1.5rem; font-weight:300; line-height:2.7rem;
  color:var(--muted);
}
.s-open__r{
  position:absolute; left:151.3rem; top:14.4rem;
  font-size:1.5rem; font-weight:300; line-height:2.4rem;
  color:var(--muted);
}
.s-open__date{
  position:absolute; left:106.6rem; top:33.6rem;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-style:italic; font-weight:400;
  font-size:2.4rem; line-height:1;
  color:var(--cream-2);
}
.s-open__ed{
  position:absolute; left:106.6rem; top:38.9rem;
  font-size:1rem; font-weight:500; letter-spacing:.2em; line-height:1;
  color:rgba(239,235,227,.28);
}

/* ---------------------------------------------------------
   5. SUBMIT CTA   5958 – 6551

   The neon still runs nearly black here: it reads as texture
   behind the type, not as a picture.
   --------------------------------------------------------- */

.s-cta{ height:59.3rem; }

.s-cta__bg{
  position:absolute; left:0; top:0; right:0; height:56.7rem;
  background:url("img3/cta-band.png") center center / 198rem 56.7rem no-repeat;
  opacity:.22;
}
.s-cta__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, var(--bg) 0%, rgba(10,10,9,.35) 18%, rgba(10,10,9,.35) 82%, var(--bg) 100%);
}

.s-cta__lbl{
  left:0; right:0; top:14.2rem;
  text-align:center;
  font-size:1.05rem; letter-spacing:.2em;
  z-index:2;
}
.s-cta__h2{
  position:absolute; left:0; right:0; top:18.4rem;
  text-align:center;
  font-family:var(--serif);
  font-variation-settings:var(--fr);
  font-style:italic; font-weight:400;
  font-size:6.4rem; line-height:7.6rem;
  letter-spacing:-.012em;
  color:#efebe3;
  z-index:2;
}
.s-cta__btn{
  position:absolute; left:84.3rem; top:40.6rem;
  width:29rem; height:5rem;
  z-index:2;
}