/* ══════════════════════════════════════════════════════
   BOROGODÓ — design studio
   Palette: plant green · dendê orange · light tan
   ══════════════════════════════════════════════════════ */

:root{
  --paper:      #F7F7F5;   /* off-white — the ground */
  --paper-2:    #EEEEEB;   /* off-white, one step down */
  --hair:       #DBDBD5;   /* rules inside white boxes */
  --white:      #FFFFFF;
  --ink:        #0E0E0E;   /* true black — type and the wordmark only */
  --line:       #2E2E2A;   /* the mural: solid, never transparent, a shade off the wordmark black */
  --grey:       #6B6B66;   /* quiet labels */
  /* colour has exactly three jobs and no others */
  --cta:        #1B6B3C;   /* plant green — buttons and links */
  --cta-dark:   #14452C;
  --hl:         #F26A1B;   /* orange — highlighted words, legible on paper AND on a run */
  --cta-bright: #34A75E;   /* green loud enough to hold up over the black */
  --hover:      #EFE2C4;   /* light tan — hover fills */

  --rule: 3px;             /* the outline weight, everywhere */
  --rule-fat: 7px;         /* the logo box */
  --pad: clamp(1.25rem, 5vw, 5rem);

  /* the whole point: a machine face against hand-cut shapes */
  --logo:    "Fraunces", Georgia, serif;              /* the wordmark, and nothing else */
  --display: "IBM Plex Mono", ui-monospace, monospace; /* slogan, heads, labels, UI */
  --body:    "IBM Plex Sans", system-ui, sans-serif;   /* paragraphs only */
}

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

html{ scroll-behavior: smooth; background: var(--paper); }

body{
  margin:0;
  position: relative;
  isolation: isolate;   /* the runs are composited (they animate transforms) and mobile
                           browsers will not blend against a composited layer unless it
                           and the type share one blending group. this creates it. */   /* the mural is painted on the whole wall, not the window */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.32rem, .72vw + 1.16rem, 1.5rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;   /* not hidden: hidden on one axis computes the other to auto, which
                         turns body into a scroll container and lets it scroll past the
                         footer into blank space. clip constrains without scrolling. */
}

::selection{ background: var(--hl); color: var(--white); }

a{ color: inherit; }

:focus-visible{
  outline: var(--rule) solid var(--cta);
  outline-offset: 3px;
}

.sprites{ position:absolute; width:0; height:0; overflow:hidden; }

/* ══════════  the swaying garden  ══════════ */

.field{
  position: absolute;   /* spans the document, so the runs keep coming as you scroll */
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* The runs are transformed (they sway), and a transformed descendant is not
     reliably clipped out of the document scroll area by overflow:hidden on iOS
     — it clips the paint but the box still counts, so the page scrolls past the
     footer into blank space. Measured: the run geometry reaches ~110px beyond
     the document. clip-path clips for real, transforms included. */
  clip-path: inset(0);
}

/* The run is a div, the artwork is the svg inside it. That split matters: an
   svg is a replaced element, so top/bottom will not stretch it and its height
   can only come from a percentage — and when that percentage fails to resolve,
   the svg falls back to its own intrinsic size, a 4300-unit viewBox, and the
   page scrolls for miles past the footer. A div stretches on top/bottom with no
   percentage anywhere, giving the svg inside a definite box to fill. */
