/* Yartambellos — styled to match yorgos.studio
   Type: Public Sans 500 throughout; Kalice Medium for titles (self-host if licensed, Young Serif fallback). */
@font-face{font-family:"Kalice";src:url("../fonts/Kalice-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
:root{
  --bg:#ffffff; --ink:#000000; --muted:#809198; --rule:#e5e5e5; --soft:#f4f4f4;
  --gutter:20px; --head:68px;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Kalice","Young Serif",Georgia,"Times New Roman",serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:500;font-size:18px;line-height:1.3;letter-spacing:-.4px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
.muted{color:var(--muted)}
.small{font-size:16px;letter-spacing:-.3px}
.label{font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);line-height:1}
.link-u{border-bottom:1px solid currentColor}
.arrow::after{content:"\2197";display:inline-block;margin-left:.3em;font-size:.85em}

/* Header — white text + difference blend reads black on white, inverts over images (as on yorgos.studio) */
.site-head{position:fixed;inset:0 0 auto;z-index:50;color:#fff;mix-blend-mode:difference;padding:0 var(--gutter);height:var(--head);display:grid;grid-template-columns:26fr 50fr 50fr;align-items:center}
.site-head nav{display:flex;gap:20px}
.site-head .nav-r{justify-content:flex-end}
.site-head a{transition:opacity .2s}
.site-head a:hover,.site-head a[aria-current]{opacity:.55}
.menu-btn{display:none;justify-self:end;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;padding:8px 0;cursor:pointer}
.menu{position:fixed;inset:0;z-index:60;background:var(--bg);padding:var(--gutter);display:none;flex-direction:column}
.menu.open{display:flex}
.menu .menu-top{display:flex;justify-content:space-between;align-items:center;height:calc(var(--head) - 2*var(--gutter))}
.menu .menu-top button{background:none;border:0;font:inherit;letter-spacing:inherit;cursor:pointer;padding:8px 0}
.menu ul{list-style:none;margin:22vh 0 0;padding:0}
.menu li a{display:block;font-size:18px;line-height:1.3;letter-spacing:-.4px;padding:6px 0}

main{padding:calc(var(--head) + 40px) var(--gutter) 0}

/* Home intro: "Yartambellos, Information +" */
.intro{margin-bottom:12px}
.intro-row{display:flex;align-items:baseline;gap:6px}
.toggle{background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer;display:inline-flex;align-items:baseline;gap:10px}
.toggle .plus{display:inline-block;color:var(--ink);font-weight:300;font-size:22px;line-height:0;transition:transform .3s}
.toggle[aria-expanded="true"] .plus{transform:rotate(45deg)}
.intro-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s ease}
.intro-body.open{grid-template-rows:1fr}
.intro-body>div{overflow:hidden}
.intro-body p{max-width:46em;padding-top:14px;margin:0}

/* Staggered image grid */
.works{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:80px;padding-bottom:120px}
.work a{display:block}
.work figcaption{margin-top:8px;font-size:16px;letter-spacing:-.3px;display:flex;gap:6px;flex-wrap:wrap}
.work figcaption span{color:var(--muted)}
.work img{width:100%;object-fit:cover;background:var(--soft);transition:opacity .25s}
.work a:hover img{opacity:.85}
figure{margin:0}
.w-a{grid-area:1/1/2/4}
.w-b{grid-area:1/6/2/8;margin-top:110px}
.w-c{grid-area:1/10/2/13}
.w-d{grid-area:2/8/3/11;margin-top:60px}
.w-e{grid-area:2/2/3/5}
.w-f{grid-area:3/5/4/8}
.w-g{grid-area:3/10/4/12;margin-top:180px}
.w-h{grid-area:4/1/5/3;margin-top:40px}
.w-i{grid-area:4/5/5/9}
.w-j{grid-area:4/11/5/13;margin-top:240px}
.works .work{align-self:start}
.r-portrait img{aspect-ratio:3/4}.r-tall img{aspect-ratio:2/3}.r-land img{aspect-ratio:4/3}.r-sq img{aspect-ratio:1}

/* Split detail layout (as on yorgos.studio work pages) */
.split{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);padding-bottom:120px}
.split .media{grid-column:1/7}
.split .media img{width:100%;margin-bottom:var(--gutter)}
.split .text{grid-column:7/12;padding-left:20px}
.split .sticky{position:sticky;top:calc(var(--head) + 20px)}
.split.flip .media{grid-column:7/13;order:2}
.split.flip .text{grid-column:1/6;padding-left:0;order:1}
h1,h2,.title{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.2;letter-spacing:-.5px;margin:0 0 22px}
.prose{font-size:16px;letter-spacing:-.3px;line-height:1.35;max-width:36em}
.prose p{text-align:justify;hyphens:auto}
.prose strong{font-weight:600}
.caption{font-size:14px;color:var(--muted);margin:-12px 0 var(--gutter)}

/* Spec table */
.specs{margin:36px 0;border-top:1px solid var(--rule);font-size:16px;letter-spacing:-.3px}
.specs .row{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--rule)}
.specs dt{color:var(--muted)}
.specs dd{margin:0}

.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border:1px solid var(--ink);padding:13px 20px;font:inherit;font-size:16px;letter-spacing:-.3px;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:#fff;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* Section heads + list rows (experts, news, resellers) */
.section{padding-bottom:120px}
.section-head{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);margin-bottom:28px}
.section-head h2{grid-column:1/7;margin:0}
.section-head p{grid-column:7/12;font-size:16px;letter-spacing:-.3px;color:var(--muted);margin:0;padding-left:20px}
.rows{border-top:1px solid var(--rule)}
.rows .row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);padding:20px 0;border-bottom:1px solid var(--rule)}
.rows .who{grid-column:1/5;font-size:16px;letter-spacing:-.3px}
.rows .who span{display:block;color:var(--muted)}
.rows .what{grid-column:7/12;padding-left:20px}
.quote{font-size:18px;line-height:1.35;margin:0}
a.row{transition:background .2s}
a.row:hover .what .t{border-bottom:1px solid currentColor}

