@import url('../fonts/google.css?v=1');   /* 11/1: type served from the site, nothing fetched from Google */
/* THE SHELL (11/1/2026). One website, one piece. Every page sits inside the same sheet: the rail on the left (LAUDERDALE STUDIO, INDEX,
   the search glyph), the page in the middle, the portfolio lying on its side off the left edge. Nothing ever sits across the top.
   Three hinges, one motion: a quarter turn in .3s ease about a point on the edge. Left = the studio (the portfolio pivots in from the
   left, the page leaves through the top). Right = the next page (a project from the portfolio pivots in from the right). Bottom = the
   conversation (Start a project pivots up). The strip of the page you came from, 28px, stays at the edge and is the way back.
   Two inks only: brown on chalk, chalk over pictures and film. Three cuts of Laredo: Regular for titles, Light for navigation and small
   lines, Hair for the big words; IBM Plex Mono Light for body. */
:root { --g0: 28px; --ink: #5C3A18; --chalk: #F0EFEB; --sand: #D9CFC2; }
html.ls { overflow: hidden; height: 100%; }
body.ls { overflow: hidden; height: 100%; margin: 0; background: var(--chalk); color: var(--ink); }
body.ls:not(.ls-ready) > main, body.ls:not(.ls-ready) > header, body.ls:not(.ls-ready) > footer { opacity: 0; }
/* the left wrapper: the DS+R geometry, measured */
.ls-left { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: var(--g0) var(--g0); transform: rotate(90deg); transition: transform .3s ease; will-change: transform; }
body.index-open .ls-left { transform: rotate(0deg) translateZ(0); }
.ls-stage { position: absolute; top: calc(2 * var(--g0)); left: 0; height: 100vh; height: 100dvh; width: 100vw; transform: rotate(-90deg); transform-origin: left top; overflow: hidden; background: var(--chalk); z-index: 2; }
body.index-open .ls-stage::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--ink); opacity: .18; z-index: 5000; cursor: pointer; transition: opacity .1s linear; }
body.index-open .ls-stage:hover::before { opacity: .34; }
/* pages: each one a scroll container filling the stage */
.ls-page { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--chalk); outline: none; }
.ls-page > .page-in { position: relative; min-height: 100%; }
.ls-page.is-old { z-index: 3; }
.ls-page.is-new { z-index: 2; }
.ls-page.is-prep { visibility: hidden; pointer-events: none; z-index: 0; }
/* a pivot in the stage: the wrapper turns about a point on an edge; the old page is counter-turned so it reads upright until the turn */
.ls-pivot { position: absolute; inset: 0; transition: transform .3s ease; will-change: transform; }
.ls-pivot.h-left { transform-origin: 0 var(--g0); transform: rotate(90deg); }
.ls-pivot.h-left > .is-old { transform-origin: 0 var(--g0); transform: rotate(-90deg); }
.ls-pivot.h-right { transform-origin: 100% var(--g0); transform: rotate(-90deg); }
.ls-pivot.h-right > .is-old { transform-origin: 100% var(--g0); transform: rotate(90deg); }
.ls-pivot.h-bottom { transform-origin: var(--g0) 100%; transform: rotate(90deg); }
.ls-pivot.h-bottom > .is-old { transform-origin: var(--g0) 100%; transform: rotate(-90deg); }
.ls-pivot.go { transform: rotate(0deg) translateZ(0); }
/* the rail: a 28px bar as long as the window is high, stood on its end by the wrapper; transparent so film shows through */
.rail { position: absolute; top: var(--g0); left: 0; height: var(--g0); width: 100vh; width: 100dvh; padding: 0 0 0 .9rem; background: transparent; z-index: 3; display: flex; align-items: center; box-sizing: border-box; }
.rail-word { font-family: 'Laredo Light', 'Laredo', serif; font-size: .95rem; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: pre; line-height: 1; }
.rail-index { position: absolute; right: 3.2rem; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; padding: .2rem .1rem; color: var(--ink); font-family: 'Laredo Light', 'Laredo', serif; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; line-height: 1; }
.rail-glyph { position: absolute; right: .9rem; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; padding: .2rem; color: var(--ink); line-height: 0; transition: opacity .2s linear; }
.rail-glyph svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.rail-word, .rail-index, .rail-glyph { transition: color .5s ease; }
body.on-film .rail-word, body.on-film .rail-index, body.on-film .rail-glyph { color: var(--chalk); }
body.index-open .rail { background: var(--chalk); width: 100vw; }
body.index-open .rail-word, body.index-open .rail-index { color: var(--ink) !important; }
body.index-open .rail-glyph { opacity: 0; pointer-events: none; }
/* the portfolio: upright only when the sheet is turned */
.ls-index { position: absolute; top: var(--g0); left: 0; width: 100vw; height: calc(100vh - var(--g0)); height: calc(100dvh - var(--g0)); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1; padding: 3.6rem clamp(1.2rem, 6vw, 5rem) 4rem; box-sizing: border-box; background: var(--chalk); color: var(--ink); }
.ls-index h2 { font-family: 'Laredo Light', 'Laredo', serif; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.2rem; }
.ix-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.ix-search { font-family: 'IBM Plex Mono', monospace; font-weight: 300; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; background: none; border: 0; outline: 0; padding: .6rem 0; width: min(28rem, 100%); color: var(--ink); }
.ix-search::placeholder { color: var(--ink); opacity: .55; }
.ix-sort { display: flex; gap: 1.4rem; font-family: 'Laredo Light', 'Laredo', serif; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; }
.ix-sort button { background: none; border: 0; color: var(--ink); opacity: .5; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; }
.ix-sort button.on { opacity: 1; }
.ix-tags { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin: 2.2rem 0 2.6rem; font-family: 'Laredo Light', 'Laredo', serif; font-size: clamp(.95rem, 1.6vw, 1.25rem); letter-spacing: .18em; text-transform: uppercase; }
.ix-tags button { background: none; border: 0; padding: 0; color: var(--ink); opacity: .45; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.ix-tags button.on, .ix-tags button:hover { opacity: 1; }
.ix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2.2rem 1.4rem; }
.ix-grid a { text-decoration: none; color: var(--ink); }
.ix-grid figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand); }
.ix-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.ix-grid a:hover img { transform: scale(1.04); }
.ix-grid figcaption { margin-top: .6rem; font-family: 'Laredo Light', 'Laredo', serif; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; }
.ix-grid figcaption em { display: block; font-style: normal; opacity: .7; letter-spacing: .14em; margin-top: .15rem; }
.ix-grid figcaption .t, .ix-grid figcaption .s { display: none; }
/* the list reads like a drawing register: name, type, place, status in columns, a hairline under each row, the picture beside the cursor */
.ls-index.list .ix-grid { display: block; }
.ls-index.list .ix-grid a { display: block; position: relative; padding: 0; }
.ls-index.list .ix-grid figcaption { margin: 0; display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, .9fr); gap: 1.5rem; align-items: baseline; padding: .85rem 0; border-bottom: 1px solid rgba(92, 58, 24, .22); }
.ls-index.list .ix-grid figcaption .n { font-family: 'Laredo', serif; font-size: 1rem; letter-spacing: .16em; }
.ls-index.list .ix-grid figcaption em, .ls-index.list .ix-grid figcaption .t, .ls-index.list .ix-grid figcaption .s { display: block; margin: 0; opacity: .75; letter-spacing: .16em; font-size: .62rem; }
.ls-index.list .ix-grid figcaption > * { text-align: left; } .ls-index.list .ix-grid figcaption .s { text-align: right; }
.ls-index.list .ix-grid figure { display: block; position: fixed; left: -999px; top: 0; width: 220px; aspect-ratio: 3 / 2; opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 10; }
.ls-index.list .ix-grid a:hover figure { opacity: 1; }
.ls-index.list .ix-grid a:hover figcaption { opacity: 1; }
@media (max-width: 760px) { .ls-index.list .ix-grid figcaption { grid-template-columns: 1fr 1fr; } .ls-index.list .ix-grid figcaption .t { display: none; } .ls-index.list .ix-grid figcaption .s { grid-column: 2; } .ls-index.list .ix-grid figure { display: none; } }
.ls-index.list .ix-grid figcaption { margin: 0; display: flex; gap: 2rem; width: 100%; justify-content: space-between; }
.ls-index.list .ix-grid figcaption em { display: inline; margin: 0; }
.ix-none { font-family: 'IBM Plex Mono', monospace; font-weight: 300; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.ix-foot { margin-top: 4rem; display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem; font-family: 'Laredo Light', 'Laredo', serif; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; }
.ix-foot a { color: var(--ink); text-decoration: none; opacity: .7; } .ix-foot a:hover { opacity: 1; }
/* the old site's chrome is retired on every page: no top bar, no hover strip, no category bar, no second rail */
.hd, .edge-zone, .proj-bar, .rail2, .rail2-index, .next-cursor, .cindex-close, .pf-mobile-bar, .mob-bar { display: none !important; }
body.ls { padding-top: 0 !important; }
/* inner pages, in the landing's manner until each is rebuilt: left-set heads, the 28px gutter, no rules, no pills */
body.ls main:not(.proj):not(.pg) { padding-left: var(--g0); padding-right: var(--g0); box-sizing: border-box; }
body.ls main:not(.pg) .page-head { text-align: left; padding-left: 0; padding-right: 0; max-width: none; margin-left: 0; }
body.ls main:not(.pg) .page-head-rule { display: none; }
body.ls main:not(.pg) .page-head .eyebrow { font-family: 'Laredo Light', 'Laredo', serif; letter-spacing: .24em; }
body.ls .page-title, body.ls h1.page-title { font-family: 'Laredo', serif; letter-spacing: .14em; margin-left: 0; }
body.ls main:not(.pg) .page-head-sub { margin-left: 0; max-width: 46ch; font-family: 'IBM Plex Mono', monospace; font-weight: 300; text-transform: uppercase; letter-spacing: .06em; }
body.ls .btn, body.ls .pill, body.ls .btn-solid, body.ls .btn-ghost { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; color: var(--ink) !important; font-family: 'Laredo Light', 'Laredo', serif !important; letter-spacing: .22em; text-transform: uppercase; box-shadow: none !important; }
body.ls .btn::after { content: " \2192"; }
body.ls hr, body.ls .rule, body.ls .divider { display: none; }
body.ls .cta-band { background: none; border: 0; padding-left: 0; text-align: left; }
body.ls footer, body.ls .site-footer { border-top: 0; }
body.ls input, body.ls select, body.ls textarea { border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-weight: 300; }
body.ls .proj-hero-cap h1, body.ls .proj-hero-cap i { color: var(--chalk); }
@media (max-width: 1023px) { :root { --g0: 24px; } .rail-word { font-size: .85rem; } }
@media (max-width: 760px) { :root { --g0: 26px; } .rail { padding-left: .6rem; } .rail-word { font-size: .8rem; letter-spacing: .22em; } .rail-index { right: 2.4rem; font-size: .7rem; } .rail-glyph { right: .5rem; } .rail-glyph svg { width: 14px; height: 14px; } .ls-index { padding: 2.4rem 1rem 3rem; } .ix-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem .8rem; } }   /* 11/1 11:44 Carson: the rail a little larger on phones */
@media (prefers-reduced-motion: reduce) { .ls-left, .ls-pivot { transition: none; } }
/* project pages in the shell: the hero fills the stage, its caption shows, the rail is chalk over it */
body.ls .proj-hero-cap { opacity: 1; transform: none; }
body.ls .proj-hero, body.ls .proj-bar + main.proj .proj-hero, body.ls main.proj-appended .proj-hero { height: 100vh; height: 100dvh; }
body.ls .proj-hero-pin { height: auto; }
body.ls .proj-hero img { transform: none !important; }
body.ls main:not(.proj):not(.pg) { padding-top: clamp(3rem, 8vh, 5rem); }
/* the old site faded every main in on load; moving a page in the DOM restarted that fade mid-turn. The pivot is the transition now. */
body.ls main, body.ls .footer { animation: none !important; opacity: 1 !important; transform: none !important; }
body.ls main:not(.proj):not(.pg) { padding-left: calc(2 * var(--g0)); padding-right: calc(2 * var(--g0)); }
body.ls [class*="btn"], body.ls [class*="pill"] { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; font-family: 'Laredo Light', 'Laredo', serif !important; letter-spacing: .22em; text-transform: uppercase; }
body.ls .svc-card [class*="btn"], body.ls .svc-card [class*="pill"] { color: var(--chalk) !important; }