.run{
  position: absolute;
  top: 0;
  bottom: 0;
  color: var(--line);
  transform-origin: 50% 50%;   /* a full-wall run pivots on its middle */
  animation: sway var(--dur, 9s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.plant{
  display: block;
  width: 100%;
  height: 100%;
}

/* the swing: out, back past centre, a half-beat hitch, home again */
/* a breeze is not a metronome: a gust, a partial settle, a smaller second
   push, then a long drift home. uneven stops are what sell it. */
@keyframes sway{
  0%, 100% { rotate: var(--a); translate: var(--x1) 0; }
  22%      { rotate: var(--b); translate: var(--x2) 0; }
  44%      { rotate: var(--c); translate: var(--x3) 0; }
  68%      { rotate: var(--d); translate: var(--x4) 0; }
  86%      { rotate: var(--e); translate: var(--x5) 0; }
}

/* one run per side, spanning the whole wall. it enters below the document and
   leaves through the top, so it is never cut anywhere on the page. both stay
   wide of the centre column, which is what keeps type off them. */
.p1 { left: -9vw; width: 40vw; min-width:360px; 
      --a:-2.6deg; --b:2.4deg; --c:-.9deg; --d:1.9deg; --e:-1.6deg;
      --x1:-46px; --x2:42px; --x3:-14px; --x4:30px; --x5:-26px;
      --dur:33s; --delay:-8s; }
.p2 { right:-11vw; width: 38vw; min-width:340px; 
      --a:2.4deg; --b:-2.7deg; --c:.85deg; --d:-2deg; --e:1.5deg;
      --x1:44px; --x2:-48px; --x3:13px; --x4:-32px; --x5:25px;
      --dur:41s; --delay:-31s; }

/* Narrow-format runs for small screens. Squeezing the wide artwork just thins
   the ribbon into a blade of grass — preserveAspectRatio:none scales thickness
   with the box — so these are drawn on a narrow canvas instead: same ribbon
   weight relative to the frame, far less lateral travel. */
.p1n, .p2n{ display: none; }
.p1n{ left: -8vw; width: 32vw; 
      --a:-2.5deg; --b:2.3deg; --c:-.85deg; --d:1.8deg; --e:-1.5deg;
      --x1:-27px; --x2:25px; --x3:-8px; --x4:18px; --x5:-15px;
      --dur:31s; --delay:-8s; }
.p2n{ right: -9vw; width: 30vw; 
      --a:2.3deg; --b:-2.6deg; --c:.8deg; --d:-1.9deg; --e:1.4deg;
      --x1:26px; --x2:-28px; --x3:8px; --x4:-19px; --x5:15px;
      --dur:39s; --delay:-31s; }

/* Type that a run passes behind is set in white and differenced against it:
   near-black on the paper, near-white the moment a run slides underneath.
   Accent words stay outside the blend so orange stays orange. */
/* Solid ink is the base; the knock-out is layered on where blending exists. */
.knock{ color: var(--ink); }

@supports (mix-blend-mode: difference){
  .knock{
    color: var(--white);
    mix-blend-mode: difference;
  }
}

/* ══════════  the mark  ══════════ */

.mark{
  display: inline-block;
  background: var(--white);
  color: var(--ink);
  font-family: var(--logo);
  font-weight: 800;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  letter-spacing: -.035em;
  line-height: .96;
  text-decoration: none;
  border: var(--rule-fat) solid var(--ink);
}
.mark__accent{ color: inherit; }

.mark--lg{
  font-size: clamp(3rem, 12.5vw, 10rem);
  padding: .1em .16em .18em;
  border-width: clamp(5px, 1.1vw, 12px);
}
.mark--sm{
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  padding: .12em .3em .2em;
  border-width: var(--rule);
}
/* Just the accented o. The hero carries the full wordmark, so the nav takes the
   one glyph the name turns on rather than repeating it. */
.mark--mono{
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1;
  padding: .06em .22em .2em;
  border-width: var(--rule);
}

.mark--xs{
  font-size: 1.1rem;
  padding: .1em .28em .18em;
  border-width: 2px;
}

/* ══════════  nav  ══════════ */

.nav{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 2.5rem var(--pad) 1.25rem;   /* room for the utility line above */
}
.nav__links{
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.2vw, 2rem);
  font-family: var(--display);
  font-size: 1.13rem;
  font-weight: 500;
  letter-spacing: -.02em;
}
.nav__links a{ text-decoration: none; padding: .4em .1em; border-bottom: 2px solid transparent; }
.nav__links a:hover{ border-bottom-color: var(--hl); }
/* A utility link, not a destination: lifted out of the row and sat in the top
   right corner, where a language switch is looked for. No box — the border was
   clipping at this size. */
.nav__lang{
  position: absolute;
  top: .7rem;
  right: var(--pad);
  font-size: .74rem;
  letter-spacing: .1em;
  opacity: .7;
  padding: 0 !important;
  border-bottom: none !important;
}
.nav__lang:hover{ opacity: 1; text-decoration: underline; }

.nav__links a.nav__cta{
  font-weight: 600;
  background: var(--cta);
  color: var(--white);
  padding: .55em .95em;
  border-bottom: none !important;
}
.nav__links a.nav__cta:hover{ background: var(--cta-dark); color: var(--white); }

/* ══════════  hero  ══════════ */

.hero{
  position: relative;
  padding: clamp(2rem, 7vw, 5.5rem) var(--pad) clamp(4rem, 10vw, 8rem);
  text-align: center;
}

.hero__logo{
  display: inline-block;
  position: relative;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.hero__line{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.55rem, 4.6vw, 3.6rem);
  line-height: 1.14;
  letter-spacing: -.045em;
  max-width: 21ch;
  margin: 0 auto;
  text-wrap: balance;
}
.hero__line em{
  font-style: normal;
  font-weight: 800;
  color: var(--hl);
}

/* the second half of the name: borogodo is charm, so the charm gets said out loud */
.hero__sub{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.45vw, 1.73rem);
  letter-spacing: -.03em;
  line-height: 1.45;
  max-width: 34ch;
  margin: clamp(1rem, 2.2vw, 1.5rem) auto 0;
  text-wrap: balance;
}
.hero__sub em{ font-style: normal; font-weight: 600; color: var(--hl); }

