@font-face {
  font-family:Loom Sans;
  src:url('/assets/SourceSans3.ttf') format('truetype');
  font-display:swap
}
@font-face {
  font-family:Loom Inscription;
  src:url('/assets/Cinzel.ttf') format('truetype');
  font-display:swap
}
:root {
  --night:#041c29;
  --deep:#062a35;
  --cyan:#6ae8df;
  --gold:#dfbd6c;
  --pale:#eff5ef;
  --muted:#a3b9b8;
  --line:#31505a;
  --rust:#dfbd6c;
  color-scheme:dark
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body {
  margin:0;
  background:var(--night);
  color:var(--pale);
  font:17px/1.65 'Loom Sans',Arial,sans-serif
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  touch-action:manipulation
}
button,a {
  -webkit-tap-highlight-color:transparent
}
img {
  display:block;
  max-width:100%
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:400
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:6px
}
.skip {
  position:fixed;
  top:-100px;
  left:12px;
  z-index:50;
  padding:12px 20px;
  background:var(--pale);
  color:var(--night)
}
.skip:focus {
  top:12px
}
[hidden] {
  display:none!important
}
.overline,.eyebrow {
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:600;
  line-height:1.5
}
.studio-header {
  height:124px;
  padding:10px 5.5vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  background:#041c29;
  border-bottom:1px solid #bba16b30;
  position:relative;
  z-index:2
}
.studio-logo {
  width:310px;
  flex-shrink:0
}
.studio-logo img {
  width:100%;
  height:auto
}
.studio-header nav {
  display:flex;
  gap:38px;
  font-size:13px;
  letter-spacing:.04em;
  color:#d0ded7
}
.studio-header nav a {
  padding:13px 0
}
.studio-header nav a:hover {
  color:var(--gold)
}
.studio-header nav span {
  font-size:11px;
  margin-left:15px;
  color:var(--gold)
}
.loom-scene {
  position:relative;
  min-height:760px;
  height:calc(100svh - 124px);
  max-height:1050px;
  overflow:hidden;
  isolation:isolate
}
.world-art {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#041c29 0%,#041c29e3 17%,#041c2970 44%,#041c2900 68%),linear-gradient(0deg,#041c29 0%,transparent 27%,#041c2940 100%),url('/assets/living-loom.webp') 64% 50%/cover no-repeat;
  z-index:-2
}
.loom-scene::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,#041c29a6,transparent 20%,transparent 80%,#041c29);
  z-index:-1
}
#living-thread {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.65
}
.scene-copy {
  position:relative;
  padding:90px 0 120px;
  margin-left:10vw;
  max-width:560px
}
.scene-copy>.overline {
  color:#a4cdce;
  margin-bottom:33px;
  font-size:9px;
  letter-spacing:.28em
}
.scene-copy h1 {
  font-family:'Loom Inscription',Georgia,serif;
  font-size:clamp(44px,4.9vw,77px);
  letter-spacing:-.045em;
  line-height:1.22;
  text-shadow:0 2px 35px #041c29
}
.scene-copy .begins {
  font-family:'Loom Sans',sans-serif;
  font-size:.27em;
  letter-spacing:.36em;
  line-height:2.5;
  text-transform:uppercase;
  font-weight:400;
  display:inline-block;
  margin-block:8px;
  vertical-align:middle
}
.scene-copy h1 em {
  font-family:Georgia,serif;
  color:var(--gold);
  font-size:1.22em;
  font-weight:400;
  line-height:1
}
.scene-intro {
  color:#c1d2ce;
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
  margin-top:29px
}
.thread-link {
  display:inline-flex;
  align-items:center;
  gap:17px;
  padding-block:14px;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--gold);
  position:relative
}
.thread-link::after {
  content:'';
  position:absolute;
  bottom:7px;
  left:47px;
  right:0;
  height:1px;
  background:linear-gradient(90deg,#dfbd6ca0,#dfbd6c00);
  transition:opacity .25s;
  opacity:.5
}
.thread-link:hover::after {
  opacity:1
}
.thread-knot {
  width:32px;
  height:32px;
  border:1px solid #d8b76c60;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:23px;
  line-height:1;
  transition:transform .5s
}
.thread-link:hover .thread-knot {
  transform:rotate(90deg)
}
.scene-copy .thread-link {
  margin-top:26px
}
.scene-annotation {
  position:absolute;
  right:27px;
  top:75px;
  writing-mode:vertical-rl;
  color:#a5c2bf;
  font-size:8px;
  letter-spacing:.26em;
  display:flex;
  align-items:center;
  gap:18px;
  z-index:1
}
.scene-annotation i {
  width:1px;
  height:80px;
  background:linear-gradient(#dfbd6c90,transparent)
}
.scene-foot {
  position:absolute;
  bottom:35px;
  left:10vw;
  right:5.5vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  font-size:12px;
  letter-spacing:.02em;
  color:#92b1b1
}
.scene-foot>span {
  font-size:8px;
  letter-spacing:.23em;
  color:#c4ad75
}
.loom-room {
  position:relative;
  padding:100px 9vw 110px;
  background:radial-gradient(ellipse at 50% 0%,#0c39463d,transparent 55%)
}
.room-heading {
  text-align:center
}
.ornament {
  font-size:25px;
  color:var(--gold);
  display:block;
  margin-bottom:20px
}
.room-heading .overline {
  color:#b0c3bd;
  margin-bottom:25px
}
.room-heading h2 {
  font-family:'Loom Inscription',Georgia,serif;
  font-size:clamp(26px,3vw,44px);
  letter-spacing:-.03em;
  line-height:1.5
}
.room-heading h2 em {
  color:var(--gold);
  font-family:Georgia,serif;
  font-size:1.08em
}
.studio-note {
  width:min(690px,100%);
  margin:45px auto 0;
  text-align:center;
  color:#b0c5c3;
  font-size:18px;
  position:relative
}
.studio-note p+p {
  margin-top:20px
}
.note-line {
  display:block;
  width:100px;
  height:1px;
  background:linear-gradient(90deg,transparent,#dfbd6c90,transparent);
  margin:0 auto 30px
}
.thought-loom {
  position:relative;
  margin:90px auto 0;
  width:min(950px,100%);
  padding:35px 0 0
}
.thought-spine {
  position:absolute;
  top:75px;
  left:0;
  right:0;
  height:145px;
  opacity:.42;
  pointer-events:none
}
.thought-spine svg {
  width:100%;
  height:100%
}
.thought-spine path {
  stroke:#c6a664;
  stroke-width:.6
}
.thought-instruction {
  text-align:center;
  font-size:11px;
  color:#87aaa9;
  letter-spacing:.06em
}
.thread-choices {
  display:flex;
  justify-content:space-around;
  gap:30px;
  position:relative;
  margin-top:33px
}
.thread-choice {
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:12px;
  background:transparent;
  border:0;
  color:#b0c5c3;
  cursor:pointer;
  padding:0 20px 15px;
  min-width:150px
}
.choice-star {
  font-size:38px;
  line-height:1.1;
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#041c29;
  border:1px solid #a88f5e50;
  color:#c6a86b;
  transition:box-shadow .3s,color .3s,border .3s
}
.thread-choice>span:nth-child(2) {
  font-family:Georgia,serif;
  font-size:27px
}
.thread-choice small {
  font-size:8px;
  letter-spacing:.25em;
  color:#829f9e
}
.thread-choice.selected .choice-star {
  color:var(--cyan);
  border-color:#6ae8df75;
  box-shadow:0 0 35px #4ae7d91b,inset 0 0 15px #4ae7d911
}
.thread-choice:hover .choice-star {
  box-shadow:0 0 25px #dfbd6c20;
  border-color:#dfbd6c
}
.thread-choice.selected>span:nth-child(2) {
  color:#e6cf98
}
.thought-reveal {
  max-width:530px;
  min-height:150px;
  margin:35px auto 0;
  text-align:center
}
.thought-reveal>p:first-child {
  font-family:'Loom Inscription',Georgia,serif;
  font-size:26px;
  color:#e3c78c;
  letter-spacing:.03em;
  margin-bottom:15px
}
.thought-reveal>p:last-child {
  color:#a6c0bd;
  font-size:17px;
  line-height:1.8
}
.founder-story {
  width: min(1120px, calc(100% - 130px));
  margin: 0 auto 100px;
  padding-top: 65px;
  border-top: 1px solid #c8a76533;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
}
.story-heading {
  padding-top: 10px;
}
.story-star {
  display: block;
  color: var(--gold);
  font-size: 23px;
  margin-bottom: 24px;
}
.story-heading .overline {
  font-size: 8px;
  color: #90b4ae;
  letter-spacing: .19em;
  margin-bottom: 24px;
}
.story-heading h2 {
  font-family: 'Loom Inscription', Georgia, serif;
  font-size: clamp(28px, 3.1vw, 43px);
  letter-spacing: -.04em;
  line-height: 1.5;
}
.story-heading h2 em {
  font-family: Georgia, serif;
  font-size: 1.12em;
  color: var(--gold);
}
.story-heading blockquote {
  margin: 42px 0 20px;
  padding-left: 23px;
  border-left: 1px solid #dfbd6c77;
  color: #d9ddc7;
  font: italic 25px/1.6 Georgia, serif;
}
.story-signature {
  display: block;
  padding-left: 24px;
  color: #789d9c;
  font-size: 8px;
  letter-spacing: .18em;
}
.story-pages {
  padding-left: 35px;
  border-left: 1px solid #bca36a22;
  color: #aac2bd;
  font-size: 17px;
  line-height: 1.9;
}
.story-pages p+p {
  margin-top: 23px;
}
.story-pages .story-opening {
  color: #d4e0d5;
  font-size: 19px;
  line-height: 1.85;
}
.story-pages .story-coda {
  margin-top: 35px;
  color: #d3ba7e;
  font: italic 20px/1.8 Georgia, serif;
}
.story-coda span {
  color: #93b4af;
  font-size: 17px;
}
.public-world {
  width:min(1120px,calc(100% - 130px));
  margin:0 auto 100px;
  padding:70px 0 55px;
  position:relative;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:70px;
  border-block:1px solid #dfbd6c33
}
.world-thread {position:absolute;inset:-15px 0 auto;display:flex;justify-content:center;color:var(--gold)}
.world-thread span {padding:0 22px;background:var(--night);font-size:19px}
.public-world .overline {color:#90b4ae;font-size:9px;letter-spacing:.19em;margin-bottom:22px}
.public-world h2 {font:clamp(26px,3vw,39px)/1.55 'Loom Inscription',Georgia,serif;letter-spacing:-.035em}
.public-world h2 em {font-family:Georgia,serif;color:var(--gold);font-size:1.12em}
.world-status {font-size:9px;letter-spacing:.18em;color:#90b4ae;margin-top:25px}
.public-world-note {padding-top:36px;color:#aac2bd;font-size:17px;line-height:1.9}
.public-world-note .thread-link {margin-top:24px}
.public-world-note .world-footnote {font-size:13px;line-height:1.7;color:#87a8a5;margin-top:20px;max-width:330px}
@media(max-width:700px) {
  .public-world {width:calc(100% - 48px);grid-template-columns:1fr;gap:20px;padding:50px 0;margin-bottom:65px}
  .public-world h2 {font-size:29px}
  .public-world-note {padding-top:0;font-size:16px}
}
.quiet-workshop {
  padding:45px 20px 105px;
  text-align:center;
  background:radial-gradient(ellipse at 50% 33%,#0d3c4b50,transparent 60%)
}
.workshop-seal {
  width:135px;
  height:135px;
  position:relative;
  margin:0 auto 33px
}
.workshop-seal>span {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:30px;
  color:var(--cyan);
  text-shadow:0 0 24px #65f0eac0
}
.workshop-seal svg {
  width:100%;
  height:100%;
  stroke:#bd9f60;
  stroke-width:.7;
  opacity:.8
}
.quiet-workshop>.overline {
  font-size:9px;
  color:#8cafa9;
  letter-spacing:.24em
}
.quiet-workshop h2 {
  font-family:'Loom Inscription',Georgia,serif;
  font-size:clamp(25px,3vw,42px);
  letter-spacing:-.03em;
  line-height:1.5;
  margin-top:25px
}
.quiet-workshop h2 em {
  font-family:Georgia,serif;
  color:var(--gold);
  font-size:1.12em
}
.quiet-workshop>p:not(.overline) {
  color:#a6c0bd;
  font-size:17px;
  line-height:1.9;
  margin-top:26px
}
.quiet-workshop .thread-link {
  margin-top:25px
}
.studio-footer {
  position:relative;
  padding:35px 5.5vw 30px;
  text-align:center;
  background:#031721
}
.footer-thread {
  position:absolute;
  top:0;
  left:5.5vw;
  right:5.5vw;
  height:1px;
  background:linear-gradient(90deg,transparent,#9a865650,transparent)
}
.footer-thread span {
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%,-50%);
  background:#031721;
  color:var(--gold);
  padding:0 17px;
  font-size:13px
}
.footer-logo {
  display:block;
  width:240px;
  margin:0 auto
}
.footer-logo img {
  width:100%;
  height:auto
}
.studio-footer>p {
  font:italic 16px Georgia,serif;
  color:#b6c9bf;
  margin-top:18px
}
.footer-meta {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:10px;
  letter-spacing:.03em;
  color:#78999a;
  margin-top:42px
}
.footer-meta a:hover {
  color:var(--gold)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:14px 22px;
  border:1px solid #c4a76a;
  font-size:14px;
  min-height:50px;
  cursor:pointer
}
.dark {
  background:#d0b16b;
  color:#092632
}
.button:hover {
  background:#ead294;
  color:#062733
}
.brand {
  display:flex;
  align-items:center;
  gap:10px
}
.brand>span {
  font-size:15px;
  letter-spacing:.12em
}
.brand small {
  display:block;
  font-size:9px;
  letter-spacing:.2em;
  margin-top:5px
}
.brand img {
  width:40px;
  height:40px
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
@media(min-width:1700px) {
  .scene-copy {
    padding-top:125px
  }
}
@media(max-width:1000px) {
  .studio-header {
    height:108px
  }
  .studio-logo {
    width:260px
  }
  .loom-scene {
    height:auto;
    min-height:760px
  }
  .scene-copy {
    margin-left:7vw;
    padding-top:80px
  }
  .scene-copy h1 {
    font-size:64px
  }
  .scene-foot {
    left:7vw
  }
  .world-art {
    background-position:center,center,58% center
  }
  .scene-annotation {
    right:18px
  }
  .loom-room {
    padding-inline:7vw
  }
  .room-heading h2 {
    font-size:32px
  }
}
@media(max-width:700px) {
  .studio-header {
    height:100px;
    padding:5px 20px;
    gap:15px
  }
  .studio-logo {
    width:220px
  }
  .studio-header nav {
    font-size:10px;
    gap:0
  }
  .studio-header nav a:not(:last-child) {
    display:none
  }
  .studio-header nav span {
    margin-left:6px
  }
  .loom-scene {
    min-height:850px;
    max-height:none;
    height:auto
  }
  .world-art {
    background:linear-gradient(180deg,#041c29aa 0%,#041c29b0 40%,#041c2900 68%,#041c29 100%),url('/assets/living-loom.webp') 67% bottom/auto 580px no-repeat;
    background-color:#041c29
  }
  .scene-copy {
    margin-left:26px;
    padding:48px 24px 0 0;
    max-width:100%;
    z-index:1
  }
  .scene-copy>.overline {
    font-size:8px;
    letter-spacing:.18em;
    margin-bottom:25px
  }
  .scene-copy h1 {
    font-size:clamp(39px,10.7vw,65px);
    line-height:1.2
  }
  .scene-copy .begins {
    font-size:.27em;
    margin-block:6px
  }
  .scene-copy h1 em {
    font-size:1.2em
  }
  .scene-intro {
    font-size:15px;
    margin-top:25px;
    line-height:1.75
  }
  .scene-copy .thread-link {
    margin-top:15px
  }
  .scene-annotation {
    top:auto;
    bottom:130px;
    right:15px;
    font-size:7px
  }
  .scene-annotation i {
    height:45px
  }
  .scene-foot {
    bottom:25px;
    left:26px;
    right:26px
  }
  .scene-foot p {
    font-size:10px;
    max-width:185px
  }
  .scene-foot>span {
    display:none
  }
  #living-thread {
    opacity:.4
  }
  .loom-room {
    padding:60px 25px 55px
  }
  .ornament {
    font-size:22px
  }
  .room-heading .overline {
    font-size:9px
  }
  .room-heading h2 {
    font-size:25px;
    line-height:1.5
  }
  .room-heading h2 br {
    display:none
  }
  .studio-note {
    margin-top:30px;
    text-align:left;
    font-size:16px;
    line-height:1.9
  }
  .thought-loom {
    margin-top:38px
  }
  .thought-instruction {
    font-size:10px
  }
  .thought-spine {
    top:81px;
    height:100px
  }
  .thread-choices {
    gap:7px;
    margin-top:26px;
    justify-content:space-between
  }
  .thread-choice {
    min-width:0;
    padding:0 2px 12px;
    gap:12px;
    flex:1
  }
  .choice-star {
    font-size:28px;
    width:45px;
    height:45px
  }
  .thread-choice>span:nth-child(2) {
    font-size:18px;
    white-space:nowrap
  }
  .thread-choice small {
    font-size:6px;
    letter-spacing:.16em
  }
  .thought-reveal {
    margin-top:28px;
    min-height:180px
  }
  .thought-reveal>p:first-child {
    font-size:23px
  }
  .thought-reveal>p:last-child {
    font-size:16px;
    line-height:1.85
  }
  .quiet-workshop {
    padding:20px 25px 65px
  }
  .founder-story {
    width: calc(100% - 50px);
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 42px;
    margin-bottom: 65px;
  }
  .story-heading h2 {
    font-size: 32px;
  }
  .story-heading blockquote {
    font-size: 23px;
    margin-top: 28px;
  }
  .story-pages {
    border-left: 0;
    border-top: 1px solid #bca36a22;
    padding: 29px 0 0;
    font-size: 16px;
  }
  .story-pages .story-opening {
    font-size: 18px;
  }
  .workshop-seal {
    width:115px;
    height:115px;
    margin-bottom:25px
  }
  .quiet-workshop>.overline {
    font-size:8px;
    letter-spacing:.16em
  }
  .quiet-workshop h2 {
    font-size:27px;
    line-height:1.45
  }
  .quiet-workshop h2 br {
    display:none
  }
  .quiet-workshop>p:not(.overline) {
    font-size:16px;
    margin-top:23px
  }
  .quiet-workshop>p br {
    display:none
  }
  .footer-logo {
    width:210px
  }
  .studio-footer {
    padding-inline:25px
  }
  .footer-meta {
    font-size:9px;
    gap:15px;
    align-items:flex-start
  }
  .footer-meta>span {
    max-width:130px;
    text-align:left
  }
  .footer-meta>a {
    max-width:120px;
    text-align:right
  }
  .studio-footer>p {
    font-size:15px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important
  }
  #living-thread {
    display:none
  }
}
@media(max-width:700px) {
  .world-art {
    mask-image:linear-gradient(180deg,transparent 25%,#000 52%,#000 88%,transparent 100%)
  }
}
@media(max-width:360px) {
  .studio-logo {
    width:180px
  }
  .studio-header {
    gap:10px
  }
  .studio-header nav {
    font-size:9px;
    white-space:nowrap
  }
}