@font-face {
  font-family:Caprasimo;
  src:url('/fonts/caprasimo-regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap
}

:root {
  --paper:#fff5df;
  --ink:#39203d;
  --muted:#68596a;
  --teal:#176c63;
  --coral:#f3ad91;
  --rule:#39203d30;
  --display:Caprasimo,Georgia,serif;
  --gutter:clamp(24px,3.6vw,72px)
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.6 'Avenir Next',Avenir,system-ui,sans-serif
}

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

a {
  color:inherit;
  text-underline-offset:5px
}

a:focus-visible {
  outline:3px solid var(--teal);
  outline-offset:7px
}

h1,h2,h3,p,figure {
  margin:0
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:400;
  line-height:1.12
}

h1 {
  font-size:clamp(40px,4.8vw,76px);
  letter-spacing:-.025em
}

h2 {
  font-size:clamp(28px,2.8vw,42px)
}

.shell {
  max-width:1440px;
  padding-inline:var(--gutter);
  margin-inline:auto
}

.skip {
  position:fixed;
  top:12px;
  left:16px;
  z-index:10;
  padding:8px 18px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:30px;
  transform:translateY(-180%)
}

.skip:focus {
  transform:translateY(0)
}

.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:30px var(--gutter);
  position:relative;
  z-index:2
}

.site-header nav {
  display:flex;
  gap:16px;
  align-items:center
}

.brand-title {
  font:inherit
}

.wordmark {
  font-family:var(--display);
  font-size:clamp(35px,4.6vw,74px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.045em;
  text-decoration:none;
  color:var(--paper);
  -webkit-text-stroke:clamp(2px,.19vw,3px) var(--ink);
  paint-order:stroke fill;
  text-shadow:1px 2px 0 var(--ink),2px 3px 0 var(--ink),3px 4px 0 var(--ink),4px 6px 0 var(--ink);
  white-space:nowrap
}

.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:2px solid var(--ink);
  border-radius:999px;
  padding:7px 22px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:3px 4px 0 var(--ink);
  font-weight:700;
  font-size:clamp(15px,1.6vw,23px);
  line-height:1.35;
  text-decoration:none;
  transition:transform .16s,box-shadow .16s,background .16s
}

.pill:hover {
  transform:translate(-1px,-2px);
  box-shadow:4px 6px 0 var(--ink);
  background:#c8ebdf
}

.pill:active {
  transform:translate(2px,3px);
  box-shadow:1px 1px 0 var(--ink)
}

.pill[aria-current=page] {
  background:#c8ebdf
}

.primary {
  background:#b7e6d5;
  font-size:18px;
  padding:12px 26px
}

.interior .site-header {
  max-width:1440px;
  margin:auto;
  padding-block:26px
}

.interior .wordmark {
  font-size:42px;
  -webkit-text-stroke:2px var(--ink);
  text-shadow:2px 3px 0 var(--ink)
}

.interior .site-header .pill {
  font-size:17px;
  padding:7px 21px
}

.landing {
  min-height:100svh;
  background:#85c8e8
}

.landing .site-header {
  position:absolute;
  inset:0 0 auto
}

.landing-main {
  position:relative;
  min-height:100svh;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  padding:150px var(--gutter) clamp(32px,5.5vh,70px)
}

.landscape {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:-2
}

.landing-tagline {
  font-family:var(--display);
  font-size:clamp(26px,2.6vw,43px);
  line-height:1.2;
  color:var(--paper);
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
  text-shadow:2px 3px 0 var(--ink),3px 4px 0 var(--ink);
  letter-spacing:-.02em
}

.landing a:focus-visible {
  outline-color:var(--paper);
  outline-offset:9px
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  font-weight:750;
  margin-bottom:20px
}

.intro {
  font-size:clamp(18px,1.5vw,22px);
  max-width:620px;
  color:var(--muted);
  line-height:1.65
}

.page-intro {
  padding:66px 0 54px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:0 60px;
  align-items:end
}

.page-intro .eyebrow {
  grid-column:1/-1
}

.page-intro .intro {
  max-width:490px
}

.app-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:52px 30px;
  padding:0 0 90px;
  list-style:none
}

