/* ==========================================================================
   Otto House Productions Ltd
   Studio site stylesheet. No frameworks, no external requests, no trackers.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Otto Navy is the page. Every other tone here is a literal blend of the two
     brand colours - Otto Navy #071D3A and Warm Ivory #F7F3E9 - so nothing in
     the palette is invented. The percentage is how much ivory is in the mix. */

  --ink:        #071D3A;  /* Otto Navy, undiluted - the page                */
  --ink-deep:   #051326;  /* navy carried toward black - bands and footer   */
  --ink-raised: #1A2E48;  /* 8% ivory  - lifted panels, all text AA on it   */
  --paper:      #F7F3E9;  /* Warm Ivory, undiluted - primary type           */
  --muted:      #AAAFB1;  /* 68% ivory - body copy              7.61:1      */
  --muted-dim:  #9CA2A7;  /* 62% ivory - small print            6.53:1      */
  --gold:       #C9A45E;  /* accent, carried over from the approved design  */
  --gold-soft:  #E0C48D;
  --rule:       #293B53;  /* 14% ivory                                      */
  --rule-soft:  #152A45;  /* 6% ivory                                       */

  /* Geometric sans for display, echoing the perfect circles of the OTTO mark.
     Humanist sans for reading. Both stacks deliberately avoid the
     -apple-system / Segoe UI / Roboto default, and load nothing external. */

  --display: Futura, "Century Gothic", "Franklin Gothic Medium", "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  --sans: "Avenir Next", Avenir, Candara, "Trebuchet MS", "Segoe UI", sans-serif;

  --gutter: 34px;
  --measure: 1200px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Candara and Trebuchet default to old-style figures; keep numerals even. */
  font-variant-numeric: lining-nums;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 12px 18px;
  font-weight: 700;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

.shell {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.eyebrow--muted { color: var(--muted-dim); }

.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.06;
  margin: 0;
  color: var(--paper);
}

.lede {
  font-size: 19px;
  line-height: 1.62;
  color: var(--muted);
  margin: 0;
  max-width: 54ch;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.mast {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(5, 21, 43, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}

.mast__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

/* Masthead identity. The mark is ivory artwork on a transparent ground with no
   background plate and no baked margin, so this height is the true glyph height
   and the clear space around it is set here rather than inside the file. The
   full studio name lives in the alt text and, as plain text, in the footer. */

.brandmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 8px 0;
}

.brandmark__logo {
  display: block;
  height: 46px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  transition: color 160ms ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1px;
  background: var(--gold);
  transition: right 220ms ease;
}

.nav a:hover { color: var(--paper); }
.nav a:hover::after { right: 0; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding: 96px 0 84px;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 64px;
  align-items: center;
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}

.hero__kicker .bar {
  width: 44px;
  height: 1px;
  background: var(--gold);
  flex: none;
}

.hero h1 {
  font-size: clamp(42px, 6.2vw, 78px);
  margin-bottom: 30px;
}

.hero h1 em {
  font-style: normal;
  color: var(--gold-soft);
  /* Emphasis carried by colour and a whisper of tracking, not a fake italic. */
  letter-spacing: 0.004em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 38px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--gold);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 26px;
  border: 1px solid var(--gold);
  transition: background 170ms ease, color 170ms ease, transform 170ms ease;
}

.btn:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--rule);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold-soft);
}

.btn .arrow { transition: transform 200ms ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Pack fan --------------------------------------------------------------- */

.fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  padding: 10px 0;
}

.fan img {
  width: 190px;
  height: auto;
  border-radius: 3px;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.62));
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.fan img:nth-child(1) { transform: rotate(-8deg) translate(26px, 12px); z-index: 1; }
.fan img:nth-child(2) { transform: translateY(-14px); z-index: 3; }
.fan img:nth-child(3) { transform: rotate(8deg) translate(-26px, 12px); z-index: 2; }

.fan:hover img:nth-child(1) { transform: rotate(-12deg) translate(6px, 8px); }
.fan:hover img:nth-child(2) { transform: translateY(-22px); }
.fan:hover img:nth-child(3) { transform: rotate(12deg) translate(-6px, 8px); }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.band { padding: 92px 0; border-bottom: 1px solid var(--rule-soft); }
.band--deep { background: var(--ink-deep); }

