/* Plain CSS with Outfit from Google Fonts. */
:root {
    --paper: #f9f9f5;
    --ink: #242923;
    --accent: #98472a;
    --line: #aeb0a5;
    --body: 'Outfit',Arial,Helvetica,sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 30px
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.6 var(--body)
}

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

h1,h2,h3 {
    font-weight: 400;
    line-height: 1.12
}

h1 {
    letter-spacing: -.04em
}

h2 {
    letter-spacing: -.035em
}

a {
    color: inherit;
    text-decoration: none
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    border: 0
}

button,a {
    -webkit-tap-highlight-color: transparent
}

a:focus-visible,button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 6px
}

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

::selection {
    background: var(--ink);
    color: var(--paper)
}

section,footer {
    scroll-margin-top: 30px
}

.skip-link {
    position: fixed;
    top: -80px;
    left: 20px;
    padding: 12px;
    background: var(--paper);
    z-index: 100
}

.skip-link:focus {
    top: 10px
}

.v-brand {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1
}

.micro {
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: .7px;
}

.rule-label {
    border-top: 1px solid var(--ink);
    padding: 17px 0 25px;
    display: flex;
    justify-content: space-between;
    gap: 25px
}

.rule-label h2 {font-size: 38px;line-height: 1.2;margin: 10px 0 25px;}

.v-title {
    display: block;
    font-size: 29px;
    line-height: 1.2;
    letter-spacing: -1px;
    font-weight: 500
}

.v-desc {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 8px
}

.email {
    display: inline-block;
    font-size: 20px;
    overflow-wrap: anywhere
}

.demo-note {
    display: block;
    font-size: 10px;
    line-height: 1.6;
    opacity: .7
}

.x-layout {
    display: grid;
    grid-template-columns: 300px minmax(0,1fr);
    max-width: 1600px;
    margin: auto;
    padding: 55px 4%;
    gap: 6%
}

.x-sidebar {
    position: sticky;
    top: 55px;
    height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    align-items: start;
    border-right: 1px solid var(--line);
    padding-right: 35px
}

.x-sidebar .v-brand {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 0px;
}

.x-sidebar p {
    font-size: 14px;
    margin-top: 25px;
    width: 100%;
}

.x-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 65px;
    font-size: 14px;
}

.swiss-variant .x-sidebar nav a {
    position: relative;
    transition: color .18s ease-out
}

.swiss-variant .x-sidebar nav a::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .18s ease-out
}

.swiss-variant .x-sidebar nav a:is(:hover,:focus-visible) {
    color: var(--accent)
}

.swiss-variant .x-sidebar nav a:is(:hover,:focus-visible)::after {
    transform: scaleX(1)
}

@media(prefers-reduced-motion:reduce) {
    .swiss-variant .x-sidebar nav a,
    .swiss-variant .x-sidebar nav a::after {
        transition: none
    }
}

.x-sidebar>.micro {
    margin-top: auto;
    padding-top: 35px;
    font-size: 9px;
}

.x-intro {
    padding: 5px 0 65px
}

.x-intro h1 {
    font-size: clamp(38px,4.1vw,67px);
    margin: 30px 0;
    line-height: 1.15;
    font-weight: 200
}

.x-intro p {
    font-size: 14px;
    max-width: 100%;
}

.x-table-head,.x-project {
    display: grid;
    grid-template-columns: 35px minmax(0,1fr) 60px 30px;
    gap: 20px;
    align-items: center
}

.x-table-head {
    font-size: 9px;
    padding: 12px 0;
    color: #697063
}

.x-row {
    /* border-top: 1px solid var(--line); */
}

.x-row:last-child {
    /* border-bottom: 1px solid var(--line) */
}

.x-project {
    width: 100%;
    text-align: left;
    background: none;
    padding: 28px 0;
    transition: background-color .18s ease-out
}

.x-project:is(:hover,:focus-visible) {
    background-color: #24292308
}

@media(prefers-reduced-motion:reduce) {
    .x-project {
        transition: none
    }
}

.x-project .v-title {
    font-size: 28px
}

.x-project .v-desc {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.x-year {
    font-size: 11px
}

.x-arrow {
    font-size: 24px;
    transition: transform .25s
}

.x-project:hover .x-arrow {
    transform: translate(3px,-3px);
    color: var(--accent)
}

.x-about {
    padding: 75px 0 60px
}

.x-about h2 {
    font-size: 38px;
    line-height: 1.2;
    margin: 10px 0 25px
}

.x-about p {
    /* max-width: 550px; */
    font-size: 14px;
    line-height: 1.8
}

.x-footer .demo-note {
    margin-top: 45px
}

.case-kicker {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase
}

#case-title {
    font-size: clamp(35px,6vw,60px);
    letter-spacing: -2px;
    margin: 15px 0
}

