/* ==========================================================================
   MeDo — Personal Brand. Modern Editorial design system.
   Mobile-first. All colours/fonts come from CSS variables set by the CMS.
   ========================================================================== */

/* --- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;overflow-x:clip}
img,picture,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
p,h1,h2,h3,h4,h5,h6,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:where(a):focus-visible,:where(button):focus-visible,:where(input,textarea,select):focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

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

/* --- Base ---------------------------------------------------------------- */
body{
  font-family:var(--font-body);
  font-size:var(--fs-base);
  font-weight:var(--fw-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  color:var(--text);
  background:var(--background);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:var(--fw-heading);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  color:var(--heading);
  text-wrap:balance;
}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
h4{font-size:var(--h4)}
p{text-wrap:pretty}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link:focus{position:fixed;inset-block-start:12px;inset-inline-start:12px;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;z-index:200;background:var(--primary);color:var(--background);padding:12px 20px}

/* --- Layout -------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px}
.container--narrow{max-width:var(--container-narrow)}
.container--wide{max-width:var(--container-wide)}
@media (min-width:768px){.container{padding-inline:40px}}
@media (min-width:1280px){.container{padding-inline:56px}}

.sec{position:relative;padding-block:var(--sec-pad-m)}
@media (min-width:768px){.sec{padding-block:var(--sec-pad)}}
.sec--overlay::before{content:"";position:absolute;inset:0;pointer-events:none}
.sec--overlay>*{position:relative;z-index:1}

.row{display:grid;grid-template-columns:1fr;gap:34px}
@media (min-width:768px){.row{gap:44px}}
.row--start{align-items:start}
.row--center{align-items:center}
.row--end{align-items:end}
.row--stretch{align-items:stretch}
@media (max-width:767px){.row--reverse-m{display:flex;flex-direction:column-reverse}}

.col{min-width:0;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.col>*{max-width:100%;width:100%}
.blk{min-width:0}

/* --- Typography helpers -------------------------------------------------- */
.eyebrow{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1em;
  font-family:var(--font-body);
}
.h-display{font-size:var(--h1);letter-spacing:-.035em;line-height:1.02}
.h-serif{font-style:italic;font-weight:400;letter-spacing:-.01em}
.lead{font-size:clamp(1.05rem,2.1vw,1.3rem);color:var(--muted);line-height:1.75;max-width:62ch}
.blk p{max-width:70ch}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-button);font-weight:600;font-size:.94rem;line-height:1;
  padding:15px 30px;border-radius:var(--btn-radius);border:1.5px solid transparent;
  transition:background-color .25s,color .25s,border-color .25s,transform .25s;
  text-align:center;min-height:48px;
}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--btn-bg);color:var(--btn-text);border-color:var(--btn-bg)}
.btn--solid:hover{background:var(--btn-hover-bg);color:var(--btn-hover-text);border-color:var(--btn-hover-bg)}
.btn--outline{background:transparent;color:var(--primary);border-color:currentColor}
.btn--outline:hover{background:var(--primary);color:var(--background);border-color:var(--primary)}
.btn--accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--accent:hover{filter:brightness(.92)}
.btn--ghost{background:transparent;color:var(--link);padding-inline:6px;border-radius:0;min-height:auto;
  border-bottom:1.5px solid currentColor;border-radius:0}
.btn--ghost:hover{color:var(--accent)}
.btn--sm{padding:10px 20px;font-size:.85rem;min-height:40px}
.btn--lg{padding:18px 38px;font-size:1rem;min-height:56px}
.btn--wa .ico{flex:none}
.btn-group{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:479px){
  .btn--full-m{width:100%}
  .btn-group{gap:10px}
  .btn-group .btn{flex:1 1 100%}
}

.a-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--link);
  border-bottom:1.5px solid color-mix(in srgb, currentColor 35%, transparent);padding-bottom:3px;transition:.25s}
.a-link:hover{color:var(--accent);border-bottom-color:currentColor}
.a-arrow{transition:transform .25s}
.a-link:hover .a-arrow{transform:translate(-3px,-3px)}

/* --- Header -------------------------------------------------------------- */
.site-header{
  position:relative;z-index:60;background:var(--header-bg);color:var(--header-text);
  border-bottom:1px solid var(--border);
}
.site-header--sticky{position:sticky;top:0;backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-heading);font-weight:800;font-size:1.28rem;letter-spacing:-.02em}
.brand__logo{height:var(--logo-h);width:auto}
.brand__text{color:var(--header-text)}

