/* ==========================================================================
   thursdvys - the landing page, laid out as a product spec sheet
   --------------------------------------------------------------------------
   Format taken from the Superlative SB01 sheet: a big name at the top, the
   brand under it, a hairline, a two-column table of small facts, and then one
   large isometric hairline drawing of the object filling the lower page.

   The object here is the shop itself. Everything drawn in the SVG follows the
   real front: two storeys, a white upper volume overhanging a deep dark ground
   floor, a chamfered corner, a black-framed window band, the disc mark and the
   letterspaced wordmark with the coloured v.

   Loaded only on / (see the conditional <link> in base.html), after grid.css,
   so it has the last word on this page.
   ========================================================================== */

.lp{padding:30px 0 0}

/* ---------- the name ------------------------------------------------ */
.lp-head{display:flex;align-items:flex-start;gap:24px}
.lp-title{font-family:'SGL',system-ui;font-weight:300;
  font-size:clamp(46px,8.6vw,104px);line-height:.92;letter-spacing:.005em;
  text-transform:none;color:var(--g-ink);margin:0;max-width:none}
.lp-title .v{color:var(--g-accent)}
.lp-head .lp-disc{flex:none;width:clamp(40px,5.4vw,62px);height:auto;
  margin-top:6px;opacity:.92}
.lp-loc{margin:16px 0 0;font-size:9.5px;letter-spacing:.30em;
  text-transform:uppercase;color:var(--g-faint)}
.lp-sub{margin:20px 0 0;max-width:44ch;font-size:13px;color:var(--g-mute);
  line-height:1.65}

/* ---------- the sheet of facts -------------------------------------- */
.lp-rule{height:1px;background:var(--g-hair2);margin:26px 0 0}
.lp-spec{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:22px}
.lp-spec dl{margin:0}
.lp-spec .row{display:grid;grid-template-columns:132px 1fr;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--g-hair);align-items:baseline}
.lp-spec dt{font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--g-faint);white-space:nowrap}
.lp-spec dd{margin:0;font-size:12px;color:var(--g-ink);line-height:1.45}
.lp-spec dd .num{font-family:'SGL',system-ui;color:var(--g-accent)}

/* ---------- the drawing --------------------------------------------- */
.lp-hero{margin:30px 0 0;padding:0}
.lp-hero svg{width:100%;height:auto;display:block}

/* hairlines, and nothing that fills. vector-effect is NOT inherited, so it has
   to be set on every element or a 1-unit stroke on a 23-unit viewBox draws
   about 50px thick. */
.lp-hero .dwg>*{fill:none;stroke:#f2f0ea;stroke-width:1;
  vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.lp-hero .site{stroke:rgba(242,240,234,.12);stroke-dasharray:3 5}
.lp-hero .mid{stroke:rgba(242,240,234,.36)}
.lp-hero .mull{stroke:rgba(242,240,234,.56)}
.lp-hero .col2{stroke:rgba(242,240,234,.2)}
.lp-hero .dark{fill:#080808}
.lp-hero .roof{stroke:rgba(242,240,234,.48)}
.lp-hero .disc{fill:#000}
.lp-hero .cut{fill:#f2f0ea;stroke:none}
.lp-hero .trunk{stroke:rgba(242,240,234,.5)}
.lp-hero .leaf{stroke:rgba(242,240,234,.36)}
.lp-hero .kerb{stroke:rgba(242,240,234,.24)}
.lp-hero .car{stroke:rgba(242,240,234,.4)}
.lp-hero .mark{fill:#f2f0ea;stroke:none;font-family:'SGL',system-ui;
  letter-spacing:.06em}
.lp-hero .mark-v{fill:#ff6b00}

/* the top of the shop, in the brand's own graphic language: a solid orange
   field, the windows a black band with grouped mullions, and the shading done
   with orange halftone dot, taken off the shop's own posters */
/* outline only: no fills anywhere in the drawing, so the building is read the
   way the reference sheet reads - line work on black */
.lp-hero .orange,.lp-hero .halftone,.lp-hero .winblack{fill:none}
.lp-hero .disc{fill:none}
.lp-hero .cut{fill:none;stroke:rgba(242,240,234,.9)}
.lp-hero .mark2{fill:#f2f0ea;stroke:none;font-family:'SGL',system-ui;
  letter-spacing:.06em}
.lp-hero .mark2-v{fill:#ff6b00}

/* the reference's annotations: tiny wide-tracked caps set into the planes */
.lp-hero .anno{fill:rgba(242,240,234,.72);stroke:none;
  font-family:'SGL',system-ui;letter-spacing:.16em;text-transform:uppercase}
.lp-hero .slab{fill:none;stroke:rgba(242,240,234,.75)}
.lp-hero .riser{stroke:rgba(242,240,234,.5)}
.lp-hero .dim{stroke:rgba(242,240,234,.34);stroke-dasharray:2 3}

.lp-cap{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--g-hair);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--g-faint)}
.lp-cap .sp{flex:1}
.lp-credit{margin:12px 0 0;font-size:10px;letter-spacing:.06em;
  color:var(--g-ghost)}

/* ---------- phone ---------------------------------------------------- */
@media (max-width:820px){
  .lp{padding:22px 0 0}
  .lp-spec{grid-template-columns:1fr;gap:0}
  .lp-spec .row{grid-template-columns:112px 1fr;gap:12px}
  .lp-spec dl+dl{margin-top:22px}
  .lp-hero{margin-top:24px}
  .lp-head .lp-disc{margin-top:2px}
}
@media (max-width:420px){
  .lp-spec .row{grid-template-columns:1fr;gap:3px}
  .lp-spec dt{font-size:8.5px}
}

/* ---------- the shop's events, one block each ------------------------ */
/* landing.css is loaded only on /, and every rule is namespaced under
   .lp-events, so nothing here can leak to another page. Same hairline rules,
   square corners and wide-tracked micro-labels as the rest of the sheet. */
.lp-events{margin:24px 0 0;border-top:1px solid var(--g-hair2)}
.lp-ev{padding:20px 0 24px;border-bottom:1px solid var(--g-hair)}
.lp-ev-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.lp-ev-name{margin:0;font-size:14px;font-weight:400;letter-spacing:-.01em;
  color:var(--g-ink)}
.lp-ev-when{font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--g-faint)}
/* the way into the full album: the one accent on the block, and it carries
   the real photograph count, not the number of tiles shown here */
.lp-ev-count{margin-left:auto;font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--g-accent);white-space:nowrap}
.lp-ev-count:hover{color:var(--g-ink)}
.lp-ev-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:15px;background:#000}
.lp-ev-strip figure{margin:0;aspect-ratio:1;background:#070707;overflow:hidden}
.lp-ev-strip img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .2s}
.lp-ev-strip figure:hover img{opacity:.7}
.lp-ev-none{display:grid;place-items:center;color:var(--g-faint);font-size:9px;
  letter-spacing:.24em;text-transform:uppercase}

@media (max-width:480px){
  .lp-ev-count{margin-left:0;flex-basis:100%}
}