/* ============================================================
   Buranus — Travel System & Media · multi-page, brand-themed
   Fonts: Playfair Display (display) + Inter (UI/body)
   ============================================================ */
@property --amb{ syntax:'<color>'; inherits:true; initial-value:#4a3424; }

/* cross-document view transitions (logo morph between pages) */
@view-transition{ navigation:auto; }

:root{
  --espresso:#241813; --s1:#2E211A; --s2:#3A2B21;
  --ink:#F4EADD; --muted:#B7A896; --ivory:#F7F3EC;
  --line:color-mix(in srgb, var(--ink) 14%, transparent);
  --amb:#4a3424; --b:#F8A32F; --b2:#FFC46A;
  --ease:cubic-bezier(.2,.7,.2,1);
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --maxw:1400px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--sans); color:var(--ink); line-height:1.65;
  font-weight:400; letter-spacing:.002em; overflow-x:hidden; min-height:100svh;
  background:
    radial-gradient(135% 95% at 50% -12%, #3b2a1f 0%, #2a1d15 40%, #221610 75%) fixed,
    #221610;
}
h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; line-height:1.12; letter-spacing:-.01em; margin:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.sr-only{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
::selection{ background:color-mix(in srgb,var(--b) 42%, transparent); color:#fff; }
:focus-visible{ outline:2px solid var(--b2); outline-offset:4px; border-radius:8px; }

body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(135% 105% at 50% 32%, transparent 62%, rgba(0,0,0,.34) 100%);
  mix-blend-mode:multiply;
}

/* ---------------- ambient + cursor light ---------------- */
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  transition:--amb 1.1s ease, opacity 1.1s ease;
}
.ambient::before{
  content:""; position:absolute; inset:-30vmax;
  background:
    radial-gradient(33vmax 30vmax at 24% 28%, color-mix(in srgb, var(--amb) 64%, transparent), transparent 60%),
    radial-gradient(30vmax 27vmax at 80% 70%, color-mix(in srgb, var(--amb) 40%, transparent), transparent 60%),
    radial-gradient(50vmax 40vmax at 50% 118%, color-mix(in srgb, var(--amb) 26%, transparent), transparent 70%);
  opacity:.6; filter:blur(28px);
  animation:drift 32s ease-in-out infinite alternate;
}
@keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1)} 100%{transform:translate3d(2.4vmax,-1.8vmax,0) scale(1.07)} }
.cursor-glow{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .8s ease;
  background:radial-gradient(440px 440px at var(--mx,50%) var(--my,38%), color-mix(in srgb,var(--b2) 20%, transparent), transparent 68%);
}
body.has-cursor .cursor-glow{ opacity:1; }