.site-nav__list{display:flex;align-items:center;gap:30px}
.site-nav__list a{font-size:.93rem;font-weight:500;position:relative;padding-block:6px;transition:color .2s}
.site-nav__list a::after{
  content:"";position:absolute;inset-inline-start:0;bottom:0;height:1.5px;width:0;background:var(--accent);transition:width .28s}
.site-nav__list a:hover{color:var(--accent)}
.site-nav__list a:hover::after{width:100%}
.site-nav{display:flex;align-items:center;gap:26px}
.nav-toggle{display:none}

@media (max-width:1023px){
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:46px;height:46px;background:none;border:1px solid var(--border);border-radius:50%;padding:0;align-items:center}
  .nav-toggle__bar{display:block;width:19px;height:1.6px;background:currentColor;transition:transform .3s,opacity .2s}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{transform:translateY(3.8px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{transform:translateY(-3.8px) rotate(-45deg)}
  /* backdrop-filter creates a containing block, which would trap the
     position:fixed nav panel inside the header. Use a solid bar instead. */
  .site-header--sticky{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--background)}
  .site-nav{
    position:fixed;inset:0;top:var(--header-h);background:var(--background);
    flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;
    padding:26px 22px 40px;transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
    visibility:hidden;overflow-y:auto;z-index:59}
  html[dir="rtl"] .site-nav{transform:translateX(-100%)}
  /* the open state must out-specify the [dir] rule above */
  .site-nav.is-open,
  html[dir="rtl"] .site-nav.is-open{transform:translateX(0);visibility:visible}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__list li{border-bottom:1px solid var(--border)}
  .site-nav__list a{display:block;padding:18px 2px;font-size:1.12rem;font-weight:600}
  .site-nav__list a::after{display:none}
  .site-nav__cta{margin-top:26px;width:100%}
  body.nav-open{overflow:hidden}
}

/* --- Images / media ------------------------------------------------------ */
.img-fluid{width:100%;border-radius:var(--radius)}
figure{margin:0}
figcaption{margin-top:12px;font-size:.83rem;color:var(--muted);line-height:1.6}
.ph-img{
  display:flex;align-items:center;justify-content:center;min-height:170px;width:100%;
  border:1px dashed var(--border);color:var(--muted);font-size:.88rem;background:var(--surface);border-radius:var(--radius)}
.video-el{width:100%;border-radius:var(--radius);background:#000}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
@media (min-width:768px){.gallery{grid-template-columns:repeat(var(--gal-cols,3),1fr);gap:18px}}
.gallery__item img{width:100%;border-radius:var(--radius)}
@media (min-width:900px){
  .gallery--masonry{display:block;column-count:var(--gal-cols,3);column-gap:18px}
  .gallery--masonry .gallery__item{break-inside:avoid;margin-bottom:18px}
}

.yt-embed{position:relative;aspect-ratio:16/9;cursor:pointer;overflow:hidden;border-radius:var(--radius);background:#000}
.yt-embed img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s}
.yt-embed:hover img{transform:scale(1.04);opacity:.85}
.yt-embed__play{
  position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:66px;height:46px;border-radius:12px;background:rgba(0,0,0,.72)}
.yt-embed__play::after{
  content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-42%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.yt-embed:hover .yt-embed__play{background:#c00}
.yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.ig-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border);padding:14px;border-radius:var(--radius);transition:.25s}
.ig-card:hover{border-color:var(--accent);color:var(--accent)}
.ig-card img{width:100%;border-radius:calc(var(--radius) * .7)}

/* --- Editorial elements -------------------------------------------------- */
.divider{border:0;border-top:1px solid var(--border);width:100%;margin:0}
.divider--dashed{border-top-style:dashed}
.divider--dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-inline:auto}
.spacer{width:100%}