.app-card {
  display:block;
  text-decoration:none;
  height:100%;
  border-radius:24px
}

.card-art {
  position:relative;
  border:2px solid var(--ink);
  border-radius:24px;
  aspect-ratio:1.6;
  display:grid;
  place-items:center;
  transition:box-shadow .2s,transform .2s
}

.card-art img {
  width:110px;
  height:110px;
  border-radius:23%;
  filter:drop-shadow(0 9px 8px #39203d25);
  transition:transform .2s
}

.card-arrow {
  position:absolute;
  right:18px;
  bottom:10px;
  font-size:29px
}

.app-card:hover .card-art {
  transform:translateY(-3px);
  box-shadow:4px 5px 0 var(--ink)
}

.app-card:hover .card-art img {
  transform:rotate(-5deg) scale(1.05)
}

.card-copy {
  padding:20px 3px 0
}

.card-copy h2 {
  font-size:30px;
  margin-bottom:8px
}

.card-copy p {
  font-size:16px;
  line-height:1.55;
  color:var(--muted);
  max-width:33em
}

.availability {
  display:block;
  font-size:12px;
  font-weight:650;
  margin-top:15px;
  color:var(--muted)
}

.available {
  color:var(--teal)
}

.availability:before {
  content:'';
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  vertical-align:middle;
  margin-right:7px
}

.tone-coral {
  background:#f6b39b
}

.tone-blue {
  background:#b7dced
}

.tone-sand {
  background:#ecd6a3
}

.tone-lavender {
  background:#dbcaeb
}

.tone-mint {
  background:#b9deca
}

.about-page {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:70px;
  align-items:center;
  padding-top:62px;
  padding-bottom:90px;
  min-height:calc(100svh - 200px)
}

.about-copy h1 {
  font-size:clamp(36px,3.7vw,58px);
  margin-bottom:28px
}

.prose {
  max-width:610px;
  color:var(--muted);
  font-size:18px
}

.prose p+p {
  margin-top:18px
}

.about-copy .primary {
  margin-top:28px
}

.about-art {
  background:#b9deca;
  border:2px solid var(--ink);
  border-radius:48% 48% 22px 22px;
  box-shadow:7px 7px 0 var(--ink);
  padding:42px 25px 22px;
  overflow:hidden;
  align-self:center
}

.about-art img {
  width:100%;
  max-width:420px;
  margin:auto;
  filter:drop-shadow(0 14px 12px #39203d25)
}

.about-art figcaption {
  text-align:center;
  font-size:13px;
  margin-top:18px
}

.site-footer {
  max-width:1440px;
  padding:28px var(--gutter) 32px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  font-size:13px;
  border-top:1px solid var(--rule)
}

.footer-brand {
  font:24px var(--display);
  text-decoration:none
}

.site-footer p {
  color:var(--muted)
}

.site-footer>a:last-child {
  font-weight:650
}

.back-link {
  font-size:14px;
  font-weight:650;
  display:inline-block;
  margin:30px 0;
  text-decoration:none
}

.back-link:hover {
  text-decoration:underline
}

.product-hero {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  align-items:center;
  gap:70px;
  padding:20px 0 70px
}

.product-copy h1 {
  font-size:clamp(48px,6.5vw,94px)
}

.product-tagline {
  font:400 clamp(25px,2.4vw,36px)/1.25 var(--display);
  margin-top:24px;
  max-width:600px
}

.product-copy .intro {
  font-size:19px;
  margin-top:22px;
  max-width:560px
}

.product-action {
  margin-top:30px
}

.action-note,.release-meta {
  font-size:13px;
  color:var(--muted);
  margin-top:16px
}

.development-note {
  font-size:15px;
  border-left:3px solid var(--teal);
  padding-left:16px;
  color:var(--muted)
}

.development-note strong {
  color:var(--ink)
}

.product-art {
  border:2px solid var(--ink);
  border-radius:38px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  box-shadow:7px 7px 0 var(--ink);
  transform:rotate(2deg)
}

.product-art img {
  width:54%;
  border-radius:23%;
  filter:drop-shadow(0 20px 15px #39203d30);
  transform:rotate(-2deg)
}

.product-details {
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  padding:50px 0
}

.product-details h2 {
  max-width:460px
}

.product-details p {
  color:var(--muted);
  max-width:560px
}

.focus-list {
  list-style:none;
  padding:0;
  margin:25px 0 0
}

.focus-list li {
  padding:10px 0;
  border-top:1px solid var(--rule)
}

.focus-list li:before {
  content:'↗';
  color:var(--teal);
  margin-right:16px
}

.collection-note {
  border-block:1px solid var(--rule);
  padding:25px 0;
  margin-bottom:60px;
  display:flex;
  justify-content:space-between;
  gap:20px
}

.collection-note a {
  font-weight:650
}

.download-page {
  max-width:900px;
  padding-bottom:70px
}

.download-heading {
  padding-top:15px
}

.download-heading>img {
  margin-bottom:30px;
  border-radius:23%
}

.download-heading h1 {
  font-size:clamp(40px,5vw,64px)
}

.download-heading .intro {
  margin:20px 0 28px
}

.installation {
  margin-top:55px;
  border-top:1px solid var(--rule);
  padding-top:35px
}

.installation h2 {
  font-size:32px
}

.installation ol {
  padding-left:24px;
  margin-top:25px
}

.installation li {
  padding:8px 0 8px 10px
}

.installation li::marker {
  font-family:var(--display);
  color:var(--teal)
}

.not-found {
  min-height:70svh;
  padding-top:80px;
  padding-bottom:80px
}

.not-found .intro {
  margin:20px 0 30px
}

@media(min-aspect-ratio:2/1) {
  .landscape {
    object-position:center 58%
  }
}

@media(max-width:1000px) {
  .app-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .page-intro {
    grid-template-columns:1fr;
    gap:20px
  }
  .page-intro .eyebrow {
    margin:0
  }
  .page-intro .intro {
    max-width:620px
  }
  .about-page {
    gap:35px;
    grid-template-columns:1.2fr 1fr
  }
  .product-hero {
    gap:45px
  }
  .site-footer p {
    max-width:230px
  }
  .product-details {
    gap:45px
  }
}

@media(max-width:700px) {
  .site-header {
    padding-top:24px;
    gap:16px
  }
  .site-header nav {
    gap:10px
  }
  .wordmark {
    font-size:35px;
    -webkit-text-stroke:1.6px var(--ink);
    text-shadow:2px 3px 0 var(--ink)
  }
  .pill {
    padding:7px 14px;
    border-width:1.5px;
    box-shadow:2px 3px 0 var(--ink)
  }
  .site-header .pill {
    font-size:15px
  }
  .landing-main {
    padding-top:130px;
    padding-bottom:max(32px,env(safe-area-inset-bottom));
    min-height:100svh
  }
  .landscape {
    object-position:68% center
  }
  .landing-tagline {
    font-size:clamp(24px,5.7vw,35px);
    -webkit-text-stroke:1.5px var(--ink);
    text-shadow:2px 3px 0 var(--ink)
  }
  .interior .wordmark {
    font-size:33px
  }
  .interior .site-header .pill {
    font-size:14px;
    padding:6px 13px
  }
  .interior .site-header {
    padding-block:23px
  }
  .page-intro {
    padding:40px 0
  }
  .app-grid {
    gap:35px 20px;
    padding-bottom:55px
  }
  .card-art {
    aspect-ratio:1.15;
    border-radius:18px
  }
  .card-art img {
    width:78px;
    height:78px
  }
  .card-copy h2 {
    font-size:25px
  }
  .card-copy p {
    font-size:14px
  }
  .card-arrow {
    font-size:23px;
    right:12px;
    bottom:6px
  }
  .card-copy {
    padding-top:17px
  }
  .about-page {
    grid-template-columns:1fr;
    padding-top:35px;
    padding-bottom:55px;
    gap:45px
  }
  .about-copy h1 {
    font-size:clamp(35px,6.6vw,48px)
  }
  .about-art {
    width:min(100%,380px);
    justify-self:center
  }
  .prose {
    font-size:17px
  }
  .site-footer {
    flex-wrap:wrap;
    gap:16px
  }
  .site-footer p {
    max-width:none;
    order:3;
    flex-basis:100%
  }
  .site-footer>a:last-child {
    margin-left:auto
  }
  .product-hero {
    grid-template-columns:1fr;
    padding:10px 0 45px;
    gap:40px
  }
  .product-art {
    width:min(95%,360px);
    justify-self:center;
    order:-1;
    aspect-ratio:1.3;
    border-radius:28px;
    box-shadow:5px 5px 0 var(--ink)
  }
  .product-art img {
    width:42%
  }
  .product-copy .intro {
    font-size:17px
  }
  .product-copy .eyebrow {
    margin-bottom:12px
  }
  .product-tagline {
    margin-top:16px
  }
  .product-details {
    grid-template-columns:1fr;
    gap:24px;
    padding:35px 0
  }
  .collection-note {
    flex-direction:column;
    gap:7px;
    margin-bottom:40px
  }
  .back-link {
    margin:20px 0
  }
  .download-page {
    padding-bottom:45px
  }
  .download-heading h1 {
    font-size:41px
  }
  .installation h2 {
    font-size:28px
  }
}

@media(max-width:380px) {
  :root {
    --gutter:18px
  }
  .wordmark,.interior .wordmark {
    font-size:30px
  }
  .site-header nav {
    gap:8px
  }
  .site-header .pill,.interior .site-header .pill {
    font-size:13px;
    padding:6px 11px
  }
  .app-grid {
    grid-template-columns:1fr
  }
  .card-art {
    aspect-ratio:1.7
  }
  .card-art img {
    width:100px;
    height:100px
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    transition:none!important;
    scroll-behavior:auto!important
  }
}

[hidden] { display:none !important; }
.installation h2:not(:first-child) { margin-top:48px; }

/* App detail pages share the island landscape, with a quiet reading card. */
.island-product {
  min-height:100svh;
  isolation:isolate;
  background:#85c8e8
}
.island-product::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:url('/images/island-coast-v1.jpg') center / cover no-repeat;
  pointer-events:none
}
.island-product .product-page {
  width:calc(100% - 2 * var(--gutter));
  max-width:1080px;
  margin:24px auto 64px;
  padding:0 clamp(24px,4vw,64px) 24px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:32px;
  box-shadow:8px 10px 0 #39203d,0 24px 70px #182f3a30
}
.island-product .product-hero {
  grid-template-columns:1.4fr .8fr;
  gap:48px;
  padding-bottom:48px
}
.island-product .product-copy h1 {
  font-size:clamp(44px,5.5vw,76px);
  overflow-wrap:anywhere
}
.island-product .product-details {
  gap:40px;
  padding:36px 0
}
.island-product .collection-note { margin-bottom:12px }
.island-product .site-footer {
  background:var(--paper)
}
@media(max-width:700px) {
  .island-product .product-page {
    width:calc(100% - 32px);
    margin-top:12px;
    margin-bottom:40px;
    padding:0 24px 24px;
    border-radius:24px;
    box-shadow:5px 6px 0 var(--ink)
  }
  .island-product .product-hero {
    grid-template-columns:1fr;
    gap:28px;
    padding-bottom:32px
  }
  .island-product .product-art { width:min(80%,240px) }
  .island-product .product-details { gap:24px }
}

/* A short studio introduction, framed by the island. */
.studio-about-wrap {
  min-height:calc(100svh - 210px);
  display:grid;
  align-items:center;
  padding:24px 0 56px
}
.island-product .studio-about {
  max-width:820px;
  margin:0 auto;
  padding:clamp(28px,4.5vw,60px)
}
.studio-about h1 { font-size:clamp(48px,6vw,80px) }
.studio-origin {
  margin-top:24px;
  font-size:clamp(18px,2vw,22px);
  max-width:640px
}
.studio-punchline {
  font:400 clamp(24px,2.6vw,32px)/1.3 var(--display);
  margin:28px 0 20px
}
.studio-mission { color:var(--muted); max-width:640px }
.studio-about .pill { margin-top:30px }
@media(max-width:700px) {
  .studio-about-wrap { padding:12px 0 40px }
  .studio-about .eyebrow { font-size:10px; letter-spacing:.09em }
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
.studio-about .eyebrow + .visually-hidden + .studio-origin { margin-top:0 }


/* One shared footer, deliberately a single horizontal line at every size. */
.site-footer {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:56px;
  padding:10px var(--gutter);
  background:var(--paper);
  border-top:1px solid var(--rule);
  white-space:nowrap;
  font-size:13px
}
.site-footer .footer-brand { font:400 18px/1.3 var(--display); text-decoration:none }
.footer-location { color:var(--muted); margin-right:auto }
.site-footer nav { display:flex; align-items:center; gap:24px }
.site-footer nav a { display:inline-flex; align-items:center; min-height:32px }
.site-footer .social-icon { min-width:28px; justify-content:center }
.site-footer svg { display:block }
.landing-main { min-height:calc(100svh - 56px) }
.work-switcher {
  display:inline-flex;
  gap:6px;
  padding:6px;
  border:2px solid var(--ink);
  border-radius:999px;
  margin-bottom:26px;
  background:#f5e7d1
}
.work-switcher a {
  padding:8px 28px;
  border:2px solid transparent;
  border-radius:999px;
  text-decoration:none;
  font-weight:750;
  line-height:1.35
}
.work-switcher a[aria-current=page] { background:#b7e6d5; border-color:var(--ink); box-shadow:2px 2px 0 var(--ink) }
.work-switcher a:hover { background:#c8ebdf }
.collection-intro { max-width:760px; color:var(--muted); margin-bottom:36px }
.repo-coming {
  border:2px solid var(--ink);
  border-radius:28px;
  background:#e3eddd;
  padding:clamp(28px,5vw,64px);
  margin-bottom:72px;
  box-shadow:6px 7px 0 var(--ink)
}
.repo-symbol { font:400 64px/1 var(--display); color:var(--teal); margin-bottom:28px }
.repo-coming p:not(.eyebrow) { max-width:620px; margin:24px 0 30px; color:var(--muted) }
.policy-page { max-width:880px; padding-top:48px; padding-bottom:72px }
.policy-page .intro { margin:24px 0 32px }
.policy-page h2 { font-size:28px; margin:36px 0 14px }
.policy-page p { margin-bottom:16px }
@media(max-width:700px) {
  .site-footer { gap:10px; padding:10px 16px; font-size:12px }
  .site-footer .footer-brand { font-size:15px }
  .footer-location { display:none }
  .site-footer nav { gap:14px }
  .work-switcher a { padding:7px 24px }
  .policy-page { padding-top:28px }
}
@media(max-width:360px) {
  .site-footer { padding-inline:12px; gap:6px }
  .site-footer nav { gap:10px }
  .site-footer .footer-brand { font-size:14px }
}

/* Let the landscape continue through the footer without a solid strip. */
.landing { position:relative; isolation:isolate }
.landing-main { isolation:auto }
.landing .landscape { position:fixed; z-index:-1 }
.landing .site-footer,.island-product .site-footer {
  background:transparent;
  border-top:1px solid #fff5df66;
  color:var(--paper);
  text-shadow:0 1px 3px #201523,0 0 6px #201523
}
.landing .footer-location,.island-product .footer-location { color:inherit }
.landing .site-footer a:focus-visible,.island-product .site-footer a:focus-visible {
  outline-color:var(--paper)
}

/* Work starts with the collection switcher, framed by the same island card. */
.island-product .work-card {
  max-width:1200px;
  padding:clamp(24px,3.5vw,48px);
  margin-top:24px
}
.work-card .work-switcher { margin-bottom:32px }
.work-card .app-grid { margin:0; padding:0 }
.work-card .repo-coming { margin:0; box-shadow:none }
@media(max-width:700px) {
  .island-product .work-card { padding:24px; margin-top:12px }
  .work-card .app-grid { grid-template-columns:1fr }
}

/* Matinee uses the licensed studio wordmark until its original icon is selected. */
.product-wordmark { font-family: Caprasimo, Georgia, serif; font-size: clamp(2rem, 5vw, 4.5rem); line-height: 1.1; color: #38263e; padding: 1rem; text-align: center; }