.case-lead {
    font-size: 18px;
    line-height: 1.5;
    max-width: 610px
}

.case-image {
    margin: 30px 0;
    width: 100%
}

.case-facts {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    border-bottom: 1px solid #aab09f;
    padding-bottom: 25px;
    margin-bottom: 35px;
    font-size: 12px
}

.case-facts dt {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px
}

.case-facts dd {
    margin: 0
}

.case-story {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 25px;
    margin-top: 28px
}

.case-story :is(h2,h3) {
    font-size: 18px;
    line-height: 1.4
}

.case-story p {
    font-size: 14px;
    line-height: 1.8
}

.case-bottom {
    border-top: 1px solid #aab09f;
    margin-top: 40px;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

.case-next {
    font-size: 12px;
    background: none;
    border-bottom: 1px solid;
    padding: 5px 0
}

.copy-email {
    display: block;
    background: none;
    border-bottom: 1px solid currentColor;
    font-size: 10px;
    padding: 4px 0;
    margin-top: 12px
}

/* Case study sections inherit the Index portfolio's paper, ink, and type. */

.case-header {
    max-width: 680px
}

#case-title {
    letter-spacing: -.035em
}

.case-image {
    margin: 40px 0;
    aspect-ratio: 16/10;
    object-fit: cover
}

.case-facts {
    border-color: var(--line,#aab09f);
    padding: 0 0 32px;
    margin: 0 0 56px;
    gap: 28px
}

.case-story {
    grid-template-columns: minmax(135px,1fr) minmax(0,2.5fr);
    gap: 40px;
    margin: 56px 0
}

.case-story :is(h2,h3) {
    font-size: 20px;
    letter-spacing: -.025em;
    text-wrap: balance
}

.case-story p {
    font-size: 15px;
    line-height: 1.85;
    max-width: 70ch
}

.case-story p+p {
    margin-top: 18px
}

.case-highlight {
    margin: 56px 0;
    padding: 36px 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink)
}

.case-highlight :is(h2,h3) {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 20px
}

.case-highlight p {
    font-size: clamp(24px,3.3vw,36px);
    line-height: 1.35;
    letter-spacing: -.03em;
    max-width: 32ch;
    text-wrap: pretty
}

.case-media,.case-gallery {
    margin: 48px 0
}

.case-figure {
    margin: 0;
    min-width: 0
}

.case-figure>img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    background: var(--case-tint,#e7e7df)
}

.case-figure figcaption {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink)
}

.case-placeholder {
    aspect-ratio: 16/10;
    background: #e9e7df;
    border: 1px solid #b7b6ac;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    color: #53554b
}

.case-placeholder>span {
    font-size: 16px;
    line-height: 1.4
}

.case-placeholder>small {
    font-size: 11px
}

.case-gallery {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px
}

.case-gallery .case-placeholder {
    aspect-ratio: 4/3
}

