/* Tibby's Workshop. Shared tokens, base and components (direction Braise). */

:root {
  --charbon: #14110F;
  --noir: #0B0908;
  --brule: #221D19;
  --suie: #332B25;
  --braise: #FF5A1F;
  --braise-vif: #FF7A47;
  --ambre: #F39A3D;
  --chene: #C8986A;
  --os: #EFE6DA;
  --cendre: #A99C8D;
  --line: rgba(239, 230, 218, .14);
  --line-strong: rgba(239, 230, 218, .28);
  --ff-d: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --ff-s: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pad: clamp(1.25rem, 5vw, 6rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --sec: clamp(5rem, 11vw, 11rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 4.5rem;
}

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

html {
  font-size: clamp(100%, .44vw + 10.6px, 137.5%);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
  background: var(--charbon);
}

body {
  margin: 0;
  font-family: var(--ff-s);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--os);
  background: var(--charbon);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, fieldset, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--braise); color: var(--charbon); }

:focus-visible { outline: 2px solid var(--ambre); outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--braise); color: var(--charbon); padding: .75rem 1.1rem; border-radius: 999px; font-weight: 600; transition: top .2s; }
.skip:focus { top: 1rem; }

.wrap { width: 100%; max-width: 100rem; margin-inline: auto; padding-inline: var(--pad); }

/* Type */
.display { font-family: var(--ff-d); font-weight: 340; letter-spacing: -.032em; line-height: .96; font-optical-sizing: auto; }
.display em, .h2 em, .h3 em, .quote em { font-style: italic; font-weight: 320; color: var(--braise); }
.h2 { font-family: var(--ff-d); font-weight: 350; font-size: clamp(2.5rem, 6.4vw, 6.25rem); letter-spacing: -.03em; line-height: .98; text-wrap: balance; }
.h3 { font-family: var(--ff-d); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.25rem); letter-spacing: -.02em; line-height: 1.08; }
.lede { font-size: clamp(1.0625rem, 1.25vw, 1.3rem); line-height: 1.55; color: var(--os); max-width: 34em; text-wrap: pretty; }
.muted { color: var(--cendre); }
.label {
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: .75rem; font-weight: 600; font-stretch: 88%; letter-spacing: .22em; text-transform: uppercase; line-height: 1.2;
  color: var(--ambre);
}
.label::before { content: ""; width: 2.25rem; height: 1px; background: var(--braise); flex: none; }
.label--bare::before { display: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 3.25rem; padding: .6rem 1.6rem;
  border-radius: 999px; border: 1px solid transparent;
  font-size: .95rem; font-weight: 600; letter-spacing: .005em; line-height: 1.15; text-align: center;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .6s var(--ease), transform .35s var(--ease);
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; transition: transform .35s var(--ease); }
.btn--ember { background: var(--braise); color: var(--charbon); box-shadow: 0 0 0 rgba(255, 90, 31, 0); }
.btn--ember:hover { background: var(--braise-vif); box-shadow: 0 0 2.75rem rgba(255, 90, 31, .5); }
.btn--ember:hover svg { transform: translateX(.2em); }
.btn--ghost { border-color: var(--line-strong); color: var(--os); background: rgba(20, 17, 15, .35); }
.btn--ghost:hover { border-color: var(--braise); color: var(--ambre); }
.btn--bone { background: var(--os); color: var(--charbon); }
.btn--bone:hover { background: #fff; }
.btn--sm { min-height: 2.75rem; padding: .45rem 1.15rem; font-size: .875rem; }
.link {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem;
  font-weight: 600; font-size: .95rem; color: var(--os);
  background: linear-gradient(var(--braise), var(--braise)) 0 calc(100% - .55rem) / 100% 1px no-repeat;
  transition: color .3s, background-size .4s var(--ease);
}
.link svg { width: 1.05em; height: 1.05em; color: var(--braise); transition: transform .35s var(--ease); }
.link:hover { color: var(--ambre); }
.link:hover svg { transform: translateX(.25em); }

/* Language switch */
.lang { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(20, 17, 15, .4); }
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6rem; min-height: 2.25rem; padding: 0 .7rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; color: var(--os);
  transition: background-color .3s, color .3s;
}
.lang a[aria-current="true"] { background: var(--os); color: var(--charbon); }
.lang a:not([aria-current="true"]):hover { color: var(--ambre); }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--os); flex: none; }
.logo__mark { width: 2.6rem; height: 2.6rem; fill: var(--braise); flex: none; }
.logo__word { height: 1.5rem; width: auto; fill: currentColor; }
.lockup { --lm: var(--braise); display: block; fill: currentColor; }