/* ---------------- topbar (shared) ---------------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px clamp(16px,4vw,46px);
  background:linear-gradient(to bottom, rgba(34,22,16,.82), rgba(34,22,16,0));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.topbar-home{ justify-content:flex-end; }
.tb-left{ display:flex; align-items:center; gap:10px; }
.wordmark{ font-family:var(--serif); font-weight:600; font-size:1.16rem; letter-spacing:.34em; color:var(--ink); opacity:.94; padding-left:.34em; transition:opacity .25s; }
a.wordmark:hover{ opacity:1; }
.langs{ display:flex; gap:2px; background:color-mix(in srgb,var(--ink) 8%,transparent); border:1px solid var(--line); border-radius:999px; padding:3px; }
.lang{ font:600 .72rem/1 var(--sans); letter-spacing:.06em; color:var(--muted); background:transparent; border:0; cursor:pointer; padding:.5em .82em; border-radius:999px; transition:color .25s, background .25s; }
.lang:hover{ color:var(--ink); }
.lang.active{ color:#221610; background:var(--ink); }
.navbtn{ display:inline-flex; align-items:center; gap:.45em; cursor:pointer; font:600 .84rem/1 var(--sans); color:var(--ink); background:color-mix(in srgb,var(--ink) 8%,transparent); border:1px solid var(--line); border-radius:999px; padding:.6em .98em; transition:background .25s, border-color .25s, color .25s, transform .25s var(--ease); }
.navbtn:hover{ background:color-mix(in srgb,var(--ink) 13%,transparent); border-color:color-mix(in srgb,var(--b) 62%,transparent); color:var(--b2); }
.navbtn-ghost{ background:transparent; color:var(--muted); }
.arr-l{ display:inline-block; transition:transform .25s var(--ease); }
.navbtn:hover .arr-l{ transform:translateX(-3px); }

/* ---------------- HOME stage + logo cards ---------------- */
.stage{ position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:120px clamp(14px,3.5vw,40px) 80px; z-index:2; }
.stage > :not(.ambient):not(.cursor-glow){ position:relative; z-index:1; }
.grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(4px,1vw,18px); width:100%; max-width:var(--maxw); margin-inline:auto; }
@media (max-width:980px){ .grid{ grid-template-columns:1fr; gap:14px; max-width:420px; } }
@media (max-width:640px){ .grid{ gap:9px; max-width:360px; } }
/* desktop: no dead zone between logos — card hit areas touch, visual spacing via padding */
@media (min-width:981px){
  .grid{ column-gap:0; }
  .card{ padding-inline:clamp(4px,.6vw,11px); }
}

.card{ position:relative; display:block; }
.card .tile{
  position:relative; display:grid; place-items:center; aspect-ratio:5/4; padding:9% 7% 13%;
  transform:perspective(1100px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(calc(var(--lift,0)*-9px)) scale(calc(1 + var(--lift,0)*.05));
  transition:transform .45s var(--ease);
  opacity:1; animation:cardIn .9s var(--ease) both;
}
.grid .card:nth-child(1) .tile{animation-delay:.16s} .grid .card:nth-child(2) .tile{animation-delay:.26s}
.grid .card:nth-child(3) .tile{animation-delay:.36s} .grid .card:nth-child(4) .tile{animation-delay:.46s}
.grid .card:nth-child(5) .tile{animation-delay:.56s}
@keyframes cardIn{ from{opacity:0;transform:perspective(1100px) translateY(26px) scale(.94)} to{opacity:1} }
/* brand bloom + accent live INSIDE the tile (logo zone) so they never collide with the buttons */
.card .tile::before{
  content:""; position:absolute; inset:-4% -2% 8%; z-index:0; border-radius:50%;
  background:radial-gradient(56% 54% at 50% 46%, color-mix(in srgb,var(--b) 70%,transparent), color-mix(in srgb,var(--b) 24%,transparent) 46%, transparent 72%);
  filter:blur(34px); opacity:0; transform:scale(.78); transition:opacity .6s ease, transform .6s var(--ease); pointer-events:none;
}
.card .tile::after{
  content:""; position:absolute; left:16%; right:16%; bottom:3%; height:2px; z-index:2; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--b), transparent);
  transform:scaleX(0); opacity:0; transition:transform .55s var(--ease), opacity .4s ease; pointer-events:none;
}
.card .logo{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; filter:none; transition:filter .18s ease; }
.logo-wrap{ position:relative; display:block; width:100%; height:100%; }
.logo-light{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .2s ease;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;
  background:radial-gradient(circle 72px at var(--lx,50%) var(--ly,42%), rgba(255,252,245,.95), rgba(255,246,228,.4) 30%, transparent 56%);
  mix-blend-mode:plus-lighter; }