.band__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 54px;
}

.band__num {
  font-family: var(--display);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.06em;
  flex: none;
}

.band__head h2 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  flex: none;
}

.band__head .rule { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Game entries
   -------------------------------------------------------------------------- */

.game { display: grid; gap: 54px; align-items: start; }

.game--lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }

.game__title {
  font-size: clamp(32px, 4vw, 46px);
  margin: 18px 0 22px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--rule);
  padding: 7px 13px;
}

.status .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

.game__body { color: var(--muted); margin: 0 0 26px; max-width: 52ch; }
.game__body strong { color: var(--paper); font-weight: 600; }

.hobby-wordmark {
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-bottom: 6px;
}

/* Spec list -------------------------------------------------------------- */

.spec {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.spec li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 22px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}

.spec dt, .spec .k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dim);
  flex: none;
}

.spec .v { color: var(--paper); text-align: right; }

/* Pack strip ------------------------------------------------------------- */

.packs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
}

.packs img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.5));
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.packs img:hover { transform: translateY(-8px); }

.caption {
  font-size: 12px;
  color: var(--muted-dim);
  letter-spacing: 0.04em;
  margin: 20px 0 0;
}

/* The Gallops — typographic panel ---------------------------------------- */

.gallops {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 54px;
  align-items: center;
  border: 1px solid var(--rule);
  padding: 52px;
  background:
    linear-gradient(180deg, rgba(201, 164, 94, 0.05), transparent 62%),
    var(--ink-raised);
}

.gallops__mark {
  font-family: var(--display);
  font-size: clamp(38px, 5vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 16px 0 0;
}

.gallops__mark span { display: block; color: var(--gold); font-style: normal; }

.turf {
  display: flex;
  gap: 5px;
  margin-top: 30px;
  align-items: flex-end;
  height: 46px;
}

.turf i {
  display: block;
  width: 3px;
  background: var(--rule);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.about h2 {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 26px;
}

.about p { color: var(--muted); margin: 0 0 20px; }

.tenets { list-style: none; margin: 0; padding: 0; }

.tenets li {
  display: flex;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.tenets li:first-child { border-top: 1px solid var(--rule); }

.tenets .n {
  font-family: var(--display);
  font-size: 13px;
  color: var(--gold);
  flex: none;
  min-width: 22px;
}

.tenets .t { color: var(--paper); font-size: 16px; }

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

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.contact h2 {
  font-family: var(--display);
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

.mailto {
  font-family: var(--display);
  font-size: clamp(21px, 2.5vw, 29px);
  color: var(--gold-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 164, 94, 0.35);
  padding-bottom: 3px;
  transition: border-color 180ms ease, color 180ms ease;
  word-break: break-word;
}

.mailto:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot { padding: 66px 0 54px; background: var(--ink-deep); }

.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}

.foot__entity {
  font-family: var(--display);
  font-size: 21px;
  margin: 12px 0 10px;
  color: var(--paper);
}

.foot p { color: var(--muted-dim); font-size: 14px; margin: 0 0 8px; }

.foot h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-dim);
  margin: 0 0 16px;
}

.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 11px; }

.foot li a {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  transition: color 160ms ease;
}

.foot li a:hover { color: var(--gold-soft); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 28px;
  padding-top: 26px;
}