.entry{
  max-width: 46ch;
  margin: clamp(1.75rem, 4vw, 2.75rem) auto 0;
  padding: 1.1rem 1.4rem;
  background: var(--white);
  border: var(--rule) solid var(--ink);
  text-align: left;
}
.entry__head{ margin: 0 0 .35rem; }
.entry__word{
  font-family: var(--logo);
  font-style: italic;
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -.01em;
}
.entry__pos{
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-left: .5rem;
}
.entry__def{ margin: 0; font-size: .96rem; line-height: 1.55; }

.hero__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.btn{
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95em 1.6em;
  border: var(--rule) solid var(--ink);
  transition: background .18s ease, color .18s ease, translate .18s ease;
}
.btn--solid{ background: var(--cta); color: var(--white); border-color: var(--cta); }
.btn--solid:hover{ background: var(--cta-dark); border-color: var(--cta-dark); translate: 0 -3px; }
.btn--ghost{ background: var(--white); color: var(--ink); }
.btn--ghost:hover{ background: var(--ink); color: var(--paper); translate: 0 -3px; }
.btn--big{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.95rem, 2.4vw, 1.5rem);
  letter-spacing: -.04em;
  text-transform: none;
  padding: .5em .8em .58em;
  border-width: clamp(4px, .5vw, 6px);
}

/* ══════════  statement band  ══════════ */

.band{
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(3rem, 8vw, 6.5rem) var(--pad);
  text-align: center;
}
.band__eyebrow{
  font-family: var(--display);
  margin: 0 0 1.25rem;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hl);
}
.band__statement{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.25rem, 3.1vw, 2.35rem);
  line-height: 1.32;
  letter-spacing: -.035em;
  max-width: 26ch;
  margin: 0 auto;
  text-wrap: balance;
}
.band__statement em{ font-style: normal; color: var(--hl); }
.band__sub{
  max-width: 56ch;
  margin: 1.6rem auto 0;
  font-size: 1.15rem;
  color: color-mix(in srgb, var(--paper) 70%, var(--ink));
}

/* ══════════  shared section head  ══════════ */

.head{
  color: var(--cta-bright);   /* green loud enough to read on paper and on a run */
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.7vw, 1.85rem);
  letter-spacing: -.04em;
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
  display: inline-block;
  border-bottom: var(--rule) solid var(--hl);
  padding-bottom: .18em;
}

/* ══════════  what we make  ══════════ */