.card:hover .logo-light, .card:focus-within .logo-light, .card.is-open .logo-light{ opacity:1; }
.card:hover, .card:focus-within{ --lift:1; }
.card:hover .tile::before, .card:focus-within .tile::before{ opacity:.6; transform:scale(1); }
.card:hover .tile::after, .card:focus-within .tile::after{ transform:scaleX(1); opacity:.9; }
.card:hover .logo, .card:focus-within .logo{ filter:drop-shadow(var(--sx,0px) var(--sy,16px) 8px rgba(0,0,0,.72)); }
.grid:has(.card:hover) .card:not(:hover),
.grid:has(.card:focus-within) .card:not(:focus-within){ opacity:.36; filter:grayscale(.5) brightness(.66); }

/* reveal overlay (description + actions) */
.ov-kicker{ display:none; }
.ov-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.card:hover .ov-wrap, .card:focus-within .ov-wrap{ grid-template-rows:1fr; }
.overlay{ overflow:hidden; min-height:0; text-align:center; }
.overlay > *{ opacity:0; transform:translateY(7px); transition:opacity .45s ease .05s, transform .5s var(--ease) .05s; }
.card:hover .overlay > *, .card:focus-within .overlay > *{ opacity:1; transform:none; }

/* mobile tap-to-open (JS toggles .is-open) */
.card.is-open{ --lift:1; }
.card.is-open .tile::before{ opacity:.6; transform:scale(1); }
.card.is-open .tile::after{ transform:scaleX(1); opacity:.9; }
.card.is-open .logo{ filter:drop-shadow(var(--sx,0px) var(--sy,16px) 8px rgba(0,0,0,.72)); }
.card.is-open .ov-wrap{ grid-template-rows:1fr; }
.card.is-open .overlay > *{ opacity:1; transform:none; }
.grid:has(.card.is-open) .card:not(.is-open){ opacity:.36; filter:grayscale(.5) brightness(.66); }
.ov-desc{ margin:6px 8px 16px; font-size:.95rem; color:var(--muted); line-height:1.55; }
.ov-actions{ display:flex; flex-wrap:wrap; gap:10px; padding:0 4px 6px; justify-content:center; }