.filters{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px;font-size:16px;letter-spacing:-.3px}
.filters button{background:none;border:0;padding:4px 0;font:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer}
.filters button[aria-pressed="true"]{color:var(--ink);border-bottom:1px solid var(--ink)}
.empty{padding:28px 0;border-bottom:1px solid var(--rule);font-size:16px;color:var(--muted)}
.empty a{color:var(--ink)}

/* Steps (shop) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter);border-top:1px solid var(--rule)}
.steps li{padding-top:16px;font-size:16px;letter-spacing:-.3px}
.steps b{display:block;font-weight:500;margin-bottom:6px}
.steps .n{color:var(--muted);display:block;margin-bottom:24px}

/* Forms */
.form{display:grid;gap:18px;max-width:560px}
.form label{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.form input,.form textarea,.form select{font:inherit;font-size:16px;letter-spacing:-.3px;color:var(--ink);border:0;border-bottom:1px solid var(--rule);background:transparent;padding:8px 0;border-radius:0}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-bottom-color:var(--ink)}
.form textarea{min-height:120px;resize:vertical}

/* Footer */
.site-foot{border-top:1px solid var(--rule);padding:44px var(--gutter) 24px;margin-top:40px}
.foot-cols{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:36px}
.foot-col{font-size:16px;letter-spacing:-.3px}
.foot-col .label{display:block;margin-bottom:22px}
.foot-col a,.foot-col span{display:block;margin-bottom:5px}
.foot-col a:hover{opacity:.55}
.fc0{grid-column:1/5}.fc1{grid-column:7/9}.fc2{grid-column:9/11}.fc3{grid-column:11/13}
.nl-txt{margin:0 0 14px;color:var(--muted)}
.nl{display:flex;border-bottom:1px solid var(--ink);max-width:360px}
.nl input{flex:1;min-width:0;border:0;background:transparent;font:inherit;letter-spacing:inherit;color:var(--ink);padding:8px 0}
.nl input:focus{outline:none}
.nl button{background:none;border:0;font:inherit;letter-spacing:inherit;color:var(--ink);cursor:pointer;padding:8px 0 8px 16px}
.nl button:hover{opacity:.55}
.nl[hidden]{display:none}
.foot-bottom .copy a{color:var(--ink)}
.foot-bottom .copy a:hover{opacity:.55}
.foot-bottom{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);margin-top:80px;font-size:16px;letter-spacing:-.3px}
.foot-bottom .top{grid-column:1/6}
.foot-bottom .copy{grid-column:7/13;color:var(--muted)}

/* Reveal: one quiet fade for images, like the source site */
.reveal{opacity:0;transition:opacity .9s ease}
.reveal.in{opacity:1}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transition:none}html{scroll-behavior:auto}.intro-body{transition:none}}

/* Tablet / mobile */
@media (max-width:900px){
  .site-head{grid-template-columns:1fr auto}
  .site-head nav{display:none}
  .menu-btn{display:block}
  main{padding-top:calc(var(--head) + 16px)}
  .works{row-gap:48px}
  .works .work{grid-area:auto/auto/auto/span 6 !important;margin-top:0 !important}
  .works .work:nth-child(even){margin-top:60px !important}
  .split,.split.flip{display:block}
  .split .text,.split.flip .text{padding:24px 0 0}
  .split .sticky{position:static}
  .section-head h2,.section-head p{grid-column:1/-1;padding:0}
  .section-head p{margin-top:10px}
  .rows .who,.rows .what{grid-column:1/-1;padding:0}
  .rows .what{margin-top:10px}
  .steps{grid-template-columns:1fr 1fr}
  .fc0{grid-column:1/-1}
  .fc1,.fc2,.fc3{grid-column:auto/span 6}
  .foot-bottom .top,.foot-bottom .copy{grid-column:1/-1}
  .foot-bottom .copy{margin-top:10px}
}
@media (max-width:520px){
  :root{--gutter:16px}
  .works .work{grid-area:auto/1/auto/-1 !important}
  .works .work:nth-child(even){margin-top:0 !important}
  .works .work:nth-child(even){width:72%;margin-left:auto}
  .specs .row{grid-template-columns:110px 1fr}
  .steps{grid-template-columns:1fr}
  .fc0,.fc1,.fc2,.fc3{grid-column:1/-1}
}

/* News articles */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);align-items:start;padding-bottom:100px}
.gallery img{width:100%}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);border-top:1px solid var(--rule);padding:20px 0 40px;font-size:16px;letter-spacing:-.3px}
.pager .label{display:block;margin-bottom:10px}
.pager .older{text-align:right}
.pager a:hover{opacity:.55}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.gallery{grid-template-columns:1fr}}

/* Order form */
.form select{appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%23809198'/%3E%3C/svg%3E") no-repeat right 2px center;padding-right:20px;cursor:pointer}
.form optgroup{font-style:normal;color:var(--muted)}
.form optgroup option{color:var(--ink)}
.pay{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.pay legend{font-size:14px;color:var(--muted);padding:0;margin-bottom:10px;width:100%}
.pay label{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--ink);cursor:pointer}
.pay label[hidden]{display:none}
.pay input{accent-color:var(--ink);width:16px;height:16px;margin:0}
.total{font-size:18px;border-top:1px solid var(--rule);padding-top:16px;display:flex;justify-content:space-between;margin:0}
#order-error{color:#a3341f}
#order-done h2{margin-top:0}
.form label[hidden]{display:none}