.quote{border-inline-start:2px solid var(--accent);padding-inline-start:26px;margin:0}
.quote p{font-family:var(--font-heading);font-size:clamp(1.25rem,2.7vw,1.85rem);line-height:1.5;font-weight:500;letter-spacing:-.015em}
.quote cite{display:block;margin-top:14px;font-size:.85rem;font-style:normal;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

.stat{display:flex;flex-direction:column;gap:6px}
.stat__num{font-family:var(--font-heading);font-size:clamp(3rem,8vw,5.5rem);font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--accent)}
.stat__label{font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.stat__desc{color:var(--muted);font-size:.93rem}

.ed-list{border-top:1px solid var(--border);width:100%}
.ed-list__item{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding-block:26px;border-bottom:1px solid var(--border);transition:padding-inline-start .35s,background-color .35s}
@media (min-width:768px){
  .ed-list__item{grid-template-columns:110px 1fr;gap:30px;padding-block:34px}
  .ed-list__item:hover{padding-inline-start:16px}
}
.ed-list__num{
  font-family:var(--font-heading);font-size:clamp(1.5rem,4vw,2.6rem);font-weight:800;
  line-height:1;letter-spacing:-.04em;color:var(--border);transition:color .35s}
.ed-list__item:hover .ed-list__num{color:var(--accent)}
.ed-list__body{display:flex;flex-direction:column;gap:8px}
.ed-list__title{font-family:var(--font-heading);font-size:clamp(1.15rem,2.6vw,1.7rem);font-weight:700;letter-spacing:-.02em;color:var(--heading)}
.ed-list__desc{color:var(--muted);font-size:.95rem;line-height:1.7;max-width:60ch}

.c-list{display:flex;flex-direction:column;gap:12px}
.c-list li{position:relative;padding-inline-start:22px;color:var(--text)}
.c-list li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:7px;height:1.5px;background:var(--accent)}
ol.c-list{counter-reset:cl}
ol.c-list li{counter-increment:cl}
ol.c-list li::before{content:counter(cl,decimal-leading-zero);width:auto;height:auto;background:none;top:0;
  font-weight:700;font-size:.8rem;color:var(--accent);font-family:var(--font-heading)}