/* ---------------- buttons ---------------- */
.btn{ display:inline-flex; align-items:center; gap:.45em; cursor:pointer; white-space:nowrap; font:600 .84rem/1 var(--sans); padding:.7em 1.04em; border-radius:999px; border:1px solid transparent; transition:transform .2s var(--ease), background .25s, border-color .25s, color .25s, box-shadow .25s; }
.btn-primary{ background:color-mix(in srgb,var(--b) 24%, #241710); color:var(--b2); border-color:color-mix(in srgb,var(--b) 50%,transparent); }
.btn-primary:hover{ background:color-mix(in srgb,var(--b) 36%, #241710); border-color:var(--b); box-shadow:0 12px 30px -16px color-mix(in srgb,var(--b) 92%,#000); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:color-mix(in srgb,var(--b) 72%,transparent); color:var(--b2); }
.arr{ font-size:.9em; transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translate(2px,-2px); }

/* ---------------- brand / media PAGE ---------------- */
.page{ position:relative; min-height:100svh; z-index:2; padding:92px 0 0; }
.p-inner{ max-width:860px; margin-inline:auto; padding:0 clamp(18px,4vw,44px) 90px; position:relative; }
.beam{ position:absolute; top:-26px; left:50%; transform:translateX(-50%); width:min(760px,94%); height:380px; z-index:0; pointer-events:none; background:radial-gradient(50% 50% at 50% 0%, color-mix(in srgb,var(--b) 52%,transparent), transparent 70%); filter:blur(48px); opacity:.5; }
.p-head{ position:relative; z-index:1; text-align:center; padding:26px 0 clamp(22px,3vw,32px); display:flex; flex-direction:column; align-items:center; gap:16px; }
.p-logo-chip{ display:inline-grid; place-items:center; background:transparent; padding:2px; animation:pHero .75s var(--ease) .05s both; }
@keyframes pHero{ from{opacity:0; transform:translateY(14px) scale(.96)} to{opacity:1; transform:none} }
.p-logo{ height:clamp(44px,6vw,68px); width:auto; max-width:300px; object-fit:contain; filter:none; }
.mp-logo{ height:clamp(38px,5vw,56px); }
.p-kicker{ display:none; }
.mp-title{ font-size:clamp(2.1rem,5vw,3.2rem); font-weight:500; animation:pHero .8s var(--ease) .16s both; }

.p-body{ position:relative; z-index:1; max-width:740px; margin-inline:auto; }
.r-up{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .7s var(--ease); }
.r-up.in{ opacity:1; transform:none; }
.p-intro{ font-size:clamp(1.06rem,1.4vw,1.2rem); color:color-mix(in srgb,var(--ink) 92%, var(--muted)); margin:0 0 8px; line-height:1.7; }

/* clear section separation */
.sec-h{
  font-family:var(--serif); font-size:1.32rem; font-weight:500; color:var(--ink);
  display:flex; align-items:center; gap:.6em;
  margin:40px 0 18px; padding-top:30px; border-top:1px solid var(--line);
}
.sec-h::before{ content:""; flex:0 0 auto; width:26px; height:2px; background:var(--b); border-radius:2px; box-shadow:0 0 14px color-mix(in srgb,var(--b) 75%,transparent); }
.svc-list{ list-style:none; margin:0 0 4px; padding:0; display:grid; gap:12px; }
.svc-list li{ position:relative; padding-left:27px; color:color-mix(in srgb,var(--ink) 90%,var(--muted)); }
.svc-list li::before{ content:""; position:absolute; left:6px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--b); box-shadow:0 0 12px color-mix(in srgb,var(--b) 85%,transparent); }

.steps{ list-style:none; margin:0 0 4px; padding:0; display:grid; gap:20px; }
.step{ position:relative; display:flex; gap:16px; align-items:flex-start; }
.step:not(:last-child)::before{ content:""; position:absolute; left:16px; top:40px; bottom:-20px; width:2px; background:linear-gradient(var(--b), color-mix(in srgb,var(--b) 12%,transparent)); opacity:.45; }
.step-n{ position:relative; z-index:1; flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; font:600 .95rem/1 var(--sans); color:var(--b2); background:color-mix(in srgb,var(--b) 16%, var(--s1)); border:1px solid color-mix(in srgb,var(--b) 52%,transparent); box-shadow:0 0 16px -5px color-mix(in srgb,var(--b) 75%,transparent); }
.step-c{ padding-top:4px; }
.step-t{ display:block; font-weight:600; color:var(--ink); font-size:1.04rem; margin-bottom:3px; }
.step-d{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.55; }

.faq{ display:grid; gap:10px; }
.faq-item{ border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--s1) 70%,transparent); overflow:hidden; transition:border-color .25s, background .25s; }
.faq-item[open]{ border-color:color-mix(in srgb,var(--b) 48%,transparent); background:color-mix(in srgb,var(--b) 8%, var(--s1)); }
.faq-item summary{ list-style:none; cursor:pointer; padding:16px 18px; font:600 1rem/1.45 var(--sans); display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font:400 1.4rem/1 var(--sans); color:var(--b2); transition:transform .3s var(--ease); }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-a{ margin:0; padding:0 18px 17px; color:var(--muted); font-size:.96rem; line-height:1.6; }

.contact{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-top:6px; }
.mail{ color:var(--b2); font-weight:500; font-size:.96rem; border-bottom:1px solid transparent; transition:border-color .2s; }
.mail:hover{ border-bottom-color:currentColor; }
.socials{ display:flex; gap:10px; margin-left:auto; }
.soc{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:color-mix(in srgb,var(--ink) 6%,transparent); transition:border-color .25s, background .25s, transform .25s var(--ease); }
.soc:hover{ border-color:var(--b); background:color-mix(in srgb,var(--b) 16%,transparent); transform:translateY(-3px); }
.soc svg{ width:18px; height:18px; fill:var(--ink); transition:fill .25s; }
.soc:hover svg{ fill:var(--b2); }

/* Buranus sub-cards */
.subgrid{ display:grid; gap:18px; margin-top:30px; }
@media (min-width:760px){ .subgrid{ grid-template-columns:1fr 1fr; align-items:stretch; } .subcard{ display:flex; flex-direction:column; } .subcard .contact{ margin-top:auto; } }
.subcard{ border:1px solid var(--line); border-radius:20px; padding:26px 26px 28px; background:linear-gradient(180deg, color-mix(in srgb,var(--s2) 86%,transparent), color-mix(in srgb,var(--s1) 66%,transparent)); transition:border-color .3s; }
.subcard:hover{ border-color:color-mix(in srgb,var(--b) 42%,transparent); }
.sub-h{ font-size:1.42rem; margin:0 0 10px; }
.subcard .sec-h{ margin-top:22px; padding-top:0; border-top:0; font-size:1.06rem; }
.subcard .sec-h:first-of-type{ margin-top:14px; }
.subcard .faq-item{ background:color-mix(in srgb,#000 20%,transparent); }
.subcard .p-intro{ font-size:1rem; }

/* ---------------- media page ---------------- */
.media-body{ max-width:880px; }
.media-body .sec-h{ margin-top:clamp(40px,4.6vw,62px); padding-top:clamp(30px,3vw,40px); }
.mp-sub{ color:var(--muted); margin:0 0 20px; font-size:.98rem; line-height:1.6; }
.mp-note{ color:var(--muted); margin:18px 0 0; font-size:.88rem; padding:14px 18px; border-left:2px solid color-mix(in srgb,var(--b) 58%,transparent); background:color-mix(in srgb,var(--s1) 60%,transparent); border-radius:0 12px 12px 0; line-height:1.6; }
.pkg-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:560px){ .pkg-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .pkg-grid{ grid-template-columns:repeat(4,1fr); } }
.pkg{ position:relative; border:1px solid var(--line); border-radius:18px; padding:22px 20px 24px; background:linear-gradient(180deg, color-mix(in srgb,var(--s2) 88%,transparent), color-mix(in srgb,var(--s1) 62%,transparent)); display:flex; flex-direction:column; gap:14px; transition:border-color .3s, transform .4s var(--ease), box-shadow .4s; overflow:hidden; }
.pkg::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--b),var(--b2)); opacity:.9; }
.pkg:hover{ border-color:color-mix(in srgb,var(--b) 54%,transparent); transform:translateY(-5px); box-shadow:0 24px 54px -30px color-mix(in srgb,var(--b) 82%,#000); }
.pkg-name{ font-family:var(--serif); font-size:1.28rem; color:var(--b2); }
.pkg-counts{ list-style:none; margin:0; padding:0; display:grid; gap:7px; color:var(--muted); font-size:.92rem; }
.pkg-counts b{ color:var(--ink); font-weight:600; }
.pkg-price{ margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:8px; }
.pkg-price .was{ color:var(--muted); font-size:.82rem; text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent); }
.pkg-price .now{ font:500 1.5rem/1.05 var(--serif); color:var(--ink); }
.pkg-price .per{ font:500 .82rem/1 var(--sans); color:var(--muted); }
.mg-wrap{ display:grid; gap:28px; }
.mg-h{ font-family:var(--serif); font-size:1.16rem; font-weight:500; color:var(--ink); margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.mg-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
@media (min-width:640px){ .mg-list{ grid-template-columns:1fr 1fr; gap:16px 30px; } }
.mg-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.mg-name{ font-weight:600; color:var(--ink); font-size:.98rem; }
.mg-price{ flex:0 0 auto; font-weight:600; color:var(--b2); font-size:.92rem; white-space:nowrap; }
.mg-proj{ color:var(--muted); font-weight:500; font-size:.82rem; }
.mg-desc{ margin:5px 0 0; color:var(--muted); font-size:.88rem; line-height:1.55; }
.budget-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:16px; }
.budget{ width:100%; border-collapse:collapse; min-width:340px; }
.budget th{ text-align:left; font:600 .78rem/1.2 var(--sans); letter-spacing:.05em; text-transform:uppercase; color:var(--b2); padding:16px 18px; background:color-mix(in srgb,var(--b) 14%,transparent); }
.budget td{ padding:14px 18px; border-top:1px solid var(--line); font-size:.93rem; }
.budget .bg-range{ color:var(--muted); }
.budget .bg-fee{ color:var(--ink); font-weight:600; text-align:right; }
.budget tbody tr:nth-child(odd) td{ background:color-mix(in srgb,var(--s1) 42%,transparent); }
.budget .bg-custom .bg-fee{ color:var(--b2); }
.mp-sec-split{ display:grid; gap:clamp(28px,4vw,46px); }
@media (min-width:820px){ .mp-sec-split{ grid-template-columns:1fr 1fr; align-items:start; } }
.mp-sec-split .sec-h{ margin-top:clamp(40px,4.6vw,62px); }
.contact-media .btn-primary{ font-size:.92rem; padding:.84em 1.28em; }
.mp-vat{ margin:22px 0 0; color:var(--muted); font-size:.8rem; letter-spacing:.03em; }

/* ---------------- footer ---------------- */
.footer{ position:relative; z-index:2; text-align:center; padding:46px 20px 54px; border-top:1px solid var(--line); background:#1d130d; }
.f-legal{ margin:0 0 8px; color:color-mix(in srgb,var(--ink) 60%, var(--muted)); font-size:.82rem; letter-spacing:.3px; }
.f-line{ margin:0 0 7px; color:var(--muted); font-size:.85rem; }
.f-rights{ margin:0; color:color-mix(in srgb,var(--muted) 80%,transparent); font-size:.8rem; }
.f-about{ display:inline-flex; align-items:center; margin-left:9px; padding:.36em .82em; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.76rem; letter-spacing:.02em; text-decoration:none; transition:color .25s, border-color .25s, background .25s; }
.f-about:hover{ color:var(--ink); border-color:color-mix(in srgb,var(--ink) 30%,transparent); background:color-mix(in srgb,var(--ink) 7%,transparent); }

/* About / Hakkımızda (home) */
.about-page{ display:flex; }
.about-wrap{ max-width:760px; margin:auto; padding:24px 24px 90px; text-align:center; }
.about-title{ font-family:var(--serif); font-weight:600; font-size:clamp(2rem,5.4vw,2.9rem); color:var(--ink); margin:0 0 26px; }
.about-lead{ color:var(--muted); font-size:1.07rem; line-height:1.78; margin:0 auto 26px; max-width:690px; }
.about-meta{ color:color-mix(in srgb,var(--muted) 70%, transparent); font-size:.82rem; line-height:1.7; letter-spacing:.2px; margin:0 auto; max-width:700px; }
.about-back{ margin-top:34px; }

/* ---------------- view transition tuning ---------------- */
::view-transition-group(*){ animation-duration:.5s; animation-timing-function:var(--ease); }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.45s; animation-timing-function:var(--ease); }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  .ambient::before{ animation:none!important; }
  .card .tile{ animation:none!important; opacity:1!important; transform:none!important; }
  .card:hover .tile, .card.is-open .tile{ transform:none!important; }
  .r-up{ opacity:1!important; transform:none!important; }
  .p-logo-chip, .mp-title{ animation:none!important; opacity:1!important; transform:none!important; }
  .cursor-glow{ display:none!important; }
  ::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){ animation:none!important; }
}

/* mobile: compact logo tiles — placed last so it wins over the base .card .tile rule */
@media (max-width:640px){
  .card .tile{ aspect-ratio:5 / 2.2; padding:6% 11%; }
}