/* Stamp (availability, burned) */
.stamp {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .7rem .3rem; border: 1.5px solid currentColor; border-radius: 999px;
  font-size: .66rem; font-weight: 700; font-stretch: 85%; letter-spacing: .2em; text-transform: uppercase; line-height: 1;
  color: var(--braise); transform: rotate(-4deg); white-space: nowrap;
  box-shadow: inset 0 0 0 2.5px var(--stamp-bg, var(--noir)), inset 0 0 0 3.5px currentColor;
  background: var(--stamp-bg, var(--noir));
}
.stamp::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 .6rem currentColor; }
.stamp--gone { color: var(--cendre); }
.stamp--gone::before { box-shadow: none; background: none; border: 1.5px solid currentColor; }
.stamp--order { color: var(--ambre); }

/* Placeholder tag */
.tag-ph {
  display: inline-block; padding: .22rem .55rem; border: 1px dashed var(--ambre); border-radius: 3px;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ambre); line-height: 1.2;
}

/* Grain for photographic panels */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .16; mix-blend-mode: overlay;
  background-image: url(/img/grain.13fa91efc6.svg);
}

/* Form fields (shared with the brand sheet) */
.field { display: grid; gap: .5rem; }
.field > span, .seg legend { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cendre); }
.field small { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--cendre); opacity: .85; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3.25rem; padding: .8rem 1rem;
  background: rgba(11, 9, 8, .55); border: 1px solid var(--line-strong); border-radius: 4px; color: var(--os);
  transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.field textarea { min-height: 8.5rem; resize: vertical; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5A1F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; }
.field select option { background: var(--brule); color: var(--os); }
.field input::placeholder, .field textarea::placeholder { color: #8F8375; opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--chene); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--braise); box-shadow: 0 0 0 3px rgba(255, 90, 31, .22), 0 0 2rem rgba(255, 90, 31, .12); background: rgba(11, 9, 8, .8); }
.seg { display: grid; gap: .6rem; }
.seg__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.seg label > span {
  display: inline-flex; align-items: center; min-height: 2.9rem; padding: .4rem 1.15rem; border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .92rem; font-weight: 500; transition: background-color .3s, color .3s, border-color .3s;
}
.seg input:hover + span { border-color: var(--chene); }
.seg input:checked + span { background: var(--os); border-color: var(--os); color: var(--charbon); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--ambre); outline-offset: 3px; }

/* Reveal: things come up out of the dark */
.js [data-rv] { opacity: 0; transform: translateY(1.5rem); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js [data-rv].in { opacity: 1; transform: none; }
.js [data-rv="dark"] { opacity: 1; transform: none; filter: brightness(.12) saturate(.4); transition: filter 1.3s var(--ease); transition-delay: var(--d, 0s); }
.js [data-rv="dark"].in { filter: none; }

/* Ember that follows the pointer (fine pointers only, set up in JS) */
.ember {
  position: fixed; left: 0; top: 0; z-index: 40; width: 46rem; height: 46rem; margin: -23rem 0 0 -23rem; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 106, 40, .2), rgba(255, 90, 31, .07) 45%, transparent 72%);
  mix-blend-mode: screen; opacity: 0; transition: opacity 1.2s var(--ease); will-change: transform;
}
.ember.on { opacity: 1; }

