/* Ryan Royer portfolio
   "Quiet focus": dark walnut page, warm off-white type, an amber accent, one grotesque (Archivo).
   Colors come from an autumn study at dusk. The neutral light version is saved in /backups.
   The bold moment is the menu, where the page steps back into cards. */

:root {
  /* "paper" is the page background and "ink" the text, whatever their colors. */
  --paper: #17110D;      /* walnut, near black */
  --bar: #241A14;        /* a step lighter than the page */
  --ink: #EFE4D6;        /* warm off-white */
  /* Paper grain: warm-tinted noise at 11%, drawn in SVG (no image file). Was 15% on the light palette. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .28 .28 .28 0 0 .23 .23 .23 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.11'/%3E%3C/svg%3E");
  --graphite: #A8968A;   /* muted text, 6.9:1 on paper */
  --rule: #3A2C24;
  --tile: #221812;
  --taupe: #5A2D19;      /* menu backdrop: rust from the autumn leaves */
  --accent: #C98F66;     /* amber from the sunset */
  --sunset: #C3764D;     /* deeper orange from the sky */
  --gold: #E2B25F;       /* warm yellow, the brightest light */
  /* Portrait tone: black and white, warmed to walnut and cream. Used by the photo, its eyelids and the menu card. */
  --portrait: grayscale(1) sepia(.5) saturate(1.1) contrast(1.05) brightness(.96);

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 2vw, 28px);
  --gap: clamp(10px, 1.2vw, 16px);
  --tile-h: clamp(260px, 52vh, 540px);
  --bar-h: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grain), var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--paper); }

/* Type */
.label {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 450;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.display {
  font-weight: 400;
  font-size: clamp(56px, 10.5vw, 168px);
  line-height: .86;
  letter-spacing: -.055em;
  text-transform: lowercase;
  font-variation-settings: "wdth" 92;
}

.lead {
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.3;
  letter-spacing: -.012em;
  max-width: 30ch;
}

/* Underline links only on hover, the sample's quiet way */
/* ...and turn amber, so it's clear what's clickable. */
.bar a, .bar button, .index a, .foot a, .contact-link, .lb-bar a, .lb button, .menu-close { transition: color .2s; }
.bar a:hover, .bar button:hover, .index a:hover, .foot a:hover,
.contact-link:hover, .lb-bar a:hover, .lb button:hover, .menu-close:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.skip {
  position: fixed; left: var(--gutter); top: 8px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 8px 12px;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Page wrapper: scaled back when the menu opens */
.page {
  transform-origin: 50% 0;
  transition: transform .7s var(--ease), border-radius .7s var(--ease), filter .7s var(--ease);
}

/* Header bar: four columns like the sample */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  align-items: center;
  height: var(--bar-h);
  padding: 0 var(--gutter);
  white-space: nowrap;
  border-bottom: 1px solid rgb(201 143 102 / .45); /* thin amber line */
  background: var(--grain), var(--bar);
}
/* Content fades out completely as it scrolls up under the bar. */
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 1px); /* just below the amber line */
  height: 48px; pointer-events: none;
  background: var(--grain), var(--paper);
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
}
.bar-brand { grid-column: 1 / 5; justify-self: start; display: flex; align-items: center; gap: 14px; }
.bar-role { grid-column: 6 / 10; }
.bar-nav { grid-column: 10 / 13; justify-self: end; display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }
.bar-nav > * { line-height: 1.25; }
.bar-mark { display: block; width: 46px; flex: none; }
.bar-mark img { display: block; mix-blend-mode: screen; filter: url(#logo-amber); /* black-on-white logo turned amber-on-black */ width: 100%; height: auto; }
.bar-mark img { transform: perspective(240px) rotateY(0deg); transition: transform 1.6s cubic-bezier(.65, 0, .25, 1); } /* the random full flip (main.js) */

/* Music player in the header */
.player { display: flex; align-items: center; gap: 4px; margin-right: clamp(4px, 1vw, 16px); }
.player button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; min-width: 32px; justify-content: center; padding: 0 4px;
  color: var(--ink); transition: color .2s;
}
.player button:hover { color: var(--accent); text-decoration: none; }
.player button:focus-visible, .player-volume:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.player svg { width: 15px; height: 15px; display: block; }
.player .i-pause, .player.is-playing .i-play { display: none; }
.player.is-playing .i-pause { display: block; }
.player .i-x, .player.is-muted .i-waves { display: none; }
.player.is-muted .i-x { display: inline; }
/* Equalizer: five bars that follow the music */
.eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.eq i { width: 3px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.15); transition: transform .5s var(--ease), background-color .4s; }
.player.is-playing .eq i { background: var(--accent); transition: transform .08s linear, background-color .4s; }
/* Volume slider: thin rule with an amber fill */
.player-volume {
  -webkit-appearance: none; appearance: none; width: 72px; height: 24px; margin: 0 0 0 4px;
  background: transparent; cursor: pointer; --v: 60%;
}
.player-volume::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--v), var(--rule) var(--v)); }
.player-volume::-moz-range-track { height: 2px; border-radius: 2px; background: var(--rule); }
.player-volume::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--accent); }
.player-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; border-radius: 50%; background: var(--ink); border: 0; transition: background .2s; }
.player-volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 0; }
.player-volume:hover::-webkit-slider-thumb { background: var(--accent); }
.player-volume:hover::-moz-range-thumb { background: var(--accent); }

