/* Major Look Group - holding page.
   Built to MLG Landing Options, option 1b (LOCKED): ink field, trace mark, beam,
   verb hover. Geometry and tokens come from brand/MLG Brand Spec.md v1.7 - the
   authority. Do not invent values here; take them from the spec.

   Drawn hue: register entry 001, H 25, OPEN (house hue for stationery and the
   site until the first tour opens). The verb hover borrows a slot hue for as
   long as the pointer is on the verb, then returns to the draw. */

:root {
  /* Colour tokens */
  --ink: #171715;
  --paper-deep: #EDEBE6;
  --grey-label: #8B887F;
  --grey-mute: #9C998F;
  --grey-foot: #7E7C74;
  --trace: #55534E;

  /* The draw. Slot and beam are the ONLY places colour rides. */
  --slot: oklch(0.68 0.22 25);
  --beam: oklch(0.68 0.22 25 / 0.45);

  /* The bug and the legal line travel together at the left margin: the strip
     flush to the trim edge, the legal line directly above it. Expressed as a
     relationship rather than a magic offset so the two stay locked if the
     strip resizes. 6px + 5px = the mock's 11px at the 1440 reference. */
  --strip-h: clamp(4px, 0.417vw, 8px);
  --strip-gap: clamp(3px, 0.347vw, 6.7px);

  /* Layout. The composition is drawn at the 1440 reference and scales
     proportionally to 1920, where it stops. Every vw term below is the 1440
     value divided by 1440; every max is the 1920 value. Margin 72 -> 96. */
  --margin: clamp(24px, 5vw, 96px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
}

body {
  color: var(--paper-deep);
  font-family: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* The page is a printed surface, not a document: nothing on it selects.
     A drag across the masthead should do nothing, the way dragging across a
     letterhead does nothing. */
  -webkit-user-select: none;
  user-select: none;
}

/* The field ------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.hero {
  flex: 1;
  display: flex;
  align-items: center;
  gap: clamp(32px, 6.11vw, 117px);
  padding: clamp(48px, 8vh, 96px) var(--margin);
}

/* The mark -------------------------------------------------------------- */

/* 300px at the 1440 reference. Everything inside is a percentage of the
   square, so the construction survives any size:
     slot   left 62%      width 5.667%   height 51%   (centred vertically)
     beam   left 67.667%  width 28%      height 80%   (from the slot's
            trailing edge, fading out before it reaches the square's side) */
.mark {
  flex: none;
  position: relative;
  width: clamp(148px, 20.83vw, 400px);
  aspect-ratio: 1;
  background: var(--ink);
  outline: 1.5px solid var(--trace);
}

.mark-slot {
  position: absolute;
  left: 62%;
  top: 24.5%;
  width: 5.667%;
  height: 51%;
  background-color: var(--slot);
  transition: background-color 250ms;
}

.mark-beam {
  position: absolute;
  left: 67.667%;
  top: 10%;
  width: 28%;
  height: 80%;
  background: linear-gradient(90deg, var(--beam), transparent 88%);
  clip-path: polygon(0 18.2%, 100% 0, 100% 100%, 0 81.8%);
  pointer-events: none;
}

/* The masthead ---------------------------------------------------------- */

.masthead {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.36vw, 45px);
  min-width: 0;
}

.lockup {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.7vw, 13px);
  margin: 0;
  font-weight: 400;
}

/* Stacked lockup only. Never MAJOR LOOK GROUP on one line at one size. */
.lockup-name {
  font-family: 'Archivo', Helvetica, Arial, sans-serif;
  font-size: clamp(30px, 4.44vw, 85px);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
}

.lockup-descriptor {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(13px, 1.67vw, 32px);
  letter-spacing: 0.42em;
  line-height: 1;
  color: var(--grey-label);
}

/* The verbs ------------------------------------------------------------- */

.verbs {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(12px, 1.25vw, 24px);
  letter-spacing: 0.14em;
  line-height: 1.7;
  color: var(--grey-mute);
  max-width: 60ch;
}

.verb {
  cursor: default;
  transition: color 250ms;
}

.verb.is-drawn { color: var(--paper-deep); }

.verb-sep { white-space: pre; }

/* Contact --------------------------------------------------------------- */

/* Calls to action are contact details only. No button verbs. */
.contact {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(13px, 1.04vw, 20px);
  letter-spacing: 0.1em;
}

.contact a {
  color: var(--paper-deep);
  text-decoration: none;
  transition: color 250ms;
}

.contact a:hover,
.contact a:focus-visible { color: var(--grey-label); }

/* The foot -------------------------------------------------------------- */

/* Every item in the foot is positioned, so the band's height is its padding
   alone - the same 49px the mock gives at the 1440 reference. */
.foot {
  position: relative;
  display: flex;
  align-items: center;
  padding: clamp(18px, 1.67vw, 32px) var(--margin);
  border-top: 1px solid rgba(237, 235, 230, 0.3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(11px, 0.9vw, 17px);
  letter-spacing: 0.06em;
  color: var(--grey-foot);
}

/* The legal line belongs to the bug: same left margin, directly above it. */
.legal {
  position: absolute;
  left: var(--margin);
  bottom: calc(var(--strip-h) + var(--strip-gap));
}

.place {
  position: absolute;
  right: var(--margin);
}

/* The bug, per spec: 8px x 154px at 1920 scale, scaled proportionally
   (= 6px x 115px at the 1440 reference). Flush to the trim edge, aligned to
   the left margin, hard edges, never blended. */
.strip {
  position: absolute;
  left: var(--margin);
  bottom: 0;
  display: flex;
  height: var(--strip-h);
  width: clamp(84px, 8.02vw, 154px);
}

.strip i { flex: 1; }

/* Narrow ---------------------------------------------------------------- */

@media (max-width: 880px) {
  .hero {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(32px, 6vh, 56px);
  }

  .mark { width: clamp(148px, 38vw, 240px); }

  /* The wordmark never wraps: MAJOR LOOK is one line by construction. The vw
     term is set so the line still clears the margins at 320px, where the
     margin has already bottomed out at 24px. */
  .lockup-name { font-size: clamp(24px, 8.5vw, 56px); }
  .lockup-descriptor { font-size: clamp(13px, 3.2vw, 20px); }
  .verbs { font-size: clamp(11px, 3vw, 16px); }
}

/* Phones: the verbs run down, not across. Below roughly 505px the line wraps
   mid-list - on an iPhone it breaks after EXECUTE - which reads as two ragged
   rows rather than one list. Stacked it stays a list, and the separators are
   then noise: a column does not need dashes to be read as a series. */
@media (max-width: 560px) {
  .verbs {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.6;
  }

  .verb-sep { display: none; }
}

/* Short viewports (landscape phones): pull the mark and the vertical air in so
   the field still holds in one screen. */
@media (max-height: 620px) and (max-width: 880px) {
  .hero {
    padding-top: clamp(20px, 5vh, 48px);
    padding-bottom: clamp(20px, 5vh, 48px);
    gap: clamp(16px, 4vh, 40px);
  }

  .masthead { gap: clamp(12px, 3vh, 24px); }

  .mark { width: clamp(104px, 26vh, 180px); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}