@view-transition{ navigation:auto; }

  :root{
    --sugar:#F4EAD9;
    --sugar-deep:#EADBC2;
    --ink:#3A332B;
    --olive:#84815A;
    --grenadine:#A65C56;
    --line: rgba(58,51,43,0.15);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; font-size:106.25%;}
  input, textarea, button, select{ font-family:inherit; }
  body{
    font-family:'Alegreya', 'Palatino Linotype', Georgia, serif;
    color:var(--ink);
    background:var(--sugar);
    font-weight:500;
    line-height:1.65;
  }
  h1,h2,h3, .display{
    font-family:'Alegreya', 'Palatino Linotype', Georgia, serif;
    font-weight:600;
    letter-spacing:0.01em;
  }

  /* ---------- Top bar ---------- */
  header.topbar{
    position:sticky;
    top:0;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:26px 6vw;
    background:rgba(244,234,217,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .mark{
    font-family:'Alegreya', 'Palatino Linotype', Georgia, serif;
    font-style:italic;
    font-weight:600;
    font-size:1.35rem;
    color:var(--grenadine);
    line-height:1.2;
  }
  .mark .mark-small{
    display:block; font-size:0.66rem; font-style:normal; letter-spacing:0.16em;
    color:var(--ink); opacity:0.55; margin-top:4px; text-transform:uppercase;
  }
    header.topbar nav ol a.nav-cta{
    color:#FFFFFF;
    background:var(--grenadine);
    padding:8px 18px;
    border-radius:999px;
    opacity:1;
  }
  header.topbar nav ol a.nav-cta:hover{ opacity:0.88; }
header.topbar nav ol{
    list-style:none;
    display:flex;
    gap:34px;
  }
  header.topbar nav a{
    color:var(--ink);
    text-decoration:none;
    display:flex;
    align-items:baseline;
    gap:8px;
    font-size:0.9rem;
    opacity:0.55;
    transition:opacity .3s ease;
    white-space:nowrap;
  }
  header.topbar nav a .num{
    font-family:'Alegreya', 'Palatino Linotype', Georgia, serif;
    font-style:italic;
    color:var(--olive);
    font-size:0.8rem;
  }
  header.topbar nav a.active,
  header.topbar nav a:hover{ opacity:1; }
  header.topbar nav a.active{ color:var(--grenadine); }

  main{ width:100%; }

  section{
    min-height:100vh;
    padding:90px 6vw;
    display:none;
    flex-direction:column;
    justify-content:center;
    border-bottom:none;
    position:relative;
    background:transparent;

  }
  section.active{
    display:flex;
  }
  /* Fixed page background (works on desktop, tablet and mobile) */
  body::before{
    content:"";
    position:fixed;
    top:0; left:0;
    width:100%;
    height:100vh;
    height:100lvh;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(rgba(244,234,217,0.35), rgba(244,234,217,0.35)), url('/assets/img/img-d428377379.jpg') center/cover no-repeat;
  }
  section:not(#arxiki){ padding-top:52px; }
  .kicker{
    font-family:'Alegreya', 'Palatino Linotype', Georgia, serif;
    font-style:italic;
    color:#9A3B36;
    font-size:1rem;
    margin-bottom:18px;
  }
  .kicker-sub{ font-size:0.9rem; margin-bottom:10px; }
  #viografiko .kicker{ font-weight:700; }
  .section-lead{
    max-width:64ch;
    font-size:1.05rem;
    line-height:1.6;
    color:var(--ink);
    opacity:0.85;
    margin-bottom:36px;
  }
  .section-inner{ max-width:760px; margin:0 auto; }
  .section-inner--wide{ max-width:880px; }
  p{ max-width:62ch; color:var(--ink); opacity:0.85; }
  p strong{ font-weight:700; opacity:1; color:var(--ink); }
  .award-row strong{ font-weight:700; color:var(--grenadine); }
  .dept p strong, .dept li strong{ font-weight:700; opacity:1; color:var(--ink); }
  .rule{
    width:52px; height:1px;
    background:var(--olive);
    margin:28px 0;
  }
  strong{ font-weight:700; color:var(--ink); }

  /* Same text contrast on every page (matches the home page) */
  body section :is(p, ul, li, .section-lead, .award-row, .contact-value, .contact-value a, .social-row a, h2, h3, .dept h3, .news-item h3){
    color:#1A1712;
    opacity:1;
    text-shadow:0 1px 10px rgba(244,234,217,0.9);
  }
  body section :is(.kicker, .dept .age, .news-date, .group-label, .award-row strong, .contact-label){
    text-shadow:0 1px 10px rgba(244,234,217,0.9);
  }

  /* ---------- Hero ---------- */
  #arxiki{
    align-items:center;
    justify-content:flex-start;
    padding-top:min(14vh, 120px);
    padding-bottom:48px;
    overflow:hidden;
  }
  #arxiki .hero-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    align-items:center;
    gap:9vw;
    max-width:1200px;
    width:100%;
    margin:0 auto;
  }
  #arxiki .hero-grid > div{ grid-column:2; }
  #arxiki h1{
    font-size:clamp(2.1rem, 3.6vw, 3.2rem);
    font-weight:600;
    line-height:1.15;
    color:#1A1712;
    text-shadow:0 1px 14px rgba(244,234,217,0.9), 0 1px 3px rgba(244,234,217,0.9);
  }
  .site-logo{
    width:56px;
    height:auto;
    margin-bottom:18px;
    display:block;
  }
  #arxiki .tagline, #viografiko .tagline{
    font-family:'Alegreya', 'Palatino Linotype', Georgia, serif;
    font-style:italic;
    font-weight:500;
    color:var(--grenadine);
    font-size:1.15rem;
    margin-top:24px;
    line-height:1.5;
    max-width:46ch;
    text-shadow:0 1px 10px rgba(244,234,217,0.9);
  }
  #viografiko .tagline{ font-size:1rem; }
  #arxiki p.welcome{
    margin-top:20px;
    color:#1A1712;
    font-weight:500;
    font-size:1rem;
    opacity:1;
    max-width:52ch;
    text-shadow:0 1px 10px rgba(244,234,217,0.9);
  }
  @media (max-height: 820px){
    #arxiki h1{ font-size:clamp(1.7rem, 3vw, 2.6rem); }
    #arxiki .tagline{ margin-top:16px; font-size:1.05rem; line-height:1.4; }
    #arxiki p.welcome{ margin-top:12px; }
    .hero-cta{ margin-top:18px; }
    .legal-badge{ margin-top:20px; }
    .hero-slogan-wrap{ margin-top:0; }
  }
  .hero-cta{ display:flex; align-items:center; gap:22px; margin-top:28px; }
  .btn-primary{
    display:inline-block;
    background:var(--grenadine);
    color:#FFFFFF;
    text-decoration:none;
    font-family:'Alegreya', Georgia, serif;
    font-size:1rem;
    font-weight:600;
    padding:13px 30px;
    border-radius:999px;
    box-shadow:0 6px 18px rgba(166,92,86,0.28);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(166,92,86,0.36); }
  .btn-text{
    color:var(--ink);
    text-decoration:none;
    font-size:0.95rem;
    font-weight:600;
    opacity:0.75;
    border-bottom:1px solid rgba(58,51,43,0.3);
    padding-bottom:2px;
  }
  .btn-text:hover{ opacity:1; }
  .legal-badge{
    display:flex; flex-wrap:nowrap; align-items:center; gap:5px; white-space:nowrap;
    margin-top:38px;
    padding:10px 12px;
    background:rgba(255,255,255,0.22);
    border:1px solid rgba(58,51,43,0.08);
    border-radius:999px;
    width:fit-content;
    font-size:min(0.99rem, 1.195vw);
    letter-spacing:-0.01em;
    color:#7A2A24;
    font-weight:500;
  }
  .legal-badge .dot{ opacity:0.4; font-weight:400; }
  #arxiki .legal-note{
    margin-top:34px;
    font-size:0.72rem;
    letter-spacing:0.04em;
    color:#1A1712;
    opacity:0.85;
    max-width:52ch;
    line-height:1.7;
    text-shadow:0 1px 10px rgba(244,234,217,0.9);
  }

  .figure-wrap{ position:relative; display:flex; justify-content:center; order:-1; }

  .hero-art-frame{
    position:relative;
    width:100%;
    max-width:520px;
    aspect-ratio:3/2;
    animation: heroFadeIn 1.2s ease-out;
  }
  .hero-art-frame img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  /* Slogan (left side of the home page) */
  #arxiki .hero-grid > .hero-slogan-wrap{ grid-column:1; grid-row:1; }
  #arxiki .hero-grid > div:not(.hero-slogan-wrap){ grid-row:1; }
  .hero-slogan-wrap{ position:relative; align-self:start; margin-top:2vh; padding:10px 0; }
  .hero-slogan-wrap::before{
    content:"";
    position:absolute;
    top:50%; left:38%;
    width:min(480px, 130%); aspect-ratio:1/0.8;
    transform:translate(-50%,-50%) rotate(-6deg);
    background:radial-gradient(ellipse at center, rgba(166,92,86,0.16), rgba(166,92,86,0.05) 55%, rgba(166,92,86,0) 75%);
    border-radius:42% 58% 55% 45% / 48% 42% 58% 52%;
    filter:blur(6px);
    z-index:-1;
    pointer-events:none;
  }
  .hero-slogan-img{
    display:block; width:100%; max-width:520px; height:auto;
    clip-path:inset(0 100% 0 0);
    animation:sloganWrite 4.8s linear 0.3s forwards;
  }
  @keyframes sloganWrite{ to{ clip-path:inset(0 0 0 0); } }
  @media (min-width: 861px){ .hero-slogan-img{ width:124%; max-width:none; } .hero-slogan-wrap{ left:clamp(-40px, -2.5vw, -16px); } }
    .hero-slogan{
    font-family:'Noto Serif Display', 'Palatino Linotype', Georgia, serif;
    font-style:italic;
    font-weight:300;
    font-size:clamp(1.5rem, 2.6vw, 2.2rem);
    line-height:1.4;
    letter-spacing:0.02em;
    font-feature-settings:"calt","liga","swsh";
    color:#1A1712;
    text-shadow:0 1px 12px rgba(244,234,217,0.85);
  }
  .hero-slogan .l2{ display:block; padding-left:2.4em; margin-top:0.05em; }
  .hero-slogan .ch{ rotate:var(--r, 0deg); translate:0 var(--y, 0); }
  .hero-slogan .ch.cap{ font-size:1.4em; line-height:0.8; margin-right:0.03em; }
  .hero-slogan .w{ display:inline-block; white-space:nowrap; }
  .hero-slogan .ch{
    display:inline-block;
    animation:letterIn 0.9s ease-out both var(--d),
              dance 4.8s ease-in-out infinite calc(var(--d) + 0.9s);
  }
  @keyframes letterIn{
    0%{ opacity:0; transform:translateY(10px) rotate(-6deg); filter:blur(3px); }
    100%{ opacity:1; transform:none; filter:none; }
  }
  @keyframes dance{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    25%{ transform:translateY(-3px) rotate(-2deg); }
    50%{ transform:translateY(0) rotate(0.5deg); }
    75%{ transform:translateY(2.5px) rotate(2deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-slogan .ch{ animation:none; }
  }
  .hero-brush{
    display:block; width:min(320px, 85%); height:auto; margin:10px 0 0 0.2em;
    clip-path:inset(0 100% 0 0);
    animation:brushReveal 1.8s ease-out 5.3s forwards;
  }
  @keyframes brushReveal{ to{ clip-path:inset(0 0 0 0); } }
  .hero-hairline{
    height:1px; width:min(320px, 85%); margin:12px 0 0 0.4em;
    background:linear-gradient(90deg, rgba(166,92,86,0), var(--grenadine) 15%, var(--grenadine) 85%, rgba(166,92,86,0));
    transform:scaleX(0); transform-origin:left center;
    animation:hairDraw 1.6s ease-out 6.6s forwards;
  }
  @keyframes hairDraw{ to{ transform:scaleX(1); } }
  @media (prefers-reduced-motion: reduce){
    .hero-brush{ animation:none; clip-path:none; }
    .hero-hairline{ animation:none; transform:none; }
  }
  @keyframes heroFadeIn{
    0%{ opacity:0; transform:translateY(10px); }
    100%{ opacity:1; transform:translateY(0); }
  }

  /* ---------- Bio ---------- */
  .bio-layout{ display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:stretch; }

  /* ---------- Awards photo ---------- */
  .awards-layout{ display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:stretch; }
  .award-photo-stack{ display:flex; flex-direction:column; gap:16px; height:100%; }
  .award-photo{ flex:1; min-height:0; }
  .award-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .framed-media{
    background:var(--sugar-deep);
    border:1px solid var(--line);
    overflow:hidden;
    box-shadow:0 22px 44px -20px rgba(58,51,43,0.3);
  }
  .framed-media img, .framed-media video{ filter:saturate(1.17) contrast(1.19) brightness(1.02); }
  .framed-media iframe{ filter:saturate(0.88) contrast(1.03) sepia(0.06); }

  .portrait{
    width:300px; height:375px;
    flex-shrink:0;
  }
  .portrait img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .bio-photo-stack{ display:flex; flex-direction:column; height:100%; gap:24px; }
  .bio-photo-stack .square-photo{ width:100%; aspect-ratio:1/1; margin-top:auto; }
  .bio-photo-stack .square-photo img{ width:100%; height:100%; object-fit:contain; display:block; }
  .bio-block{ margin-top:26px; }
  .bio-block:first-of-type{ margin-top:0; }
  .group-label{
    font-family:'Alegreya', 'Palatino Linotype', Georgia, serif;
    font-style:italic;
    color:var(--olive);
    font-size:0.92rem;
    margin-bottom:8px;
  }
  #viografiko .group-label{ font-weight:700; }

  /* ---------- Awards ---------- */
  .award-group{ margin-bottom:38px; }
  .award-group:last-child{ margin-bottom:0; }
  .award-list{ display:flex; flex-direction:column; }
  .award-row{
    padding:14px 0;
    border-top:1px solid var(--line);
    font-size:0.95rem;
  }
  .award-group .award-list .award-row:last-child{ border-bottom:1px solid var(--line); }

  /* ---------- Departments ---------- */
  .dept-photo{ padding:26px 0; border-top:1px solid var(--line); }
  .dept-photo .framed-media{ width:310px; max-width:100%; aspect-ratio:1024/960; background:none; border:none; box-shadow:none; overflow:visible; }
  .dept-photo img{ width:100%; height:100%; object-fit:contain; display:block; }

  .dept-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 60px;
  }
  .dept{ padding:26px 0; border-top:1px solid var(--line); }
  .dept:last-child{ border-bottom:1px solid var(--line); }
  .dept h3{ font-size:1.15rem; font-weight:600; }
  .dept .age{ font-size:0.85rem; color:var(--grenadine); font-family:'Alegreya', 'Palatino Linotype', Georgia, serif; font-style:italic; margin-top:6px; display:block; }
  .dept p{ margin-top:10px; font-size:0.92rem; }
  .dept ul{ margin-top:10px; font-size:0.92rem; padding-left:18px; color:var(--ink); opacity:0.85; }
  .dept li{ margin-bottom:4px; }

  /* ---------- Contact ---------- */
  .contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
  .contact-row{ margin-bottom:22px; }
  .contact-label{ font-size:0.8rem; color:var(--grenadine); font-family:'Alegreya', 'Palatino Linotype', Georgia, serif; font-style:italic; }
  .contact-value{ margin-top:4px; }
  .contact-value a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
  .map-box{ width:390px; max-width:100%; height:366px; }
  .map-box iframe{ width:100%; height:100%; border:0; display:block; }
  .social-row{ display:flex; gap:22px; margin-top:8px; }
  .social-row a{ display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--olive); padding-bottom:2px; font-size:0.92rem; }
  .social-row .social-icon{ width:20px; height:20px; flex-shrink:0; color:var(--grenadine); }
  .contact-form{
    margin-top:38px; padding:30px 28px 28px;
    display:flex; flex-direction:column; gap:20px; max-width:420px;
    background:rgba(255,255,255,0.32);
    border:1px solid rgba(58,51,43,0.10);
    border-radius:18px;
    box-shadow:0 10px 30px rgba(58,51,43,0.07);
    -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  }
  .form-row{ display:flex; flex-direction:column; gap:6px; }
  .form-row label{ font-family:'Alegreya', 'Palatino Linotype', Georgia, serif; font-style:italic; color:var(--grenadine); font-size:0.8rem; }
  .form-row input, .form-row textarea{
    font-family:'Alegreya', 'Palatino Linotype', Georgia, serif;
    font-weight:500;
    font-size:0.95rem;
    color:var(--ink);
    background:transparent;
    border:none;
    border-bottom:1px solid var(--line);
    padding:8px 0;
    resize:vertical;
  }
  .form-row input:focus, .form-row textarea:focus{
    outline:none;
    border-bottom-color:var(--olive);
  }
  .form-submit{
    align-self:flex-start;
    margin-top:4px;
    padding:12px 30px;
    background:var(--ink);
    color:var(--sugar);
    border:none;
    font-family:'Alegreya', 'Palatino Linotype', Georgia, serif;
    font-size:0.85rem;
    letter-spacing:0.05em;
    cursor:pointer;
    transition:opacity .3s ease;
  }
  .form-submit:hover{ opacity:0.85; }
  .form-note{ font-size:0.75rem; color:var(--ink); opacity:0.55; margin-top:-6px; }

  /* ---------- Gallery ---------- */
  .gallery-grid{ display:flex; flex-direction:column; gap:16px; margin:10px auto 0; max-width:640px; }
  .gallery-row{ display:grid; gap:16px; }
  .gallery-row.r1{ grid-template-columns:1fr; aspect-ratio:2.1/1; }
  .gallery-row.r2{ grid-template-columns:1fr 1fr; aspect-ratio:3/1; }
  .gallery-row.r3{ grid-template-columns:1fr; aspect-ratio:2.1/1; }
  .gallery-row.r4{ grid-template-columns:7fr 5fr; aspect-ratio:2.4/1; }
  .gallery-row.r5{ grid-template-columns:8fr 4fr; aspect-ratio:2.25/1; }
  .gallery-row.r1, .gallery-row.r3{ width:80%; margin-left:auto; margin-right:auto; }
  .gallery-item{ min-height:0; min-width:0; display:block; }
  .gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; }
  .gallery-videos{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:16px -40px 0; }
  .gallery-video-item{ flex:0 0 auto; width:340px; max-width:100%; }
  .gallery-video{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#000; border:0; }
  @media (max-width:760px){ .gallery-videos{ margin-left:0; margin-right:0; } }
  @media (max-width:640px){
    .gallery-row{ display:flex; flex-direction:column; aspect-ratio:auto !important; }
    .gallery-item{ aspect-ratio:var(--ar); }
  }

  /* ---------- News ---------- */
  .news-item{ padding:26px 0; border-top:1px solid var(--line); }
  .news-item:last-child{ border-bottom:1px solid var(--line); }
  .news-date{ font-family:'Alegreya', 'Palatino Linotype', Georgia, serif; font-style:italic; color:var(--grenadine); font-size:0.85rem; }
  .news-item h3{ font-size:1.2rem; font-weight:600; margin-top:6px; }
  .news-item p{ margin-top:8px; }

  @media (min-aspect-ratio: 15/9) and (min-width: 1000px){
    #arxiki .hero-grid{ max-width:1280px; }
  }

  @media (min-width:641px) and (max-width:860px){ .legal-badge{ font-size:min(0.99rem, 2.3vw); } }
  @media (max-width: 640px){
    .legal-badge{ flex-wrap:nowrap; gap:2px; padding:7px 8px; font-size:2.5vw; letter-spacing:-0.01em; white-space:nowrap; max-width:100%; }
  }

  @media (max-width: 860px){
    header.topbar{ flex-direction:column; align-items:flex-start; gap:16px; padding:20px 6vw; }
    header.topbar nav{ width:100%; max-width:100%; min-width:0; }
    header.topbar nav ol{ overflow-x:auto; width:100%; gap:22px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    header.topbar nav ol::-webkit-scrollbar{ display:none; }
    header.topbar nav ol li{ flex:0 0 auto; }
    section{ padding:64px 6vw; }
    #arxiki .hero-grid, .bio-layout, .contact-layout, .awards-layout{ grid-template-columns:1fr; }
    #arxiki .hero-grid > div:not(.hero-slogan-wrap), #arxiki .hero-grid > .hero-slogan-wrap{ grid-column:auto; grid-row:auto; }
    .map-box{ width:100%; height:366px; }
    .awards-layout{ align-items:start; }
    .award-photo-stack{ height:auto; }
    .award-photo{ flex:none; aspect-ratio:2/3; }
    .figure-wrap{ order:0; margin-bottom:20px; }
    .dept-grid{ grid-template-columns:1fr; }
  }