/* Intro */
.intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  align-items: end;
  padding: clamp(56px, 14vh, 160px) var(--gutter) clamp(48px, 9vh, 104px);
}
.intro-title { grid-column: 1 / 8; font-weight: 700; }
/* "selected work" wipes in left to right behind a sweep of sand-like particles. */
.intro { position: relative; isolation: isolate; overflow-x: clip; } /* keep the glow from widening the page */
/* A soft sunset glow in the top corner, like evening light through a window. */
.intro::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -40%; right: -10%; width: 75%; height: 140%;
  background:
    radial-gradient(closest-side at 70% 40%, rgb(226 178 95 / .16), transparent),
    radial-gradient(closest-side at 60% 45%, rgb(195 118 77 / .14), rgb(195 118 77 / .05) 60%, transparent);
  opacity: calc(.75 + var(--sun, 0) * .45); /* brightens when the sun breaks through */
}
/* Light shafts and floating dust, drawn on a canvas behind the words (see main.js). */
.intro-light {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 98%);
  mask-image: linear-gradient(#000 55%, transparent 98%); /* soften out before the section ends */
}
.intro-sand { position: absolute; pointer-events: none; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.wipe-done) .intro-title {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe, 0%) - 8%), transparent var(--wipe, 0%));
    mask-image: linear-gradient(90deg, #000 calc(var(--wipe, 0%) - 8%), transparent var(--wipe, 0%));
  }
}
.intro-side { grid-column: 8 / 13; display: grid; gap: 28px; padding-bottom: .6em; }
.intro-side .lead { color: var(--accent); }
.index { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.index a { display: inline-block; padding: 4px 0; }

/* Work sets */
.set { padding-bottom: clamp(64px, 11vh, 128px); }

.set-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  align-items: end;
  padding: 0 var(--gutter) 20px;
}
.set-title { grid-column: 1 / 8; font-size: clamp(48px, 7vw, 112px); }
.set-nav { font-size: 12px; text-transform: uppercase; letter-spacing: .01em; }
.set-nav { grid-column: 11 / 13; grid-row: 1 / 3; justify-self: end; align-self: end; display: flex; gap: 6px; }

.strip-btn {
  min-width: 56px; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--ink); border-radius: 999px;
  transition: background-color .2s, color .2s, opacity .2s;
}
.strip-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.strip-btn[aria-disabled="true"] { opacity: .3; pointer-events: none; }

