:root {
      --ink: #212537;
      --ink-soft: #465064;
      --paper: #f4eee5;
      --paper-deep: #eae0d2;
      --sand: #d3a36d;
      --clay: #af5841;
      --reef: #7ba2a3;
      --sun: #e5b66a;
      --white: #fffaf3;
      --line: rgba(33, 37, 55, .18);
      --serif: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
      --sans: "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
      --mono: "SF Mono", ui-monospace, Menlo, "Courier New", monospace;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: var(--sans);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    .wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

    .topbar {
      background: var(--ink);
      color: var(--paper);
      font: 500 11px/1 var(--mono);
      letter-spacing: .11em;
      text-transform: uppercase;
    }
    .topbar-inner {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      padding: 13px 0;
    }
    .topbar a { color: var(--sun); }

    header {
      position: relative;
      overflow: hidden;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
    }
    header::before {
      position: absolute;
      inset: 0 0 auto auto;
      width: 42%;
      height: 100%;
      content: "";
      opacity: .36;
      background:
        linear-gradient(135deg, transparent 12%, rgba(175, 88, 65, .15) 12.2%, transparent 12.5%),
        linear-gradient(45deg, transparent 12%, rgba(123, 162, 163, .14) 12.2%, transparent 12.5%);
      background-size: 48px 48px;
      mask-image: linear-gradient(90deg, transparent, #000);
      pointer-events: none;
    }
    nav {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 26px 0 20px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 13px;
      font-weight: 700;
      letter-spacing: -.04em;
      font-size: 18px;
    }
    .brand-mark {
      display: block;
      width: 42px;
      height: 82px;
      flex: 0 0 auto;
      overflow: visible;
      color: var(--ink);
    }
    .brand-mark path, .brand-mark rect { fill: currentColor; }
    .nav-links {
      display: flex;
      gap: 27px;
      font: 500 11px/1 var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .nav-links a { opacity: .72; transition: opacity .2s ease; }
    .nav-links a:hover { opacity: 1; }

    .hero {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      align-items: end;
      gap: 80px;
      min-height: 600px;
      padding: 72px 0 94px;
    }
    .eyebrow {
      margin: 0 0 22px;
      color: var(--clay);
      font: 500 11px/1.2 var(--mono);
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1 {
      max-width: 720px;
      margin-bottom: 25px;
      font: 500 clamp(50px, 7vw, 94px)/.98 var(--serif);
      letter-spacing: -.06em;
    }
    .hero-copy {
      max-width: 525px;
      color: var(--ink-soft);
      font-size: 18px;
      line-height: 1.6;
    }
    .hero-copy strong { color: var(--ink); font-weight: 600; }
    .hero-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 37px;
    }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 48px;
      padding: 0 20px;
      border: 1px solid var(--ink);
      border-radius: 2px;
      background: var(--ink);
      color: var(--paper);
      font: 500 11px/1 var(--mono);
      letter-spacing: .07em;
      text-transform: uppercase;
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }
    .button:hover { transform: translateY(-2px); background: var(--clay); border-color: var(--clay); }
    .button.secondary { background: transparent; color: var(--ink); }
    .button.secondary:hover { color: var(--paper); }
    .arrow { font-size: 18px; line-height: 0; }

    .hero-art {
      display: grid;
      justify-items: center;
      position: relative;
      min-height: 420px;
    }
    .hero-art::after {
      position: absolute;
      right: 8%;
      bottom: 12%;
      width: 70%;
      height: 17px;
      border-radius: 50%;
      content: "";
      background: rgba(33, 37, 55, .16);
      filter: blur(16px);
    }
    .logo-stage {
      position: relative;
      z-index: 1;
      width: min(265px, 57vw);
      height: 385px;
      color: var(--ink);
      transform: rotate(7deg);
      animation: stageFloat 7s ease-in-out infinite;
    }
    .logo-stage svg { overflow: visible; width: 100%; height: 100%; }
    .woven-symbol {
      transform-box: fill-box;
      transform-origin: center;
      animation: textileBreathe 6.8s cubic-bezier(.45, 0, .35, 1) infinite;
    }
    .logo-shadow {
      fill: var(--ink);
      opacity: .13;
      transform: translate(5px, 8px);
      filter: blur(4px);
    }
    .logo-base { fill: var(--ink); }
    .logo-weave { fill: url(#heroIkat); opacity: .98; }
    .logo-grain { fill: url(#ikatGrain); opacity: .42; mix-blend-mode: screen; }
    .logo-edge {
      fill: none;
      stroke: var(--paper);
      stroke-width: 1.1;
      stroke-dasharray: 1 8;
      stroke-linecap: round;
      opacity: .62;
      animation: edgeStitch 9s linear infinite;
    }
    .thread-current {
      fill: none;
      stroke-linecap: round;
      clip-path: url(#logoClip);
      mix-blend-mode: screen;
    }
    .thread-current.warm {
      stroke: var(--sun);
      stroke-width: 7;
      stroke-dasharray: 1 16;
      opacity: .72;
      animation: weftTravel 5.4s linear infinite;
    }
    .thread-current.cool {
      stroke: var(--reef);
      stroke-width: 4;
      stroke-dasharray: 2 13;
      opacity: .72;
      animation: warpTravel 6.2s linear infinite reverse;
    }
    .ikat-glint {
      fill: none;
      stroke: var(--white);
      stroke-width: 18;
      stroke-linecap: round;
      opacity: .13;
      filter: blur(5px);
      clip-path: url(#logoClip);
      animation: glintTravel 6.8s ease-in-out infinite;
    }
    .side-dot {
      fill: url(#heroIkat);
      stroke: var(--ink);
      stroke-width: 2;
      transform-box: fill-box;
      transform-origin: center;
      animation: knotPulse 6.8s ease-in-out infinite;
    }
    .dot-right { animation-delay: -3.4s; }
    .art-note {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 2;
      max-width: 205px;
      padding: 13px 15px;
      background: var(--sun);
      font: 500 10px/1.45 var(--mono);
      letter-spacing: .03em;
      text-transform: uppercase;
      transform: rotate(-4deg);
    }
    .art-note strong { display: block; margin-bottom: 6px; color: var(--ink); font-weight: 600; }
    .art-note span { display: block; color: rgba(33, 37, 55, .72); }
    @keyframes stageFloat {
      0%, 100% { transform: rotate(7deg) translateY(0); }
      50% { transform: rotate(7deg) translateY(-8px); }
    }
    @keyframes textileBreathe {
      0%, 100% { transform: scale(1) skewY(0deg); }
      48% { transform: scale(1.012, .994) skewY(.35deg); }
      72% { transform: scale(.997, 1.006) skewY(-.18deg); }
    }
    @keyframes edgeStitch { to { stroke-dashoffset: -72; } }
    @keyframes weftTravel { to { stroke-dashoffset: -136; } }
    @keyframes warpTravel { to { stroke-dashoffset: 124; } }
    @keyframes glintTravel {
      0%, 12% { transform: translate(-260px, 170px) rotate(-28deg); opacity: 0; }
      28% { opacity: .2; }
      58%, 100% { transform: translate(280px, -180px) rotate(-28deg); opacity: 0; }
    }
    @keyframes knotPulse {
      0%, 100% { transform: scale(.88); opacity: .72; }
      50% { transform: scale(1.08); opacity: 1; }
    }

    .stripe {
      height: 11px;
      background: repeating-linear-gradient(135deg, var(--clay) 0 14px, var(--sun) 14px 27px, var(--reef) 27px 39px, var(--ink) 39px 45px);
    }
    .section { padding: 115px 0; }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 52px;
    }
    .section-head h2 {
      max-width: 560px;
      margin-bottom: 0;
      font: 500 clamp(36px, 5vw, 65px)/1 var(--serif);
      letter-spacing: -.055em;
    }
    .section-head p {
      max-width: 360px;
      margin-bottom: 3px;
      color: var(--ink-soft);
      font-size: 15px;
    }

    .story-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
    }
    .story-lead {
      font: 500 clamp(24px, 3vw, 38px)/1.2 var(--serif);
      letter-spacing: -.04em;
    }
    .story-body {
      columns: 2;
      column-gap: 34px;
      color: var(--ink-soft);
      font-size: 15px;
    }
    .story-body p { break-inside: avoid; }
    .story-body strong { color: var(--ink); font-weight: 600; }
    .fact-band {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      margin-top: 80px;
      background: var(--line);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .fact {
      padding: 28px 25px 26px;
      background: var(--paper);
    }
    .fact-number {
      display: block;
      margin-bottom: 7px;
      color: var(--clay);
      font: 500 34px/1 var(--serif);
      letter-spacing: -.04em;
    }
    .fact-label {
      display: block;
      font: 500 10px/1.5 var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .downloads {
      background: var(--ink);
      color: var(--paper);
    }
    .downloads .eyebrow { color: var(--sun); }
    .downloads .section-head p { color: rgba(244, 238, 229, .68); }
    .asset-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px 18px;
    }
    .asset-card { min-width: 0; }
    .asset-card.feature { grid-column: 1 / -1; }
    .asset-image {
      position: relative;
      overflow: hidden;
      aspect-ratio: 3 / 4;
      background: #1a1e2c;
    }
    .asset-card.feature .asset-image { aspect-ratio: 2.2 / 1; }
    .asset-image img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s cubic-bezier(.2,.7,.2,1);
    }
    .asset-card:hover .asset-image img { transform: scale(1.035); }
    .logo-plate {
      display: grid;
      place-items: center;
      background:
        linear-gradient(160deg, rgba(229, 182, 106, .28), transparent 42%),
        linear-gradient(320deg, rgba(123, 162, 163, .35), transparent 46%),
        var(--paper);
    }
    .logo-plate img {
      width: auto;
      height: 78%;
      max-width: 46%;
      object-fit: contain;
    }
    .asset-card:hover .logo-plate img { transform: none; }
    .asset-index {
      position: absolute;
      z-index: 1;
      top: 12px;
      left: 12px;
      padding: 6px 7px 5px;
      background: var(--paper);
      color: var(--ink);
      font: 500 10px/1 var(--mono);
    }
    .asset-meta {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding: 15px 0 11px;
      border-bottom: 1px solid rgba(244, 238, 229, .22);
    }
    .asset-meta h3 {
      margin: 0;
      font: 500 19px/1.15 var(--serif);
    }
    .asset-meta span {
      flex: 0 0 auto;
      color: var(--sun);
      font: 400 9px/1 var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .download-button {
      display: inline-flex;
      align-items: center;
      width: 100%;
      margin-top: 13px;
      padding: 0;
      border: 0;
      background: none;
      color: rgba(244, 238, 229, .7);
      cursor: pointer;
      text-align: left;
      font: 500 10px/1.2 var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: color .2s ease;
    }
    .download-button:hover { color: var(--sun); }
    .download-button span { margin-left: 7px; font-size: 16px; vertical-align: -1px; }
    .license-note {
      margin-top: 34px;
      color: rgba(244, 238, 229, .5);
      font: 400 11px/1.5 var(--mono);
    }
    .license-note b, .license-note strong { color: var(--sun); font-weight: 500; }

    .contact {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 90px;
      align-items: start;
    }
    .contact h2 { margin-bottom: 20px; font: 500 clamp(40px, 5vw, 67px)/.98 var(--serif); letter-spacing: -.055em; }
    .contact-intro { max-width: 400px; color: var(--ink-soft); }
    .contact-card {
      padding: 31px;
      border: 1px solid var(--line);
      background: rgba(255, 250, 243, .42);
    }
    .contact-card .eyebrow { margin-bottom: 16px; }
    .contact-name { margin-bottom: 25px; font: 500 28px/1.1 var(--serif); }
    .contact-link {
      display: block;
      padding: 14px 0;
      border-top: 1px solid var(--line);
      font: 500 12px/1 var(--mono);
    }
    .contact-link:hover { color: var(--clay); }
    .contact-link .go { float: right; color: var(--clay); }

    footer {
      padding: 28px 0 38px;
      background: var(--paper-deep);
      border-top: 1px solid var(--line);
    }
    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      font: 400 10px/1.5 var(--mono);
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .socials { display: flex; flex-wrap: wrap; gap: 18px; color: var(--ink-soft); }
    .socials a:hover { color: var(--clay); }

    @media (max-width: 900px) {
      .hero { grid-template-columns: 1fr; gap: 25px; padding-top: 52px; }
      .hero-art { min-height: 330px; margin-top: -15px; }
      .logo-stage { height: 320px; }
      .art-note { right: 12%; }
      .story-grid, .contact { gap: 40px; }
      .asset-grid { grid-template-columns: 1fr 1fr; row-gap: 34px; }
      .asset-card.feature, .logo-card { grid-column: 1 / -1; }
      .logo-plate { aspect-ratio: 16 / 9; }
    }
    @media (max-width: 640px) {
      .wrap { width: min(100% - 32px, 1180px); }
      .topbar-inner { display: block; line-height: 1.6; }
      .topbar-inner > span { display: block; }
      nav { padding-top: 20px; }
      .nav-links { gap: 12px; font-size: 9px; }
      .brand-mark { width: 34px; height: 66px; }
      .hero { min-height: 0; padding: 56px 0 65px; }
      h1 { font-size: clamp(52px, 15vw, 78px); }
      .hero-copy { font-size: 16px; }
      .hero-art { min-height: 292px; }
      .logo-stage { width: 192px; height: 280px; }
      .art-note { right: 0; bottom: 4px; }
      .section { padding: 75px 0; }
      .section-head { display: block; margin-bottom: 34px; }
      .section-head p { margin-top: 22px; }
      .story-grid, .contact { grid-template-columns: 1fr; }
      .story-body { columns: 1; }
      .fact-band { grid-template-columns: 1fr; margin-top: 45px; }
      .fact { padding: 22px 20px; }
      .asset-grid { grid-template-columns: 1fr; gap: 28px; }
      .asset-card.feature .asset-image { aspect-ratio: 4 / 3; }
      .asset-meta { display: block; }
      .asset-meta span { display: block; margin-top: 8px; }
      .contact-card { padding: 23px; }
      .footer-inner { display: block; }
      .socials { margin-top: 20px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
      .logo-stage { animation: none !important; transform: rotate(7deg) !important; }
      .woven-symbol, .side-dot, .logo-edge, .thread-current, .ikat-glint { animation: none !important; }
      .woven-symbol { transform: none !important; }
      .ikat-glint { opacity: 0 !important; }
    }

    ::selection { background: #e5b66a; color: #212537; }
    h1 em, .contact h2 em { font-style: italic; }
    .story-body a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
    .edit-entry { color: var(--clay); }
    .edit-entry:hover { color: var(--ink); }

    .edit-href {
      display: grid;
      gap: 4px;
      margin-top: 8px;
      color: var(--ink-soft);
      font: 500 10px/1.3 var(--mono);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .downloads .edit-href { color: rgba(244, 238, 229, .62); }
    .edit-href input {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 2px;
      background: var(--white);
      color: var(--ink);
      font: 400 13px/1.4 var(--sans);
      letter-spacing: 0;
      text-transform: none;
    }
    .hero-actions .edit-href { flex: 1 0 100%; max-width: 420px; }

    body.is-editing { padding-bottom: 96px; }
    body.is-editing .story-body { columns: 1; }
    body.is-editing [data-field] {
      outline: 1px dashed rgba(175, 88, 65, .55);
      outline-offset: 4px;
      cursor: text;
      border-radius: 2px;
    }
    body.is-editing [data-field]:focus {
      outline: 2px solid var(--clay);
      background: rgba(255, 250, 243, .45);
    }
    body.is-editing .downloads [data-field]:focus { background: rgba(255, 250, 243, .08); }

    .editbar {
      position: fixed;
      z-index: 30;
      left: 16px;
      right: 16px;
      bottom: 16px;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 10px 12px 10px 14px;
      background: var(--ink);
      color: var(--paper);
      box-shadow: 0 16px 40px rgba(33, 37, 55, .28);
    }
    .editbar-tools { display: flex; gap: 6px; }
    .editbar-tools button, .editbar-actions button, .editbar-actions a {
      border: 1px solid rgba(244, 238, 229, .28);
      background: transparent;
      color: var(--paper);
      cursor: pointer;
      font: 500 11px/1 var(--mono);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .editbar-tools button {
      min-width: 36px;
      height: 34px;
      padding: 0 10px;
    }
    .editbar-tools button:hover, .editbar-actions button:hover, .editbar-actions a:hover {
      border-color: var(--sun);
      color: var(--sun);
    }
    .editbar-status {
      flex: 1;
      margin: 0;
      color: rgba(244, 238, 229, .72);
      font: 400 11px/1.4 var(--mono);
      letter-spacing: .03em;
    }
    .editbar-actions { display: flex; gap: 8px; }
    .editbar-actions a, .editbar-actions button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 12px;
    }
    .editbar-actions button {
      background: var(--sun);
      border-color: var(--sun);
      color: var(--ink);
    }
    .editbar-actions button:hover { color: var(--ink); background: #f0cb86; }
    .gate {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 32px 16px;
    }
    .gate-card {
      width: min(440px, 100%);
      padding: 36px 32px 32px;
      border: 1px solid var(--line);
      background: rgba(255, 250, 243, .62);
    }
    .gate-card h1 {
      margin: 0 0 12px;
      font: 500 48px/1 var(--serif);
      letter-spacing: -.045em;
    }
    .gate-card p { max-width: 36ch; color: var(--ink-soft); }
    .gate-card label {
      display: block;
      margin: 26px 0 8px;
      font: 500 11px/1 var(--mono);
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .gate-card input {
      width: 100%;
      min-height: 48px;
      padding: 0 12px;
      border: 1px solid var(--ink);
      border-radius: 2px;
      background: var(--white);
      color: var(--ink);
      font: 16px/1.4 var(--sans);
    }
    .gate-card .button { margin-top: 18px; }
    .gate-error { margin-top: 14px; color: var(--clay); }
    @media (max-width: 720px) {
      body.is-editing { padding-bottom: 132px; }
      .editbar { flex-wrap: wrap; gap: 10px; left: 10px; right: 10px; bottom: 10px; }
      .editbar-status { flex: 1 0 100%; order: 3; }
    }