/* immersive (Carson 11/1): an endless canvas of the pictures inside the index sheet; drag or scroll any direction; no words */
.ix-imm { display: none; }
.ls-index.immersive { display: flex; flex-direction: column; overflow: hidden; }
.ls-index.immersive .ix-grid, .ls-index.immersive .ix-tags + .ix-grid, .ls-index.immersive .ix-foot { display: none; }
.ls-index.immersive .ix-imm { display: block; flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; margin: 1rem calc(-1 * clamp(1.2rem, 6vw, 5rem)) calc(-4rem); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.ix-imm.is-drag { cursor: grabbing; }
.ix-world { position: absolute; left: 0; top: 0; will-change: transform; }
.ix-col { position: absolute; top: 0; will-change: transform; }
.ix-col a { position: absolute; left: 0; display: block; overflow: hidden; background: var(--sand); -webkit-user-drag: none; }
.ix-col img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
@media (max-width: 760px) { .ls-index.immersive .ix-imm { margin: .6rem -1rem -3rem; } }

/* the page scrolls inside the stage; its scrollbar track is never drawn (Carson 11/1 11:38: the chalk bar on the right) */
.ls-page { scrollbar-width: none; -ms-overflow-style: none; }
.ls-page::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ls-index { scrollbar-width: none; } .ls-index::-webkit-scrollbar { display: none; }

/* the cookie line: one hairline row at the foot of the screen, the answer stored, nothing measured before Fine (11/1) */
.ls-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; padding: .9rem clamp(1.2rem, 6vw, 5rem); background: var(--chalk); color: var(--ink); border-top: 1px solid rgba(92, 58, 24, .25); font-family: 'Laredo Light', 'Laredo', serif; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
.ls-consent[hidden] { display: none; }
.ls-consent p { margin: 0; } .ls-consent a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.ls-consent span { display: flex; gap: 1.6rem; } .ls-consent button { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--leather); cursor: pointer; } .ls-consent button:hover { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 760px) { .ls-consent { padding: .8rem 1rem; } }
/* skip link: hidden until it has keyboard focus */
.sk { position: absolute; left: -999px; top: 0; z-index: 1001; background: var(--ink); color: var(--chalk); padding: .6rem .9rem; font-family: 'Laredo Light', 'Laredo', serif; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.sk:focus { left: 0; }
/* 11/1 16:45 (Carson: "still seeing white on right side of main page"): styles.css reserves a scrollbar gutter on html for the old
   frame; in the shell nothing scrolls on html, so the gutter was a 15px chalk strip beside the film on browsers with classic scrollbars */
html.ls { scrollbar-gutter: auto; }
html.ls, body.ls { width: 100%; }
/* 11/1 17:30 (Carson: "scroll up and white space appears at the top"): the rubber-band bounce at the top of a page showed the chalk behind the stage; no bounce anywhere in the shell */
html.ls, body.ls, .ls-page, .ls-index, .ls-stage { overscroll-behavior: none; }

/* final QA fixes (11/1 18:05) */
.ls-consent { font-size: 11px; line-height: 1.6; }
.ls-consent button { padding: .7rem .1rem; min-height: 40px; }
@media (max-width: 760px) { input, select, textarea, .ix-search { font-size: 16px; } .ix-sort { flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; gap: 1rem; scrollbar-width: none; } .ix-sort::-webkit-scrollbar { display: none; } .ix-tags button { min-height: 40px; } }
/* 11/1 19:29 Carson: index list columns read as straight left edges, not centered in their cells */
.ls-index.list .ix-grid figcaption, body .ls-index.list .ix-grid a figcaption { display: grid !important; justify-items: stretch; text-align: left; } .ls-index.list .ix-grid figcaption > * { justify-self: stretch; text-align: left; } .ls-index.list .ix-grid figcaption .s { text-align: right; }
.ix-col a.whole { background: transparent; } .ix-col a.whole img { object-fit: contain; mix-blend-mode: multiply; }

/* 11/1 23:30: social accounts that do not exist yet stay hidden on every page, home included */
a[data-pending] { display: none !important; }
/* 11/1 23:26 Carson: on the phone the Index opens straight to every project, no sort, view or type filters (desktop unchanged) */
@media (max-width: 760px) { .ls-index .ix-sort, .ls-index .ix-tags { display: none !important; } }