.strip {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  padding: 0 var(--gutter) 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
.strip.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.strip.is-auto { scroll-snap-type: none; }
.strip.is-dragging .tile-open { pointer-events: none; }

.tile {
  flex: none;
  width: min-content;
  scroll-snap-align: start;
}
.tile-cap { margin-bottom: 8px; font-size: 12px; line-height: 1.25; text-transform: uppercase; letter-spacing: .01em; min-height: 2.5em; }
.tile-open { display: block; background: var(--tile); cursor: zoom-in; }
.tile-open img {
  height: var(--tile-h);
  width: auto;
  max-width: 86vw;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Custom "Drag" cursor over strips, mouse only */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 30;
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper); color: var(--ink);
  pointer-events: none;
  opacity: 0; transform: scale(.4);
  transition: opacity .2s, transform .25s var(--ease);
}
.cursor.is-on { opacity: 1; transform: scale(1); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* About */
.about {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  row-gap: 32px;
  padding: clamp(40px, 8vh, 96px) var(--gutter) clamp(72px, 12vh, 140px);
  border-top: 1px solid var(--rule);
}
.about .set-title { grid-column: 1 / -1; }

/* Section titles: letters rise in one after another, and ripple bold on hover. */
@media (prefers-reduced-motion: no-preference) {
  .js .set-title:not(.is-split) { opacity: 0; }
  .set-title .ch {
    display: inline-block;
    opacity: 0; transform: translateY(.38em); filter: blur(8px);
    transition: opacity .6s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
    transition-delay: calc(var(--i) * 55ms);
  }
  .set-title.is-in .ch { opacity: 1; transform: none; filter: none; }
  .set-title.is-waving .ch { animation: title-wave .7s var(--ease) calc(var(--i) * 45ms) both; }
  @keyframes title-wave { 45% { font-weight: 800; color: var(--accent); } }
}
.about-photo { grid-column: 1 / 3; }
.about-photo { position: relative; }
.about-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: var(--portrait); }
.scene { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 4 / 5; pointer-events: none; }
.about-cutout { position: absolute; left: 0; top: 0; pointer-events: none; }
.about-photo .about-cutout { filter: none; } /* Ryan in his original colors; the background keeps the warm tone */
/* Blink: skin from just above each eye slides down over it for a moment. */
.lid {
  position: absolute; display: none; pointer-events: none;
  background-repeat: no-repeat;
  filter: none; /* matches the full-color face */
  clip-path: inset(0 0 100% 0);
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
  transition: clip-path 110ms ease-out;
}
.lid.is-ready { display: block; }
.lid.is-shut { clip-path: inset(0 0 0 0); transition-duration: 70ms; transition-timing-function: ease-in; }
.lid::after { /* where the lashes meet */
  content: ""; position: absolute; left: 14%; right: 14%; top: 58%; height: 9%;
  border-radius: 50%; background: rgb(0 0 0 / .45);
}
.about-copy { grid-column: 4 / 11; display: grid; gap: 1em; align-content: start; }
.about-copy p:not(.lead) { max-width: 72ch; }
.about-copy .lead { max-width: 40ch; margin-bottom: .4em; color: var(--accent); } /* amber, like the services list */
.about-list { grid-column: 11 / 13; display: grid; gap: 8px; align-content: start; color: var(--accent); }

/* Contact */
.contact {
  display: grid;
  gap: 28px;
  padding: clamp(40px, 8vh, 96px) var(--gutter) clamp(80px, 14vh, 160px);
  border-top: 1px solid var(--rule);
}
.contact-links { display: flex; align-items: center; gap: 22px; }
.contact-link { padding: 4px 0; }
/* Envelope and LinkedIn icons: off-white, amber on hover, a little lift. */
.contact-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: -8px; margin-right: -8px; transition: color .2s, transform .25s var(--ease); }
.contact-icon svg { width: 28px; height: 28px; }
.contact-icon:hover { transform: translateY(-2px); }

.foot {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter) 22px;
  border-top: 1px solid rgb(201 143 102 / .45);
}

/* Menu: the page steps back, sections appear as cards */
html.menu-is-open { overflow: hidden; }
html.menu-is-open body { background-color: var(--taupe); }
html.menu-is-open .page {
  transform: scale(.9) translateY(4vh);
  filter: brightness(.82);
  border-radius: 6px;
  overflow: hidden;
}
body { transition: background-color .5s var(--ease); }