.case-bottom {
    margin-top: 64px;
    border-color: var(--line,#aab09f)
}

.case-next {
    min-height: 44px;
    text-align: left
}

@media(max-width: 700px) {

    .case-image {
        margin: 28px 0
    }

    .case-facts {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 36px
    }

    .case-facts>div {
        display: grid;
        grid-template-columns: 75px 1fr;
        gap: 12px
    }

    .case-facts dt {
        margin: 2px 0 0
    }

    .case-story {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 36px 0
    }

    .case-highlight {
        margin: 36px 0;
        padding: 28px 0
    }

    .case-media,.case-gallery {
        margin: 36px 0
    }

    .case-gallery {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .case-placeholder {
        padding: 20px
    }

    .case-bottom {
        margin-top: 40px
    }
}

/* Allow grid children and long content to shrink without horizontal overflow. */
.x-layout>main,.x-sidebar,.x-project>span,.case-story>div,.case-facts>div {
    min-width: 0
}

.v-title,.v-desc,.case-header,.case-story,.case-highlight,.case-figure figcaption,.case-facts dd,.case-next {
    overflow-wrap: anywhere
}

.x-sidebar nav a {
    display: flex;
    align-items: center;
    min-height: 44px
}

.x-sidebar nav {
    gap: 4px
}

.x-project {
    min-height: 72px
}

.copy-email {
    min-height: 44px;
    font-size: 12px
}

.copy-status {
    display: block;
    font-size: 12px;
    overflow-wrap: anywhere
}

.x-table-head,.x-year {
    font-variant-numeric: tabular-nums
}

.case-placeholder {
    min-height: 160px
}

.case-facts {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

@media(max-width: 1100px) {
    .x-layout {
        grid-template-columns:190px minmax(0,1fr);
        gap: 5%
    }

    .x-sidebar .v-brand {
        font-size: 32px
    }
}

/* Tablets and narrow desktop windows get a horizontal header. */
@media(max-width: 960px) {
    .x-layout {
        display:block;
        padding: 32px 5%
    }

    .x-sidebar {
        position: static;
        height: auto;
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 20px;
        padding: 0 0 16px;
        border-right: 0;
        border-bottom: 1px solid var(--line)
    }

    .x-sidebar .v-brand {
        font-size: 38px;
        letter-spacing: -2px
    }

    .x-sidebar .v-brand br {
        display: none
    }

    .x-sidebar p {
        margin: 0;
        justify-self: end;
        font-size: 13px
    }

    .x-sidebar nav {
        grid-column: 1/-1;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 28px;
        margin: 0;
        font-size: 12px
    }

    .x-sidebar>.micro {
        display: none
    }

    .x-intro {
        padding: 48px 0
    }

    .x-intro h1 {
        font-size: clamp(34px,5.5vw,52px);
        margin: 24px 0
    }

    .x-intro p {
        font-size: 16px;
        /* max-width: 48ch; */
    }

    .x-about {
        padding: 56px 0
    }

    .x-about p {
        font-size: 16px
    }

    .x-table-head,.x-project {
        grid-template-columns: 26px minmax(0,1fr) 44px 24px;
        gap: 16px
    }

    .x-project .v-desc {
        font-size: 12px
    }

    .x-year {
        font-size: 12px
    }
}

@media(max-width: 600px) {
    .x-layout {
        padding:24px max(20px,env(safe-area-inset-left)) 32px max(20px,env(safe-area-inset-right))
    }

    .x-sidebar {
        grid-template-columns: minmax(0,1fr);
        gap: 12px
    }

    .x-sidebar .v-brand {
        font-size: 32px
    }

    .x-sidebar p {
        font-size: 12px;
        justify-self: start
    }

    .x-sidebar nav {
        gap: 0 20px
    }

    .x-intro {
        padding: 40px 0
    }

    .x-intro h1 {
        font-size: clamp(30px,7.5vw,44px);
        letter-spacing: -.035em
    }

    .x-intro p,.x-about p {
        font-size: 16px
    }

    .rule-label {
        gap: 12px;
        flex-wrap: wrap;
        padding-bottom: 20px
    }

    .rule-label h2,.rule-label>span {
        font-size: 10px
    }

    .x-table-head,.x-project {
        grid-template-columns: 20px minmax(0,1fr) 24px;
        gap: 12px
    }

    .x-table-head>span:nth-child(3),.x-year {
        display: none
    }

    .x-project {
        padding: 24px 0
    }

    .x-project .v-title {
        font-size: clamp(23px,6vw,28px);
        letter-spacing: -.025em
    }

    .x-project .v-desc {
        font-size: 12px;
        line-height: 1.6
    }

    .x-arrow {
        font-size: 24px
    }

.x-detail p {
        font-size: 14px;
        padding-right: 0
    }

.x-about {
        padding: 44px 0
    }

    .x-about h2 {
        font-size: clamp(28px,7vw,36px)
    }

    .email {
        font-size: clamp(17px,4.5vw,22px);
        line-height: 1.6
    }

    .case-story p,.case-lead {
        font-size: 16px
    }

    .case-placeholder {
        aspect-ratio: auto;
        min-height: 190px
    }

    .case-bottom {
        display: block
    }

    .case-next {
        display: inline-block;
        margin-top: 20px;
        font-size: 14px;
        max-width: 100%
    }
}

/* Touch previews are always available, without an extra tap or hover. */
@media(hover: none),(pointer:coarse) {
}

@media(max-height: 600px) and (min-width:961px) {
    .x-sidebar {
        position:static;
        height: auto;
        min-height: 460px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,*::before,*::after {
        animation: none!important;
        transition: none!important
    }
}


/* Case study index and fluid reading column. */
.case-page .x-layout{grid-template-columns:clamp(200px,22vw,260px) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
.case-sidebar{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) var(--paper);height:calc(100dvh - 110px);min-height:0}
.case-back{display:inline-flex;align-items:center;min-height:44px;font-size:13px;margin:0;flex-shrink:0}
.case-back:hover{text-decoration:underline;text-underline-offset:4px}
.case-index-disclosure{width:100%;margin-top:24px}
.case-index-disclosure>summary{display:none;cursor:pointer;min-height:44px;align-items:center;font-size:13px}
.case-index-disclosure>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.case-index-disclosure:not([open])>.case-index{display:none}
.case-sidebar .case-index{width:100%;margin:0;gap:0}
.case-sidebar .case-index a{position:relative;color:#62685e;font-size:13px;font-weight:400;line-height:1.4;padding:12px 0 12px 20px;min-height:44px;overflow-wrap:anywhere;transition:color .2s ease,padding-left .2s ease}
.case-index a::before,.case-index a::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line);pointer-events:none}
.case-index a::after{background:var(--ink);transform-origin:top;transform:scaleY(var(--section-progress,0));transition:transform .16s linear}
.case-sidebar .case-index a:hover{color:var(--ink)}
.case-sidebar .case-index a.is-complete{color:var(--ink)}
.case-sidebar .case-index a[aria-current="location"]{color:var(--ink);font-weight:600;padding-left:24px}
.case-main{container:case-content/inline-size;min-width:0;max-width:100%;padding-bottom:24px}
.case-main>*{min-width:0;max-width:100%}
.case-main #case-title{font-weight:500;font-size:clamp(34px,4.8vw,64px);line-height:1.1;margin:0 0 24px;overflow-wrap:anywhere}
.case-main .case-kicker{margin-top:20px;color:#62685e}
.case-main .case-header{padding-top:5px;max-width:100%}
.case-main .case-story{grid-template-columns:minmax(0,1fr);gap:20px}
.case-main .case-story p{max-width:70ch;font-size:clamp(15px,1.4vw,17px)}
.case-main .case-lead{font-size:clamp(16px,1.6vw,20px);max-width:60ch}
.case-main .case-highlight p{font-size:clamp(24px,3vw,36px)}
.case-main .case-image,.case-main .case-figure>img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.case-main .case-image{margin:clamp(24px,4vw,40px) 0}
.case-main .case-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.case-main .case-facts dd,.case-main .case-placeholder{overflow-wrap:anywhere}
.case-main .case-next{display:inline-flex;align-items:center;max-width:100%}
@container case-content (max-width:600px){
  .case-facts{grid-template-columns:minmax(0,1fr)!important}
  .case-facts>div{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px}
  .case-facts dt{margin:2px 0 0}
  .case-gallery{grid-template-columns:minmax(0,1fr)}
  .case-bottom{display:block}
  .case-next{margin-top:20px}
}
@media(max-width:960px){
  .case-sidebar{position:sticky;top:0;z-index:10;display:block;overflow:visible;background:var(--paper);padding:8px 0;height:auto;min-height:0;border-right:0}
  .case-sidebar .case-back{margin:0}
  .case-index-disclosure{margin:0}
  .case-index-disclosure>summary{display:flex;justify-content:space-between;gap:16px}
  .case-index-current{color:#62685e;font-size:12px;text-align:right}
  .case-sidebar .case-index{display:flex;flex-direction:column;gap:0;max-height:45dvh;overflow-y:auto;padding-bottom:8px;scrollbar-width:thin}
  .case-page section{scroll-margin-top:calc(var(--case-header-height,110px) + 24px)}
  .case-main{padding-top:32px}
}
@media(max-width:600px){
  .case-sidebar{padding-top:max(8px,env(safe-area-inset-top))}
  .case-main .case-facts{grid-template-columns:minmax(0,1fr)}
  .case-main .case-facts>div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px}
  .case-main .case-gallery{grid-template-columns:minmax(0,1fr)}
  .case-main .case-placeholder{aspect-ratio:auto;min-height:180px}
}

/* Keep the index scrollable without browser chrome. Edge fades reveal overflow. */
.case-sidebar{border:0;overflow:visible;padding-right:20px}
.case-index-disclosure{min-height:0;display:flex;flex-direction:column;flex:1}
.case-sidebar .case-index{min-height:0;max-height:calc(100dvh - 210px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:8px;mask-image:linear-gradient(to bottom,transparent,#000 var(--index-fade-top,0px),#000 calc(100% - var(--index-fade-bottom,0px)),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--index-fade-top,0px),#000 calc(100% - var(--index-fade-bottom,0px)),transparent)}
.case-sidebar::-webkit-scrollbar,.case-sidebar .case-index::-webkit-scrollbar{display:none;width:0;height:0}
.case-sidebar{scrollbar-width:none}
.case-heading-motion{opacity:var(--heading-opacity,1);transform:translateY(var(--heading-y,0px));transition:opacity .22s ease-out,transform .28s cubic-bezier(.16,1,.3,1)}
@media(min-width:961px){
  .case-index a::before,.case-index a::after{display:none}
  .case-sidebar .case-index a{padding-left:0}
  .case-sidebar .case-index a[aria-current="location"]{padding-left:4px}
}
@media(max-width:960px){
  .case-sidebar{padding:8px 0;border-bottom:1px solid var(--line)}
  .case-index-disclosure{display:block}
  .case-index-disclosure>summary{border-radius:4px;padding:4px 0}
  .case-index-current{margin-left:auto;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .case-sidebar .case-index{max-height: min(45dvh,360px);scrollbar-width:none;padding:8px 4px 12px}
  .case-sidebar .case-index a{font-size:14px;min-height:46px}
}
@media(prefers-reduced-motion:reduce){
  .case-heading-motion{opacity:1;transform:none;transition:none}
}