.foot__base p { font-size: 13px; margin: 0; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

/* Content is visible by default. The reveal only applies once the script has
   confirmed it can run and will finish, so a JS failure can never hide copy. */
.js-anim .rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-anim .rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .rise { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .fan img, .fan:hover img { transition: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__grid { gap: 44px; }
  .fan img { width: 164px; }
  .gallops { padding: 42px; }
}

@media (max-width: 900px) {
  :root { --gutter: 26px; }

  .hero { padding: 68px 0 62px; }
  .hero__grid { grid-template-columns: 1fr; gap: 52px; }
  .hero__copy { order: 1; }
  .hero__art { order: 2; }

  .game--lead,
  .gallops,
  .about,
  .contact { grid-template-columns: 1fr; gap: 40px; }

  .band { padding: 68px 0; }
  .band__head { margin-bottom: 40px; }

  .foot__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .foot__grid > :first-child { grid-column: 1 / -1; }
}

/* Between the horizontal-lockup switch at 621px and roughly tablet width the
   masthead is tight on the longest-nav page, so the lockup steps down. */
@media (max-width: 760px) {
  .brandmark__logo { height: 38px; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }

  body { font-size: 16px; }

  /* The masthead must never push the page wider than the viewport. */
  .mast__inner { gap: 12px; min-height: 70px; }
  .nav { gap: 16px; flex: none; }
  .nav a { font-size: 10.5px; letter-spacing: 0.08em; }
  .brandmark { min-width: 0; }
  .brandmark__logo { height: 45px; }

  .hero { padding: 52px 0 54px; }
  .hero h1 { font-size: clamp(34px, 10vw, 46px); }
  .lede { font-size: 17px; }
  .hero__kicker { align-items: flex-start; gap: 11px; margin-bottom: 24px; }
  .hero__kicker .bar { width: 28px; margin-top: 9px; }

  .fan img { width: 100px; }
  .fan img:nth-child(1) { transform: rotate(-7deg) translate(15px, 9px); }
  .fan img:nth-child(2) { transform: translateY(-10px); }
  .fan img:nth-child(3) { transform: rotate(7deg) translate(-15px, 9px); }

  .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  .gallops { padding: 30px 22px; }
  .band { padding: 56px 0; }

  .btn { padding: 14px 20px; font-size: 12px; }
  .hero__actions { gap: 14px; }

  .spec li { font-size: 14px; gap: 14px; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__grid > :first-child { grid-column: auto; }
}

@media (max-width: 380px) {
  .nav { gap: 12px; }
  .nav a { font-size: 10px; letter-spacing: 0.06em; }
  .brandmark__logo { height: 39px; }
  .fan img { width: 92px; }
}

/* Belt and braces: nothing may create a horizontal scrollbar. */
html, body { overflow-x: hidden; max-width: 100%; }

/* --------------------------------------------------------------------------
   Document pages (privacy / support)
   -------------------------------------------------------------------------- */

.doc { padding: 64px 0 88px; }
.doc__inner { max-width: 720px; }

.doc__title {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 20px 0 14px;
}

.doc__meta { color: var(--muted-dim); font-size: 14px; margin: 0 0 34px; }

.doc__intro {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.65;
  padding-bottom: 30px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--rule);
}

.doc h2 {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin: 46px 0 14px;
}

.doc h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 30px 0 12px;
}

.doc p { color: var(--muted); margin: 0 0 16px; }
.doc strong { color: var(--paper); font-weight: 600; }

.doc ul { margin: 0 0 18px; padding-left: 0; list-style: none; }

.doc ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--muted);
}

.doc ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 1px;
  background: var(--gold);
}

.doc ol { margin: 0 0 18px; padding-left: 20px; color: var(--muted); }
.doc ol li { margin-bottom: 10px; }

.doc a { color: var(--gold-soft); }
.doc a:hover { color: var(--gold); }

.note {
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
}

.note p { color: var(--paper); margin: 0; }

.doc__footer {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 620px) {
  .doc { padding: 42px 0 62px; }
  .doc h2 { font-size: 22px; margin-top: 36px; }
}

/* Spec lists inside document pages ---------------------------------------- */
/* .doc gives every <ul> a gold dash and left padding. A .spec list keeps its
   own two-column key/value form instead, so opt it out of both. */

.doc .spec li { padding-left: 0; margin-bottom: 0; color: var(--muted); }
.doc .spec li::before { content: none; }

/* Official studio logo placements ----------------------------------------- */
/* Both marks are supplied as ivory artwork on their own navy plate, so they
   sit on the page unaltered: no recolouring, no filters, no effects. Clear
   space follows the brand rule of half an outer O height. */

.studio-ident {
  display: block;
  width: 168px;
  height: auto;
  margin: 0 0 30px;
}

.foot__logo {
  display: block;
  width: 118px;
  height: auto;
  /* Stands in for the column's eyebrow heading, so it takes that spacing.
     Quieter than the About lockup: the legal text below it is the point. */
  margin: 0 0 22px;
}

@media (max-width: 620px) {
  .studio-ident { width: 143px; margin-bottom: 26px; }
  .foot__logo { width: 106px; }
}