.make{
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad);
}
.make__lead{
  max-width: 58ch;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: 1.15rem;
}

.make__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
}
.box{
  background: var(--white);
  border: var(--rule) solid var(--ink);
  padding: clamp(1.3rem, 2.4vw, 2rem);
}
.box__title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -.035em;
  margin: 0 0 .6rem;
}
.box__body{ margin: 0 0 1.15rem; font-size: 1.27rem; }
.box__list{
  font-family: var(--display);
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--hair);
  font-size: 1.09rem;
  font-weight: 600;
  letter-spacing: .04em;
}
.box__list li{ padding: .55rem 0 .55rem 1.15rem; border-bottom: 2px solid var(--hair); position: relative; }
.box__list li::before{
  content:"";
  position:absolute;
  left:0; top:1.05em;
  width:7px; height:7px;
  background: var(--hl);
}

/* ══════════  contact  ══════════ */

.contact{
  position: relative;
  padding: clamp(3.5rem, 9vw, 7rem) var(--pad);
  text-align: center;
}
.contact__eyebrow{
  font-family: var(--display);
  margin: 0 0 1rem;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grey);
}
.contact__head{
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 3.6vw, 2.7rem);
  line-height: 1.18;
  letter-spacing: -.04em;
  margin: 0 auto;
  max-width: 20ch;
  text-wrap: balance;
}
.contact__body{ max-width: 48ch; margin: 1.25rem auto 2rem; font-size: 1.3rem; }
.contact__note{
  margin: 1.5rem 0 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ══════════  footer  ══════════ */

.foot{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem var(--pad) 2rem;
  border-top: var(--rule) solid var(--ink);
  background: var(--paper-2);
}
.foot__meta{
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ══════════  quiet mode  ══════════ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .run{ animation: none; rotate: var(--a); translate: var(--x1) 0; }
  *{ transition-duration: .01ms !important; }
}

/* As the wall narrows the runs shrink and pull toward the edges, so the
   composition stays a side framing instead of crossing every line of type —
   the knock-out becomes a grace note rather than something the page leans on.
   The min-width matters as much as the width: left alone, a 360px floor eats
   most of a phone screen. */
@media (max-width: 1100px){
  .p1{ left:-10vw; width: 36vw; min-width: 285px; }
  .p2{ right:-12vw; width: 34vw; min-width: 270px; }
}

@media (max-width: 820px){
  .p1, .p2{ display: none; }
  .p1n, .p2n{ display: block; }

  /* Mobile engines report support for mix-blend-mode, take the white-text
     branch, then never composite — leaving the type invisible. The blend is
     simply off here.
     A single grey cannot serve both grounds: the balance point lands at ~3.5:1
     each way, which holds a headline but leaves small copy soft. So the type
     keeps full-strength ink — 18:1 on the paper, where nearly all of it sits —
     and carries a one-pixel paper outline that only shows itself where a run
     passes behind, separating the glyphs from the dark without touching the
     runs or the layout. Invisible on paper: it is the paper colour. */
  .knock, .head{
    mix-blend-mode: normal;
    text-shadow:
       1px  1px 0 var(--paper),
      -1px  1px 0 var(--paper),
       1px -1px 0 var(--paper),
      -1px -1px 0 var(--paper),
       2px  0   0 var(--paper),
      -2px  0   0 var(--paper),
       0    2px 0 var(--paper),
       0   -2px 0 var(--paper);
  }
  .knock{ color: var(--ink); }
}

@media (max-width: 600px){
  /* far enough in that the run stays on screen through the whole swing —
     any further out and the leftward half of each wave falls off the canvas
     and the band vanishes for a stretch of the page */
  .p1n{ left: -7vw; width: 34vw; }
  .p2n{ right:-8vw; width: 32vw; }

  .nav{ justify-content: center; row-gap: .9rem; }
  .nav__links{ justify-content: center; flex-wrap: wrap; gap: .8rem 1.1rem; font-size: .74rem; }
  .entry{ padding: 1rem 1.1rem; }
}