/* Owlery Works — one page, one stylesheet.
   White ground, navy ink, amber used once. Nothing here needs a build step. */

:root {
  /* Brand, straight off shared/branding/mark.py */
  --ink:        #12314F;   /* the line */
  --amber:      #F7B05B;   /* the ground colour, used here only as an accent */

  /* Derived greys — the ink at reduced presence, never a new hue */
  --ink-70:     #4C6379;
  --ink-55:     #6C7F92;
  --rule:       #E9ECEF;
  --bg:         #FFFFFF;

  /* Type. System stack only: no webfont request, nothing to verify, and on
     his Mac and every iPhone this resolves to SF Pro, which is the look. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;        /* readable line length */
  --gutter: clamp(1.5rem, 5vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: .75rem 1rem; border-radius: 6px; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

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


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

.masthead {
  padding: clamp(1.25rem, 4vw, 2rem) var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: inherit;
}

.brand__mark { width: 26px; height: 26px; }

.brand__name {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* The ™.
   Set at full text size it sits on the baseline and reads as a fourth word.
   So: shrink it, then lift it to sit against the cap height of WORKS.

   `position: relative` rather than `vertical-align: super` on purpose —
   `super` participates in line-box calculation and would quietly add leading to
   the masthead. A relative nudge is drawn out of flow and changes no metrics.

   It stays a real U+2122 character in the markup: selectable, copyable, and
   readable by anything that parses text. It is not a ::after and not an image. */
.brand__tm {
  font-size: .58em;
  font-weight: 500;      /* 600 at this size renders as a blob */
  position: relative;
  top: -0.46em;          /* ~cap height for this stack */
  margin-left: .1em;
  letter-spacing: 0;     /* the wordmark's tracking would push it too far right */
}


/* ---------- hero -------------------------------------------------------- */

.hero {
  padding: clamp(2.5rem, 9vw, 6rem) var(--gutter) clamp(3.5rem, 11vw, 8rem);
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}

/* Never below 320px — the engraving is at 1.7 units in a 512 viewBox, so
   anything smaller stops rendering it at all. The max-width guard only bites
   on viewports narrower than ~344px. */
.hero__mark {
  width: clamp(320px, 34vw, 400px);
  max-width: 100%;
  margin: 0 auto clamp(2rem, 6vw, 3.25rem);
}

.hero__title {
  margin: 0 auto;
  max-width: 20ch;
  font-size: clamp(2.05rem, 6.2vw, 3.75rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.hero__lede {
  margin: clamp(1.5rem, 4vw, 2rem) auto 0;
  max-width: var(--measure);
  font-size: clamp(1.06rem, 2.1vw, 1.2rem);
  line-height: 1.62;
  color: var(--ink-70);
  text-wrap: pretty;
}


/* ---------- principles -------------------------------------------------- */

.principles {
  max-width: 58rem;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(4rem, 11vw, 7rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 5vw, 3.25rem) clamp(2.5rem, 6vw, 4.5rem);
}

@media (min-width: 46rem) {
  .principles { grid-template-columns: 1fr 1fr; }
}

/* A hairline, not a card. */
.principle {
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
}

.principle h2 {
  margin: 0 0 .45rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* The one place amber appears. */
.principle h2::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: .55rem;
  vertical-align: .18em;
  border-radius: 50%;
  background: var(--amber);
}

.principle p {
  margin: 0;
  max-width: 30rem;
  color: var(--ink-70);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
}


/* ---------- colophon ---------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--rule);
  padding: clamp(2.5rem, 7vw, 4rem) var(--gutter) clamp(3rem, 8vw, 4.5rem);
  max-width: 58rem;
  margin: 0 auto;
  text-align: center;
}

.colophon__status {
  margin: 0 auto;
  max-width: 30rem;
  color: var(--ink-70);
  font-size: 1rem;
}

.colophon__legal {
  margin: 1.75rem 0 0;
  color: var(--ink-55);
  font-size: .8125rem;
  letter-spacing: .01em;
}


/* ---------- scroll reveal ----------------------------------------------- */
/* Opt-in: main.js adds .reveal-ready, so with JS off everything is simply
   visible rather than stuck at opacity 0. */

.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}

.reveal-ready .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-ready .reveal,
  .reveal-ready .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ---------- the hero owl: idle loop ------------------------------------- */
/*
   Three beats on three periods — blink 7.3s, lean 11s, iris 9.1s. They are
   deliberately not multiples of each other, so the combination drifts and never
   resolves into a rhythm you can anticipate. That drift is the whole trick; it
   is the difference between something alive and something looping.

   Only transforms are animated. There is a lot of dead air between beats, which
   is the point — this runs forever on a phone hero.

   EVERYTHING below is inside prefers-reduced-motion: no-preference. With
   reduced motion asked for, none of it applies and the mark is simply static.
   There is no JS branch and nothing to switch off.

   The engraving paths are not referenced here and never move.
*/

/* transform-box: fill-box makes each element scale or rotate about its own
   bounding box, which is why the blink reads as a lid rather than the eye
   sliding, and why the lean pivots at the feet. */
.hero__mark .ow-eye              { transform-box: fill-box; transform-origin: 50% 50%; }
.hero__mark .ow-root             { transform-box: fill-box; transform-origin: 50% 88%; }
.hero__mark .ow-pupil,
.hero__mark .ow-glint            { transform-box: fill-box; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) {

  /* A blink occupies 3% of the cycle. The right eye is 50ms late — enough that
     it never reads as a metronome, not enough to look broken. */
  @keyframes ow-blink {
    0%, 93.5%, 100% { transform: scaleY(1); }
    96.5%           { transform: scaleY(0.07); }
  }

  /* A shift of weight, not a head tilt: the mark is one continuous path from
     ear to foot, so there is no head to rotate. It pivots at the feet. */
  @keyframes ow-lean {
    0%, 100% { transform: rotate(0deg); }
    40%      { transform: rotate(-1.2deg); }
    72%      { transform: rotate(0.5deg); }
  }

  /* Looks away, holds, comes back. */
  @keyframes ow-iris {
    0%, 40%   { transform: translate(0, 0); }
    52%, 68%  { transform: translate(-3.5px, 1px); }
    80%, 100% { transform: translate(0, 0); }
  }

  .hero__mark .ow-eye--l { animation: ow-blink 7.3s ease-in-out infinite; }
  .hero__mark .ow-eye--r { animation: ow-blink 7.3s ease-in-out infinite; animation-delay: .05s; }

  .hero__mark .ow-root   { animation: ow-lean 11s cubic-bezier(.45,.05,.3,1) infinite; }

  .hero__mark .ow-eye--l .ow-pupil,
  .hero__mark .ow-eye--l .ow-glint { animation: ow-iris 9.1s cubic-bezier(.5,0,.3,1) infinite; }
  .hero__mark .ow-eye--r .ow-pupil,
  .hero__mark .ow-eye--r .ow-glint { animation: ow-iris 9.1s cubic-bezier(.5,0,.3,1) infinite; animation-delay: .1s; }
}