/* ───────── Header ───────── */
.hdr { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--header-h); display: flex; align-items: center; transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.hdr::before { content: ""; position: absolute; inset: 0 0 -2.5rem 0; background: linear-gradient(rgba(11, 9, 8, .72), rgba(11, 9, 8, 0)); pointer-events: none; transition: opacity .5s; }
.hdr.is-stuck { background: rgba(20, 17, 15, .88); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 var(--line); }
.hdr.is-stuck::before, .menu-open .hdr::before { opacity: 0; }
.menu-open .hdr { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr__in { position: relative; display: flex; align-items: center; gap: .75rem; width: 100%; padding-inline: var(--pad); }
.hdr .logo__mark { width: 2.35rem; height: 2.35rem; }
.hdr .logo__word { height: 1.2rem; }
.nav { display: none; }
.nav a { position: relative; padding: .9rem 0; font-size: .9rem; font-weight: 500; letter-spacing: .01em; color: var(--os); white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .55rem; height: 1px; background: var(--braise); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--ambre); }
.nav__dd { position: relative; display: flex; }
.nav__dd > a { padding-right: 1rem; }
.nav__dd > a::before { content: ""; position: absolute; right: 0; top: 50%; width: .4rem; height: .4rem; margin-top: -.3rem; border-right: 1.5px solid var(--braise); border-bottom: 1.5px solid var(--braise); transform: rotate(45deg); }
.nav__sub { position: absolute; top: 100%; left: -1.25rem; z-index: 2; display: grid; min-width: 17rem; padding: .5rem 1.25rem; border: 1px solid var(--line); background: rgba(20, 17, 15, .97); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(.4rem); transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s; }
.nav__sub a { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.nav__sub a:last-child { border-bottom: 0; }
.nav__sub a::after { bottom: .45rem; }
.nav__dd:hover .nav__sub, .nav__dd:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease), visibility 0s; }
.nav__dd:has(.nav__sub [aria-current]) > a { color: var(--ambre); }
.hdr__tools { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.hdr .lang a { min-width: 2.25rem; padding: 0 .5rem; }
.hdr__tel { display: none; align-items: center; gap: .55rem; min-height: 2.75rem; padding: 0 .35rem; font-size: .9rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hdr__tel svg { width: 2.75rem; height: 2.75rem; padding: .8rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ambre); transition: border-color .3s, color .3s; }
.hdr__tel:hover svg { border-color: var(--braise); color: var(--braise); }
.hdr__tel span { display: none; }
.hdr__cta { display: none; }
.burger { position: relative; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: 50%; flex: none; }
.burger i { position: absolute; left: 50%; top: 50%; width: 1.05rem; height: 1.5px; margin-left: -.525rem; background: var(--os); transition: transform .45s var(--ease), background-color .3s; }
.burger i:first-child { transform: translateY(-.22rem); }
.burger i:last-child { transform: translateY(.22rem); }
.burger[aria-expanded="true"] { border-color: var(--braise); }
.burger[aria-expanded="true"] i:first-child { transform: rotate(45deg); background: var(--braise); }
.burger[aria-expanded="true"] i:last-child { transform: rotate(-45deg); background: var(--braise); }

@media (min-width: 400px) { .hdr .logo__word { height: 1.35rem; } .hdr .lang a { min-width: 2.5rem; } .hdr__in { gap: 1rem; } }
@media (min-width: 640px) { .hdr__cta { display: inline-flex; } .hdr__tools { gap: .75rem; } .hdr .logo__mark { width: 2.6rem; height: 2.6rem; } .hdr .logo__word { height: 1.45rem; } }
@media (min-width: 1100px) {
  :root { --header-h: 5.25rem; }
  .nav { display: flex; gap: clamp(1.1rem, 1.9vw, 2.6rem); margin-inline: auto; }
  .burger { display: none; }
  .hdr__tools { margin-left: 0; }
  .hdr__tel { display: inline-flex; }
}
@media (min-width: 1500px) { .hdr__tel span { display: inline; } .hdr__tel { padding-right: .6rem; } }

/* ───────── Mobile menu ───────── */
.menu {
  position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; padding: calc(var(--header-h) + 1.5rem) var(--pad) 1.75rem;
  background: radial-gradient(90% 55% at 85% 105%, rgba(255, 90, 31, .26), transparent 70%), var(--charbon);
  visibility: hidden; opacity: 0; clip-path: circle(0 at calc(100% - 3rem) 2.25rem);
  transition: clip-path .7s var(--ease), opacity .3s, visibility 0s .7s; overflow-y: auto; overscroll-behavior: contain;
}
.menu-open .menu { visibility: visible; opacity: 1; clip-path: circle(150% at calc(100% - 3rem) 2.25rem); transition: clip-path .8s var(--ease), opacity .2s, visibility 0s; }
.menu__nav { display: grid; margin-block: auto; padding-block: 1rem; }
.menu__nav a { display: flex; align-items: baseline; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-family: var(--ff-d); font-weight: 350; font-size: clamp(1.55rem, 7vw, 2.6rem); letter-spacing: -.025em; line-height: 1.15; opacity: 0; transform: translateY(1rem); transition: opacity .5s var(--ease), transform .6s var(--ease), color .3s; }
.menu__nav a small { font-family: var(--ff-s); font-size: .7rem; font-weight: 600; letter-spacing: .18em; color: var(--braise); min-width: 1.5rem; }
.menu__nav a:hover, .menu__nav a:focus-visible, .menu__nav a[aria-current] { color: var(--ambre); }
.menu-open .menu__nav a { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i) * .05s); }
.menu__foot { display: grid; gap: .75rem; padding-top: 1.25rem; }
.menu__foot .btn { width: 100%; }
.menu__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.menu__sig { margin-top: .5rem; font-size: .8rem; color: var(--cendre); text-align: center; }
@media (min-width: 700px) { .menu { padding-inline: clamp(3rem, 12vw, 9rem); } .menu__foot { grid-template-columns: 1.2fr 1fr; align-items: start; } .menu__sig { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .menu { display: none; } }

/* ───────── Footer ───────── */
.foot { position: relative; background: var(--noir); padding: clamp(3rem, 6vw, 6rem) 0 6.5rem; overflow: hidden; }
.foot__big { font-family: var(--ff-d); font-weight: 320; font-size: 17.4vw; letter-spacing: -.045em; line-height: .8; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(200, 152, 106, .42); padding-inline: var(--pad); margin-bottom: clamp(2.5rem, 5vw, 5rem); user-select: none; }
html[lang="en"] .foot__big { font-size: 13.6vw; }
.foot__big em { font-style: italic; -webkit-text-stroke: 0; color: var(--braise); text-shadow: 0 0 .3em rgba(255, 90, 31, .4); }
.foot__grid { display: grid; gap: 2.5rem; }
.foot__brand { display: grid; gap: 1rem; justify-items: start; }
.foot__brand .lockup { width: min(100%, 19rem); height: auto; color: var(--os); }
.foot__brand p { color: var(--cendre); max-width: 22rem; font-size: .95rem; }
.foot h4 { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--chene); margin-bottom: .8rem; }
.foot li a, .foot li span { display: inline-flex; align-items: center; min-height: 2.5rem; font-size: .98rem; color: #DDD2C4; transition: color .3s; }
.foot li a:hover { color: var(--braise); }
.foot__legal { display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; align-items: center; margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--cendre); }
.foot__legal .heart { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; color: #DDD2C4; }
.foot__legal .heart svg { width: 1rem; height: 1rem; fill: var(--braise); filter: drop-shadow(0 0 .4rem rgba(255, 90, 31, .7)); }
.foot__lang { margin-top: .5rem; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--gap); } .foot { padding-bottom: 2.5rem; } }
@media (max-width: 759px) { .foot__legal .heart { margin-left: 0; width: 100%; } }

