/* =========================================================================
   Laura Kuramyssova — new design, WordPress version
   One stylesheet for all pages (landing, projects list, single project).

   TO CHANGE FONTS LATER:
   1. Swap the Google Fonts <link> in header.php
   2. Edit --font-sans and --font-mono just below
   Nothing else needs to change.
   ========================================================================= */

/* Self-hosted PP Mori (Pangram Pangram — free for personal use). Files live in
   /fonts/PPMori/otf/. Weight ranges map to real cuts so nothing is faux-bold:
   <=400 uses Regular, 500-700 uses Semibold, 800-900 uses Black (headings). */
@font-face{
  font-family:"PP Mori";
  src:url("../fonts/PPMori/otf/PPMori-Regular.otf") format("opentype");
  font-weight:100 400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"PP Mori";
  src:url("../fonts/PPMori/otf/PPMori-Italic.otf") format("opentype");
  font-weight:100 400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"PP Mori";
  src:url("../fonts/PPMori/otf/PPMori-Semibold.otf") format("opentype");
  font-weight:500 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"PP Mori";
  src:url("../fonts/PPMori/otf/PPMori-SemiboldItalic.otf") format("opentype");
  font-weight:500 700;font-style:italic;font-display:swap;
}
@font-face{
  font-family:"PP Mori";
  src:url("../fonts/PPMori/otf/PPMori-Black.otf") format("opentype");
  font-weight:800 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"PP Mori";
  src:url("../fonts/PPMori/otf/PPMori-BlackItalic.otf") format("opentype");
  font-weight:800 900;font-style:italic;font-display:swap;
}

:root{
  --font-sans:"PP Mori",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;     /* body / reading text */
  --font-display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* headings / titles */
  --font-mono:"PP Mori",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;     /* was IBM Plex Mono; now PP Mori — body family */

  --paper:#F2F0EA;
  --ink:#1A1813;
  --accent:#1F4E5F;
  --muted:#73706A;
  --line:#D6D2C8;

  --pad:clamp(18px,3vw,40px);
  --g:clamp(28px,5vw,72px);
  --m:clamp(62px,7.5vh,86px);
  --hh:64px; /* sticky header height; refined at runtime by project.php */
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  background:var(--paper);
  color-scheme:light; /* this is a light-paper design; stops dark-mode browsers
                          from showing a dark sliver in any unpainted edge */
}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;line-height:1.3;
  min-height:100%;
}
.mono{font-family:var(--font-mono)}
/* Headings/titles use --font-display (Bricolage Grotesque); everything else
   inherits PP Mori from body via --font-sans. Each heading keeps its own
   per-element font-weight (set in the rules below). */