.menu {
  position: fixed; inset: 0; z-index: 40;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 16px var(--gutter) var(--gutter);
  color: var(--ink);
  background: rgba(90, 45, 25, 0);
  transition: background-color .45s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-open { background: rgba(90, 45, 25, .94); }
.menu-bar { display: flex; justify-content: space-between; align-items: start; }
.menu-close { min-height: 36px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; }

.menu-cards {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 28px);
  max-width: 1280px; width: 100%; margin: 0 auto;
}
.card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  aspect-ratio: 4 / 3.3;
  padding: 12px;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px) scale(1.06);
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.menu.is-open .card { opacity: 1; transform: none; }
.menu.is-open li:nth-child(2) .card { transition-delay: .06s; }
.menu.is-open li:nth-child(3) .card { transition-delay: .12s; }
.card-top { display: block; }
.card-word {
  font-size: clamp(36px, 5vw, 76px);
  line-height: .9;
  letter-spacing: -.05em;
  font-variation-settings: "wdth" 92;
}
.card img { align-self: end; width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: transform .6s var(--ease); }
.card .card-face { object-position: 50% 8%; } /* full color, like the About photo */
.card-note { align-self: end; font-size: clamp(14px, 1.4vw, 18px); color: var(--graphite); overflow-wrap: anywhere; }
.card:hover img { transform: scale(1.03); }
.card:focus-visible { outline-color: var(--ink); outline-offset: 4px; }

/* Lightbox */
.lb {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--paper); color: var(--ink);
}
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb::backdrop { background: var(--paper); }
.lb-bar {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap);
  align-items: start;
  padding: 16px var(--gutter) 12px;
}
.lb-meta { grid-column: 1 / 4; }
.lb-count { color: var(--accent); margin-left: 8px; }
.lb-cap { grid-column: 5 / 10; }
.lb-actions { grid-column: 10 / 13; justify-self: end; display: flex; gap: 18px; align-items: center; }
.lb-close { min-height: 36px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 999px; }
.lb-stage { position: relative; min-height: 0; touch-action: pan-y; }
.lb-img {
  position: absolute; inset: 0 var(--gutter);
  width: calc(100% - 2 * var(--gutter)); height: 100%;
  object-fit: contain;
  opacity: 1; transition: opacity .25s;
}
.lb-img.is-loading { opacity: 0; }
.lb-nav { display: flex; justify-content: space-between; padding: 12px var(--gutter) 16px; }
.lb-nav button { min-height: 44px; min-width: 64px; text-align: left; }
.lb-nav .lb-next { text-align: right; }

/* Tablet */
@media (max-width: 960px) {
  .bar-role { display: none; }
  .bar-nav { grid-column: 7 / 13; }
  .intro-title, .intro-side { grid-column: 1 / -1; }
  .intro-side { margin-top: 32px; padding-bottom: 0; }
  .set-title { grid-column: 1 / 9; }
  .set-nav { grid-column: 9 / 13; grid-row: 1; }
  .about-photo { grid-column: 1 / 4; }
  .about-copy { grid-column: 5 / 13; }
  .about-list { grid-column: 5 / 13; grid-auto-flow: row; }
  .menu-cards { grid-template-columns: 1fr; max-width: 520px; }
  .card { aspect-ratio: auto; min-height: 0; grid-template-rows: auto auto; }
  .card img, .card-note { display: none; }
}

/* Phone */
@media (max-width: 600px) {
  :root { --tile-h: min(62vw, 46vh); --bar-h: 64px; }
  .bar-brand { grid-column: 1 / 7; gap: 10px; }
  .bar-nav { grid-column: 7 / 13; }
  .bar-mark { width: 38px; }
  .player-volume { display: none; }
  .player { margin-right: 0; gap: 0; }
  .player button { min-width: 30px; padding: 0 2px; gap: 5px; }
  .bar-nav { gap: 14px; }
  .set-nav { display: none; }
  .about-photo, .about-copy, .about-list { grid-column: 1 / -1; }
  .about-photo { width: 50%; max-width: 180px; }
  .lb-bar { grid-template-columns: 1fr auto; row-gap: 8px; }
  .lb-meta { grid-column: 1; }
  .lb-actions { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .lb-cap { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

.menu :focus-visible { outline-color: var(--ink); }