/* ŒUVRE — shared design system. All assets local; the pages make no external requests. */

/* ============ Fonts ============ */
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant Garamond"; src:url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Inter"; src:url("fonts/inter-300.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("fonts/inter-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("fonts/inter-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Inter"; src:url("fonts/inter-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Space Grotesk"; src:url("fonts/space-grotesk-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* ============ The house palette ============ */
:root{
  --paper:#ffffff;
  --shell:#faf8f4;
  --ink:#1a1a1a;
  --muted:#8a8a8a;
  --hairline:#e8e3da;
  --bronze:#8c7a5e;
  --bronze-soft:#a99a82;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", system-ui, sans-serif;
  --mono-caps:"Space Grotesk", var(--sans);
  --measure:34rem;
  color-scheme: light;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.static{ scroll-behavior:auto; }
html.gated{ overflow:hidden; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--bronze); color:var(--paper); }
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

/* ============ Recurring motifs ============ */
.label-caps{
  font-family:var(--sans);
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.sec-num{
  font-family:var(--mono-caps);
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.18em;
  color:var(--bronze);
}
.serif-display{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.01em;
}
.wrap{ max-width:72rem; margin:0 auto; padding:0 clamp(1.25rem, 5vw, 3rem); }
section{ position:relative; }
.section-head{
  display:flex; align-items:baseline; gap:1.25rem;
  padding-top:clamp(4rem, 9vw, 7.5rem);
  margin-bottom:clamp(2.5rem, 5vw, 4rem);
}
.section-head::after{
  content:""; flex:1; height:1px; background:var(--hairline); transform:translateY(-4px);
}
.section-head::before{
  content:attr(data-ghost); position:absolute; right:0; bottom:-2.6rem;
  font-family:var(--serif); font-weight:300; line-height:1;
  font-size:clamp(6rem, 13vw, 10.5rem);
  color:var(--ink); opacity:.05; pointer-events:none; user-select:none;
}

/* ============ Reveal on scroll (JS-gated; visible without JS) ============ */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
.js .reveal.is-in{ opacity:1; transform:none; }
.js .reveal[data-delay="1"]{ transition-delay:.12s; }
.js .reveal[data-delay="2"]{ transition-delay:.24s; }
.js .reveal[data-delay="3"]{ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .frame-float{ animation:none !important; }
}

/* ============ Navigation ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:transparent;
  transition:background .4s ease, box-shadow .4s ease;
}
.nav.scrolled{ background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--hairline); }
.nav-inner{
  max-width:72rem; margin:0 auto;
  padding:1.1rem clamp(1.25rem, 5vw, 3rem);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.wordmark{
  font-family:var(--serif); font-weight:500; font-size:1.35rem; letter-spacing:.34em;
  text-decoration:none; padding-left:.34em; /* optically balance tracking */
}
.nav-links{ display:flex; gap:2.2rem; align-items:center; }
.nav-links a{
  font-size:.7rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--muted); transition:color .3s;
  position:relative;
}
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0; background:var(--bronze); transition:width .35s ease; }
.nav-links a:hover::after{ width:100%; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a.appointment{ color:var(--bronze); }
@media (max-width:44rem){ .nav-links a:not(.appointment){ display:none; } }

/* ============ Footer ============ */
footer{ background:var(--ink); color:#b9b6b1; }
.foot-inner{
  max-width:72rem; margin:0 auto;
  padding:clamp(4rem,8vw,6.5rem) clamp(1.25rem, 5vw, 3rem) 2.5rem;
}
.foot-inner .wordmark{ color:var(--paper); font-size:1.6rem; }
.foot-lede{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--paper); max-width:34rem; margin:2rem 0 .6rem;
}
.foot-what{ font-size:.95rem; max-width:30rem; margin-top:1.6rem; color:#b9b6b1; }
.foot-mail{
  display:inline-block; margin-top:2rem; text-decoration:none;
  font-size:.78rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); background:var(--bronze-soft); border:1px solid var(--bronze-soft);
  padding:1.05rem 2.2rem;
  transition:background .3s, color .3s;
}
.foot-mail:hover{ background:var(--paper); border-color:var(--paper); }
.foot-addr{ margin-top:1.1rem; font-size:.8rem; color:#8f8c87; }
.foot-addr a{ color:var(--bronze-soft); text-decoration:none; border-bottom:1px solid #55504a; padding-bottom:.15rem; }
.foot-addr a:hover{ color:var(--paper); }
.foot-note{ font-size:.8rem; max-width:30rem; margin-top:2.6rem; color:#8f8c87; }
.foot-base{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid #333; margin-top:3rem; padding-top:1.4rem;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#77746f;
}

/* ============ The artsy layer ============ */
.js body{ animation:pagein 1.1s ease both; }
@keyframes pagein{ from{ opacity:0; } }

/* paper grain over everything, like stock in a fine catalogue */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:99;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.028;
}

/* the rotating seal */
.seal{ position:absolute; top:-2.8rem; left:-2.8rem; width:7.6rem; height:7.6rem; z-index:3; }
.seal-spin{ animation:sealspin 55s linear infinite; transform-origin:60px 60px; }
@keyframes sealspin{ to{ transform:rotate(360deg); } }
.seal-text{ font-family:var(--sans); font-size:8.6px; font-weight:500; letter-spacing:2px; fill:var(--bronze); }
.seal-mid{ font-family:var(--serif); font-size:13px; fill:var(--bronze); }
@media (max-width:56rem){ .seal{ top:-2rem; left:-1rem; width:6rem; height:6rem; } }

/* framed miniature works (the vitrine wall and friends) */
.mini{ background:#fff; border:1px solid #cdc5b6; padding:9px; box-shadow:0 18px 34px -22px rgba(26,26,26,.35); }
.mini-canvas{ width:var(--w); height:var(--h); background:linear-gradient(165deg, var(--c1), var(--c2)); position:relative; overflow:hidden; transition:transform .5s ease; }
.mini:hover .mini-canvas{ transform:scale(1.035); }
.mini-canvas .orb{ position:absolute; border-radius:50%; background:rgba(140,122,94,.26); width:56%; aspect-ratio:1; left:21%; top:17%; }
.mini-canvas .band{ position:absolute; left:0; right:0; bottom:0; height:26%; background:rgba(26,26,26,.12); }
.mini-canvas .linev{ position:absolute; top:8%; bottom:8%; left:26%; width:1px; background:rgba(255,255,255,.55); }
.mini figcaption{ margin-top:.65rem; }
.mini figcaption .t{ display:block; font-family:var(--serif); font-size:.95rem; }
.mini figcaption .d{ display:block; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.15rem; }

/* the drifting wall */
.vitrine{ border-bottom:1px solid var(--hairline); }
.vitrine-head{ display:flex; align-items:center; justify-content:center; gap:1.4rem; padding:3.2rem 1rem 3.4rem; }
.vitrine-head::before,.vitrine-head::after{ content:"+"; color:var(--bronze); opacity:.6; font-weight:300; }
.wall{ position:relative; overflow:hidden; }
.wall::before,.wall::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(2rem,8vw,7rem); z-index:2; pointer-events:none;
}
.wall::before{ left:0; background:linear-gradient(90deg, var(--paper), rgba(255,255,255,0)); }
.wall::after{ right:0; background:linear-gradient(270deg, var(--paper), rgba(255,255,255,0)); }
.wall-track{ display:flex; width:max-content; animation:pan 75s linear infinite; }
.wall:hover .wall-track{ animation-play-state:paused; }
@keyframes pan{ to{ transform:translateX(-50%); } }
.wall-set{ display:flex; align-items:center; gap:clamp(3rem, 6vw, 5.5rem); padding:1rem clamp(1.5rem,3vw,2.75rem) 3.6rem; }
.wall-set .mini:nth-child(odd){ transform:translateY(-10px); }
.wall-set .mini:nth-child(even){ transform:translateY(12px); }

/* a quiet cursor companion */
#cur{
  position:fixed; left:0; top:0; width:10px; height:10px; margin:-5px 0 0 -5px;
  border-radius:50%; background:var(--bronze); border:1px solid var(--bronze);
  opacity:0; pointer-events:none; z-index:120;
  transition:opacity .35s ease, width .3s ease, height .3s ease, margin .3s ease, background .3s ease;
}
#cur.big{ width:46px; height:46px; margin:-23px 0 0 -23px; background:transparent; }

@media (prefers-reduced-motion: reduce){
  .js body{ animation:none; }
  .seal-spin,.wall-track{ animation:none; }
  .wall{ overflow-x:auto; }
  #cur{ display:none; }
}

/* ============ Ask for a viewing — the form in the footer ============ */
.ask{ margin-top:2.2rem; max-width:34rem; }
.ask-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:.8rem; }
.ask-row > *{ flex:1 1 13rem; min-width:0; }
.ask input[type=email], .ask input[type=text], .ask select, .ask textarea{
  width:100%; font-family:var(--sans); font-size:.95rem; font-weight:300;
  padding:.85rem 1rem; color:var(--paper); background:#232220;
  border:1px solid #3a372f; outline:none;
  transition:border-color .3s ease, background .3s ease;
}
.ask textarea{ resize:vertical; min-height:5.5rem; line-height:1.6; }
.ask select{ appearance:none; cursor:pointer; }
.ask ::placeholder{ color:#77746f; }
.ask input:focus, .ask select:focus, .ask textarea:focus{ border-color:var(--bronze-soft); background:#2a2825; }
/* Honigtopf — nur fuer Maschinen sichtbar */
.ask .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ask button{
  display:inline-block; margin-top:1.2rem; cursor:pointer;
  font-family:var(--sans); font-size:.78rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); background:var(--bronze-soft); border:1px solid var(--bronze-soft);
  padding:1.05rem 2.2rem;
  transition:background .3s, color .3s, opacity .3s;
}
.ask button:hover{ background:var(--paper); border-color:var(--paper); }
.ask button[disabled]{ opacity:.5; cursor:default; }
.ask-status{ margin-top:1.1rem; min-height:1.4rem; font-family:var(--serif); font-size:1.1rem; }
.ask-status.ok{ color:var(--bronze-soft); font-style:italic; }
.ask-status.no{ color:#c98b7a; }
.ask-note{ margin-top:.9rem; font-size:.78rem; color:#8f8c87; }

/* ============ Leaf pages — confirmation, imprint, privacy ============ */
.foot-base a{ color:#8f8c87; text-decoration:none; border-bottom:1px solid #3a372f; }
.foot-base a:hover{ color:var(--bronze-soft); }
.leaf{ max-width:44rem; margin:0 auto; padding:clamp(7rem,14vw,10rem) clamp(1.25rem,5vw,3rem) clamp(4rem,8vw,6rem); }
.leaf h1{ font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.12; margin-bottom:1.6rem; }
.leaf h2{ font-family:var(--serif); font-weight:400; font-size:1.5rem; margin:2.6rem 0 .7rem; }
.leaf p, .leaf li{ color:#4a4a4a; max-width:var(--measure); }
.leaf p{ margin-bottom:1rem; }
.leaf ul{ margin:0 0 1rem 1.1rem; }
.leaf li{ margin-bottom:.4rem; }
.leaf a{ color:var(--bronze); }
.leaf .todo{ border-left:2px solid var(--bronze); background:var(--shell); padding:1rem 1.2rem; margin:1.2rem 0; font-size:.92rem; }
.leaf .back{
  display:inline-block; margin-top:2.6rem; text-decoration:none;
  font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid var(--bronze); padding-bottom:.3rem;
}