/* ───────── Simple pages: legal notice, 404 ───────── */
.page { min-height: 70vh; padding: calc(var(--header-h) + clamp(3rem, 9vw, 8rem)) 0 var(--sec); background: radial-gradient(70% 50% at 85% 0%, rgba(255, 90, 31, .1), transparent 70%), var(--charbon); }
.page__wrap { max-width: 56rem; }
.page__head { display: grid; gap: 1.25rem; justify-items: start; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.page__head .h2 { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.prose { display: grid; gap: 1rem; color: #DDD2C4; max-width: 44rem; }
.prose h2 { font-family: var(--ff-d); font-weight: 400; font-size: clamp(1.45rem, 2.2vw, 2rem); letter-spacing: -.02em; line-height: 1.1; color: var(--os); margin-top: 1.75rem; }
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--ambre); text-decoration: underline; text-decoration-color: rgba(243, 154, 61, .45); text-underline-offset: .2em; }
.prose a:hover { color: var(--braise-vif); }
.ledger { display: grid; gap: .25rem 1.5rem; padding: 1.25rem 0; border-block: 1px solid var(--line); }
.ledger dt { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cendre); padding-top: .65rem; }
.ledger dd { color: var(--os); }
@media (min-width: 640px) { .ledger { grid-template-columns: minmax(11rem, auto) 1fr; } .ledger dt { padding-top: .2rem; } .ledger dd { padding-block: .1rem .55rem; } }
.page__back { margin-top: clamp(2.5rem, 5vw, 4rem); }
.flip { transform: rotate(180deg); }
.btn:hover .flip { transform: rotate(180deg) translateX(.2em); }
.page--lost { display: grid; align-items: center; }
.lost { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.lost__mark { width: clamp(7rem, 22vw, 16rem); height: auto; aspect-ratio: 1; fill: var(--braise); opacity: .9; filter: drop-shadow(0 0 2.5rem rgba(255, 90, 31, .35)); }
.lost__txt { display: grid; gap: 1.25rem; justify-items: start; }
.lost__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
@media (min-width: 860px) { .lost { grid-template-columns: auto minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}