.mark,
.view h1,
#view-hello .email,
.acc-head,
.head h1,
.item .name,
.col-text h1,
.proj-nav .next a,
.lets-talk{font-family:var(--font-display)}
a{color:inherit;text-decoration:none}
button{color:inherit;font:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
img{max-width:100%}

/* shared inverting cursor */
@media (pointer:fine){body.nocur,body.nocur *{cursor:none}}
.cursor{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:60;display:none;
  transition:width .22s ease,height .22s ease,margin .22s ease}
.cursor.over{width:38px;height:38px;margin:-19px 0 0 -19px}

/* =========================================================================
   LANDING  (front page only — body.is-landing)
   ========================================================================= */
body.is-landing,html.is-landing{height:100%;overflow:hidden}

.hero{height:100svh;display:grid;
  grid-template-columns:calc(40vw + 0.2 * var(--pad) + 0.6 * var(--g)) 1fr;
  grid-template-rows:minmax(0,1fr);padding:0}
/* The left column scrolls on its own; the slider column on the right stays put. */
.left{display:flex;flex-direction:column;padding:16px var(--pad) clamp(20px,3vh,30px);overflow-y:auto;min-height:0}
/* The bio is top-anchored (not vertically centred) so it stays exactly in place
   when the "More about me" panel opens — the panel grows downward instead of
   pushing the whole block up. See .mid below. */
.topbar{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.mark{font-weight:600;font-size:14px;letter-spacing:.01em}
.nav{display:flex;gap:20px;font-size:14px}
.nav a,.nav button{color:var(--muted);transition:color .2s ease;padding-bottom:2px;border-bottom:1px solid transparent}
.nav .active{color:var(--ink);border-bottom-color:var(--ink)}

/* mid grows to fill the column so the footer sits at the bottom when the bio is
   short; when "More about me" is open and the content is taller than the column,
   mid keeps its natural height and the footer flows after it (the column scrolls)
   instead of the footer pinning to the bottom and overlapping the panel. */
.mid{flex:1 0 auto;margin:clamp(20px,4vh,48px) 0 0;min-height:0}
.view{display:none}
.view.active{display:block;animation:fade .4s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view h1{font-weight:500;letter-spacing:-.02em;font-size:clamp(32px,4.2vw,68px);line-height:1.0;max-width:13ch}
.view h1 b{font-weight:700}
.view .sub{margin-top:clamp(16px,2.1vw,26px);max-width:44ch;font-size:clamp(15px,1.05vw,17px);line-height:1.5;font-weight:400;color:#403D36}
/* the About/Hello text comes from WordPress pages; keep paragraphs tidy */
.view .sub p{margin-top:.8em}
.view .sub p:first-child{margin-top:0}
#view-hello .email{display:inline-block;margin-top:20px;font-weight:600;font-size:clamp(19px,1.9vw,28px);letter-spacing:-.01em}
#view-hello .socials{margin-top:24px;display:flex;gap:24px;font-size:13px;color:var(--muted)}

.foot{flex:none;padding-top:16px;
  display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--muted)}

/* "more" button + collapsible "More about me" panel (landing, about view) */
.about-more-btn{margin-top:clamp(16px,2vw,24px);display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.about-more-btn:hover{color:var(--ink)}
.about-more[hidden]{display:none}
.about-more{margin-top:clamp(20px,3vh,30px)}
.about-more-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:10px;border-bottom:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;padding:15px 0;font-weight:600;letter-spacing:-.01em;font-size:clamp(16px,1.4vw,20px);color:var(--ink)}
.acc-head:hover{color:var(--ink)}
.acc-ico{position:relative;width:16px;height:16px;flex:none}
.acc-ico::before,.acc-ico::after{content:"";position:absolute;background:var(--muted)}
.acc-ico::before{left:0;top:7px;width:16px;height:2px}
.acc-ico::after{left:7px;top:0;width:2px;height:16px;transition:opacity .2s ease}
.acc-head[aria-expanded="true"] .acc-ico::after{opacity:0}
.acc-body[hidden]{display:none}
.acc-body{padding:2px 0 18px;max-width:48ch;font-size:clamp(14px,1vw,16px);line-height:1.6;color:#403D36}
.acc-body p{margin-top:.7em}
.acc-body p:first-child{margin-top:0}

.right{position:relative;overflow:hidden;background:#E7E3DA}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.slide.on{opacity:1}
.slide-fallback{position:absolute;inset:0;display:flex;align-items:flex-end;padding:34px;background:linear-gradient(135deg,#DFDACF,#C8C2B4);color:#5A564C}
.slide-fallback span{font-size:13px;letter-spacing:.04em}
.count{position:absolute;right:18px;bottom:16px;z-index:2;font-size:12px;color:#fff;mix-blend-mode:difference;letter-spacing:.05em}

/* Phones AND tablets (incl. iPad landscape up to 1366px): stack the landing
   like the mobile layout — text, then slider, then the "more about me" panel. */
@media (max-width:1366px){
  body.is-landing,html.is-landing{overflow:auto}
  .hero{grid-template-columns:1fr;grid-template-rows:none;height:auto;gap:0}
  .left{border-right:none;min-height:62svh;overflow:visible}
  .right{height:46svh;border-top:1px solid var(--line)}
  .foot{padding-left:var(--pad);padding-right:var(--pad);padding-bottom:clamp(20px,3vh,30px)}
  /* the "more about me" panel sits below the slider: full width with the page
     padding and a top rule (JS moves it there on these widths) */
  .about-more{margin-top:0;border-top:1px solid var(--line);padding:clamp(20px,3vh,28px) var(--pad) clamp(10px,2vh,18px)}
}
@media (max-width:480px){
  .left{padding:13px var(--pad) 22px;min-height:56svh}
  .mark{font-size:13px}
  .nav{gap:14px;font-size:13px}
  .right{height:40svh}
  .view h1{font-size:clamp(30px,8.5vw,46px)}
  .view .sub{font-size:15px}
}

/* Tablet held VERTICALLY (e.g. iPad portrait): behave like the phone layout —
   the text column gets the lion's share of the height (more room for the bio and
   the hello panel) and the slider sits smaller below it. The text column has a
   fixed height so the About and Hello views are exactly the same height and the
   slider doesn't jump when you switch between them. The bio also stretches across
   the wide column instead of stopping at 44ch. */
@media (min-width:601px) and (max-width:1366px) and (orientation:portrait){
  .view .sub{max-width:none}
  .acc-body{max-width:none}

  /* Fixed text + slider heights (~40 / ~60) so the top of the page never moves:
     About and Hello are the same height, and the footer sits just below the
     slider on first screen. Because these heights don't depend on the open state,
     clicking "More about me" leaves the text and slider exactly where they are and
     the panel (with the footer after it) simply opens below the slider — you
     scroll down to read it. */
  .left{min-height:34svh}
  .right{height:60svh}
}

/* =========================================================================
   SHARED HEADER (projects list + single project)
   ========================================================================= */
html.scrolls{scroll-behavior:smooth}
.wrap{padding:0 var(--pad)}
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;justify-content:space-between;align-items:baseline;padding:16px var(--pad);gap:20px}
.bar .nav a{color:var(--muted);transition:color .2s ease}

/* =========================================================================
   PROJECTS LIST
   ========================================================================= */
.bg{position:absolute;left:calc(40vw + 0.2 * var(--pad) + 0.6 * var(--g));right:var(--pad);
  top:var(--m);z-index:30;background-size:cover;background-position:center;opacity:0;pointer-events:none;
  transition:opacity .35s ease;will-change:opacity}
.bg.on{opacity:1}
.bg.ph{background:linear-gradient(135deg,#DFDACF,#C8C2B4)}

.list-main{position:relative;z-index:2}
.head{padding:clamp(40px,8vh,90px) 0 clamp(18px,3vh,28px)}
.head h1{font-weight:600;letter-spacing:-.02em;font-size:clamp(44px,8vw,108px);line-height:1}
.head .lead{margin-top:18px;max-width:none;font-size:clamp(15px,1.2vw,19px);color:#403D36;line-height:1.5}

.list{padding:clamp(20px,4vh,40px) 0 clamp(40px,8vh,90px);max-width:calc(40vw - 1.8 * var(--pad) + 0.6 * var(--g))}
.item{display:grid;grid-template-columns:1fr auto;align-items:start;gap:clamp(12px,2vw,22px);
  padding:clamp(12px,1.7vw,20px) 0;border-bottom:1px solid var(--line);transition:opacity .25s ease}
.item:first-child{border-top:1px solid var(--line)}
.item .name{display:block;font-weight:500;letter-spacing:-.02em;font-size:clamp(22px,2.8vw,42px);line-height:1.08;color:var(--ink)}
.item .genre{justify-self:end;align-self:start;margin-top:7px;margin-right:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.list.dim .item:not(:hover){opacity:.34}
.item:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.item .thumb{display:none}

@media (max-width:1366px){
  .bg{display:none}
  .list{max-width:none;padding:clamp(16px,3vh,30px) 0 clamp(30px,6vh,60px)}
  .item{display:block;padding:clamp(16px,2.4vw,24px) 0}
  .item .name{font-size:clamp(24px,5.4vw,40px);line-height:1.1}
  .item .genre{display:block;justify-self:auto;align-self:auto;margin:5px 0 0;font-size:12px;white-space:normal}
  .item .thumb{display:block;margin-top:14px;width:100%;aspect-ratio:3/2;background:#E7E2D7 center/cover no-repeat}
  .item .thumb.ph{background:linear-gradient(135deg,#DFDACF,#C8C2B4)}
}
/* Laptop band: the side image stays, but the left column gets too narrow
   for "title + flush-right tags" on one line. Drop to a single column and
   let the tags wrap as a small caption tight under the title, instead of
   overflowing under the image. */
@media (min-width:1367px) and (max-width:1550px){
  .item{grid-template-columns:1fr;gap:0}
  .item .genre{justify-self:stretch;white-space:normal;margin:5px 0 0}
}
@media (min-width:1367px){
  .head .lead{max-width:calc(40vw - 1.8 * var(--pad) + 0.6 * var(--g))}
}
@media (max-width:480px){
  .head{padding:clamp(28px,6vh,50px) 0 16px}
  .head h1{font-size:clamp(40px,12vw,60px)}
  .head .lead{max-width:none}
}

/* =========================================================================
   SINGLE PROJECT
   ========================================================================= */
/* Text left, images right. Each column is its own scroll pane of one screen
   height, so the two sides scroll independently. When a pane reaches its end,
   the scroll chains to the page to reveal the full-width footer below. */
.split{display:grid;grid-template-columns:2fr 3fr;gap:clamp(28px,5vw,72px);padding:0 var(--pad);
  height:calc(100svh - var(--hh,64px))}
.col-text{align-self:start;height:100%;overflow-y:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;padding:clamp(28px,5vh,52px) 0}
/* hide the pane scrollbars (Safari/Chrome); scrolling still works */
.col-text::-webkit-scrollbar,.col-img::-webkit-scrollbar{width:0;height:0;display:none}
.back{display:inline-block;font-size:13px;color:var(--muted);white-space:nowrap}
.col-text h1{margin-top:clamp(20px,4vh,38px);font-weight:600;letter-spacing:-.03em;font-size:clamp(40px,4.6vw,92px);line-height:.96}
.col-text .tags{margin-top:16px;font-size:13px;letter-spacing:.05em;color:var(--muted)}

/* "Format / Role"-style spec lines, e.g. short_description with multiple <p> */
.col-text .meta{margin-top:16px;font-size:13px;letter-spacing:.03em;line-height:1.7;color:var(--muted)}
.col-text .meta p{margin:0}
.col-text .meta p + p{margin-top:8px}
.desc-wrap{margin-top:clamp(26px,4vh,40px);flex:1;display:flex;flex-direction:column;min-height:0}
.desc{font-size:clamp(17px,1.5vw,22px);line-height:1.5;color:#2E2B25;flex:1;display:flex;flex-direction:column;min-height:0}
.desc p{margin-top:.8em}
.desc p:first-child{margin-top:0}
.desc em{font-style:italic}

/* "read more" toggle, inside the description block */
.more[hidden]{display:none}
.more{margin-top:1em}
.more p{font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:var(--muted)}
.more-btn{margin-top:18px;font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:var(--muted);cursor:pointer;background:none;border:none;padding:0;align-self:flex-start}
.more-btn:hover{color:var(--ink)}

/* Format / Role specs block, pinned to the bottom of the text column */
.specs{margin-top:auto;padding-top:clamp(30px,5vh,50px);font-size:13px;line-height:2.0;color:var(--muted);max-width:40ch}
.specs b{display:block;font-family:var(--font-sans);font-weight:600;color:var(--ink);margin-bottom:4px;font-size:13px}
.specs .grp2{margin-top:22px}
.specs .v{white-space:nowrap}

.col-img{height:100%;overflow-y:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);padding:clamp(28px,5vh,52px) 0}
.col-img img{display:block;width:100%;height:auto}
.col-img figure{margin:0}
/* the flex gap only spaces separate blocks; this spaces images that sit inside
   the same paragraph/figure (several images pasted together) */
.col-img img + img{margin-top:clamp(10px,1.4vw,18px)}
.col-img p{margin:0}
.col-img p + p,.col-img figure + figure{margin-top:clamp(10px,1.4vw,18px)}
.ph{width:100%;aspect-ratio:3/2;display:flex;align-items:flex-end;padding:16px;background:linear-gradient(135deg,#DFDACF,#C8C2B4);color:#5A564C;font-size:13px}

.proj-nav{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:clamp(36px,6vh,70px) 0 0;border-top:1px solid var(--line);margin-top:clamp(30px,5vh,50px)}
.proj-nav .all{font-size:13px;color:var(--muted)}
.proj-nav .next{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.proj-nav .next .lbl{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.proj-nav .next a{font-weight:600;letter-spacing:-.015em;font-size:clamp(24px,3.6vw,52px)}

/* Landscape tablet band: keep the side-by-side independent scroll panes, but
   even out the columns a little so the text side isn't cramped. */
@media (min-width:601px) and (max-width:1100px) and (orientation:landscape){
  .split{grid-template-columns:1fr 1.25fr;gap:clamp(20px,3.5vw,40px)}
}

/* Phones, and tablets in portrait: the side-by-side panes are too narrow, so
   stack into one normal-flowing column (text first, gallery below) that scrolls
   with the page — same as the mobile layout. */
@media (max-width:600px), (max-width:1024px) and (orientation:portrait){
  .split{grid-template-columns:1fr;gap:0;height:auto}
  .col-text{height:auto;overflow:visible;padding-bottom:8px}
  .col-img{height:auto;overflow:visible;padding-top:18px}
  .specs{display:flex;flex-wrap:wrap;gap:clamp(36px,7vw,90px)}
  .specs .grp2{margin-top:0}
}
@media (max-width:480px){
  .col-text h1{font-size:clamp(36px,11vw,56px)}
  /* keep "all projects" left and "next project" on the right, even on phones */
  .proj-nav{gap:14px}
  .proj-nav .next{min-width:0}
}

/* =========================================================================
   SHARED FOOTER (projects list + single project)
   ========================================================================= */
.site-footer{position:relative;z-index:50;border-top:1px solid var(--ink);margin-top:clamp(50px,9vh,100px);background:var(--paper)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:clamp(30px,6vw,80px);padding:clamp(40px,7vh,72px) 0 clamp(34px,5vh,52px)}
.lets-talk{font-weight:600;letter-spacing:-.02em;line-height:1;font-size:clamp(34px,6.5vw,86px)}
.foot-cols{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,60px)}
.foot-cols .lbl{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-cols a{display:block;font-size:15px;margin-bottom:8px;transition:color .2s ease}
.foot-cols p{font-size:13px;color:var(--muted);margin-top:8px;max-width:26ch;line-height:1.45}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:30px 0 40px;font-size:12px;color:var(--muted)}
@media (max-width:680px){.footer-top{flex-direction:column;align-items:flex-start;gap:26px}}

/* =========================================================================
   RESPONSIVE TWEAK LAYER
   Four device tiers. Put any per-device tweaks (font sizes, spacing, etc.)
   in the matching block below. These load last, so they win over the styles
   above without you having to touch the tuned layout logic.

     MOBILE    up to 600px      phones
     TABLET    601 - 1024px     tablets / small landscape
     DESKTOP   1025 - 1600px    laptops / standard monitors
     LARGE     1601px and up    large / wide monitors

   Note: the structural layout already changes on its own at ~900px (the
   projects-list image hides and items stack) and at ~1500px. These tiers are
   just for small visual adjustments on top of that.
   ========================================================================= */
@media (max-width:600px){
  /* MOBILE — phone tweaks go here */

  /* Format / Role: stack into their own full-width blocks so long values
     (e.g. "Print & Digital Communication") wrap instead of running off-screen */
  .specs{display:block;max-width:none}
  .specs .grp2{margin-top:22px}
  .specs .v{white-space:normal}

  /* project nav: "all projects" and "next project" on the same row */
  .proj-nav{flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px}
  .proj-nav .all{align-self:auto;flex:none}
  .proj-nav .next{min-width:0}
  .proj-nav .next a{font-size:clamp(18px,5vw,28px)}
}
@media (min-width:601px) and (max-width:1024px){
  /* TABLET — tablet tweaks go here */
}
@media (min-width:1025px) and (max-width:1600px){
  /* DESKTOP — laptop / standard monitor tweaks go here */
  .desc{font-size:clamp(16px,1.25vw,19px)} /* a little smaller than the base 17-22px */
  .more p{font-size:clamp(14px,1.15vw,16px)} /* read-more text, kept a notch below .desc */
}
@media (min-width:1601px){
  /* LARGE — wide monitor tweaks go here */
  .desc{font-size:19px} /* keep wide monitors in step with desktop */
  .more p{font-size:16px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}