.portrait{position:relative;width:100%}
.portrait__img{width:100%;border-radius:var(--radius);filter:saturate(.95)}
.portrait__cap{display:flex;flex-direction:column;gap:3px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.portrait__name{font-family:var(--font-heading);font-weight:700;font-size:1.05rem}
.portrait__role{font-size:.88rem;color:var(--accent);font-weight:600}
.portrait__meta{font-size:.82rem;color:var(--muted)}

.icon-blk{color:var(--accent);display:inline-flex}

/* --- Social -------------------------------------------------------------- */
.social{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.social a{display:inline-flex;align-items:center;gap:8px;transition:.25s;font-size:.9rem;font-weight:500}
.social--pill a{border:1px solid var(--border);padding:9px 17px;border-radius:999px}
.social--pill a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.social--text a{border-bottom:1px solid var(--border);padding-bottom:3px}
.social--text a:hover{color:var(--accent);border-color:currentColor}
.social--icon a{width:44px;height:44px;justify-content:center;border:1px solid var(--border);border-radius:50%}
.social--icon a:hover{background:var(--primary);color:var(--background);border-color:var(--primary)}

/* --- Portfolio ----------------------------------------------------------- */
.pf-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.pf-filter{
  background:none;border:1px solid var(--border);border-radius:999px;padding:9px 18px;
  font-size:.84rem;font-weight:600;color:var(--muted);transition:.22s}
.pf-filter:hover{color:var(--text);border-color:var(--text)}
.pf-filter.is-active{background:var(--primary);color:var(--background);border-color:var(--primary)}

.pf-grid{display:grid;grid-template-columns:1fr;gap:26px}
@media (min-width:600px){.pf-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.pf-grid{grid-template-columns:repeat(var(--pf-cols,3),1fr);gap:32px}}
@media (min-width:1000px){
  .pf-grid--masonry{display:block;column-count:var(--pf-cols,3);column-gap:32px}
  .pf-grid--masonry .pf-item{break-inside:avoid;margin-bottom:32px;display:block}
}
.pf-card{display:flex;flex-direction:column;gap:14px;height:100%}
.pf-card__media{overflow:hidden;border-radius:var(--radius);background:var(--surface)}
.pf-card__img{width:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pf-card:hover .pf-card__img{transform:scale(1.045)}
.pf-card__body{display:flex;flex-direction:column;gap:7px}
.pf-card__cat{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.pf-card__title{font-size:1.15rem;font-weight:700;letter-spacing:-.015em;transition:color .25s}
.pf-card:hover .pf-card__title{color:var(--accent)}
.pf-card__excerpt{font-size:.92rem;color:var(--muted);line-height:1.65}

.pf-list{border-top:1px solid var(--border);width:100%}
.pf-list__item{border-bottom:1px solid var(--border)}
.pf-list__item>*{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding-block:22px;transition:.3s}
@media (min-width:768px){.pf-list__item>*{grid-template-columns:70px 1fr auto;gap:26px;padding-block:28px}}
.pf-list__item a:hover{padding-inline-start:14px;color:var(--accent)}
.pf-list__num{font-family:var(--font-heading);font-weight:800;color:var(--border);font-size:1.1rem}
.pf-list__title{font-family:var(--font-heading);font-size:clamp(1.05rem,2.4vw,1.5rem);font-weight:700;letter-spacing:-.02em}
.pf-list__cat{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);grid-column:2}
@media (min-width:768px){.pf-list__cat{grid-column:auto}}

/* --- Forms --------------------------------------------------------------- */
.cform{width:100%;max-width:720px}
.cform__title{margin-bottom:22px;font-size:var(--h3)}
.cform__grid{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:24px}
@media (min-width:600px){.cform__grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field>span{font-size:.85rem;font-weight:600;color:var(--muted)}
.field input,.field textarea{
  width:100%;padding:14px 16px;background:transparent;color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius);transition:border-color .2s,background-color .2s;
  font-size:1rem;min-height:50px}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:none;background:var(--surface)}
.field textarea{resize:vertical;min-height:130px;line-height:1.7}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.alert{padding:14px 18px;border-radius:var(--radius);margin-bottom:20px;font-size:.93rem;border:1px solid}
.alert--ok{background:color-mix(in srgb, var(--secondary) 10%, transparent);border-color:var(--secondary);color:var(--secondary)}
.alert--err{background:color-mix(in srgb, #c0392b 8%, transparent);border-color:#c0392b;color:#a5342a}
.alert ul{display:flex;flex-direction:column;gap:5px}

/* --- Footer -------------------------------------------------------------- */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding-block:64px 30px;margin-top:0}
.site-footer__top{display:grid;grid-template-columns:1fr;gap:38px;padding-bottom:44px}
@media (min-width:640px){.site-footer__top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.site-footer__top{grid-template-columns:1.6fr repeat(3,1fr);gap:44px}}
.site-footer__name{font-family:var(--font-heading);font-size:1.2rem;font-weight:700;margin-top:6px}
.site-footer__name-en{font-size:.9rem;opacity:.62;margin-top:2px}
.site-footer__tag{font-size:.92rem;opacity:.75;margin-top:12px;max-width:34ch;line-height:1.7}
.site-footer__heading{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:16px;color:inherit;font-weight:700}
.site-footer__links{display:flex;flex-direction:column;gap:11px}
.site-footer__links a{display:inline-flex;align-items:center;gap:9px;font-size:.93rem;opacity:.82;transition:.22s}
.site-footer__links a:hover{opacity:1;color:var(--accent);transform:translateX(-3px)}
html[dir="rtl"] .site-footer__links a:hover{transform:translateX(3px)}
.site-footer__text{font-size:.92rem;opacity:.78;line-height:1.75}
.site-footer__social{display:flex;flex-wrap:wrap;gap:10px;padding-block:26px;border-top:1px solid rgba(255,255,255,.12)}
.site-footer__social a{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;transition:.25s;opacity:.8}
.site-footer__social a:hover{background:var(--accent);border-color:var(--accent);color:#fff;opacity:1;transform:translateY(-3px)}
.site-footer__bottom{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:.85rem;opacity:.65}
.site-footer__mini{display:flex;flex-wrap:wrap;gap:18px}
.site-footer__mini a:hover{color:var(--accent)}

/* --- Scroll reveal ------------------------------------------------------- */
.reveal{opacity:0;will-change:opacity,transform}
.reveal.is-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal--fade-up{transform:translateY(26px)}
.reveal--fade-in{transform:none}
.reveal--fade-right{transform:translateX(30px)}
.reveal--fade-left{transform:translateX(-30px)}
.reveal--zoom{transform:scale(.965)}
.no-anim .reveal,.no-js .reveal{opacity:1 !important;transform:none !important}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1 !important;transform:none !important}}

/* --- Utilities ----------------------------------------------------------- */
.blk-unknown{padding:14px;border:1px dashed var(--accent);color:var(--accent);font-size:.85rem}
.notice-404{text-align:center;padding-block:110px}
.notice-404 h1{font-size:clamp(4rem,18vw,10rem);line-height:.9;color:var(--border)}
.notice-404 p{margin:20px 0 30px;color:var(--muted)}

/* Print */
@media print{
  .site-header,.site-footer,.nav-toggle,.btn{display:none !important}
  body{background:#fff;color:#000}
}