/* Selected Portfolio — taken verbatim from the finalized design draft so tiles, crops, glass panels,
   the banner and the Before Niyarch strip look and behave exactly like the draft.
   Niyarch-only additions are at the very end of this file. */

/* ---- draft lines 252-342 ---- */
  /* selected portfolio - blurred tiles that come into focus, project opens below its row */
  .pf-grid{
    display:grid; grid-template-columns:repeat(3, 1fr);
    gap:clamp(16px, 2.2vw, 28px);
    align-items:start;
  }
  .pf-tile{position:relative; display:flex; flex-direction:column;}
  .pf-tile--wide{grid-column:1 / -1;}
  .pf-tile-btn{
    position:relative; display:block; width:100%; aspect-ratio:1/1;
    border:1px solid var(--rule); background:var(--mist); padding:0; margin:0;
    cursor:pointer; overflow:hidden; -webkit-tap-highlight-color:transparent; text-align:left;
  }
  .pf-tile--wide .pf-tile-btn{aspect-ratio:4/1;}
  .pf-tile-bg{
    position:absolute; inset:0; z-index:0;
    background-size:cover; background-position:center;
    filter:blur(6px); opacity:0.68; transform:scale(1.06);
    transition:filter 1.1s var(--ease-quiet), opacity 1.1s var(--ease-quiet), transform 1.4s var(--ease-quiet);
  }
  /* placeholder hatch until a real image is provided */
  .pf-tile[data-pf-bg=""] .pf-tile-bg{
    background-image:repeating-linear-gradient(45deg, transparent 0 22px, rgba(122,122,119,0.06) 22px 24px);
    opacity:1; filter:none; transform:none;
  }
  .pf-tile-label{
    position:absolute; inset:0; z-index:1;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px;
    padding:clamp(14px, 1.8vw, 22px) clamp(14px, 1.8vw, 22px) clamp(18px, 2.2vw, 28px); text-align:center;
    background:linear-gradient(to top, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.45) 18%, rgba(255,255,255,0) 40%);
    transition:opacity 1.1s var(--ease-quiet);
  }
  .pf-tile-name{
    font-family:var(--display); font-weight:400;
    font-size:clamp(20px, 2vw, 27px); line-height:1.15; letter-spacing:0;
    color:var(--black);
  }
  .pf-tile-eyebrow{
    font-family:var(--index); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--graphite);
  }
  @media (hover:hover){
    .pf-tile:not([data-pf-bg=""]) .pf-tile-btn:hover .pf-tile-bg{filter:blur(4px); opacity:0.8;}
  }
  .pf-tile.is-open .pf-tile-btn .pf-tile-bg, .pf-tile.is-open .pf-tile-btn:hover .pf-tile-bg{filter:blur(0); opacity:1; transform:scale(1);}
  .pf-tile.is-open .pf-tile-label{opacity:0;}
  .pf-tile[data-pf-bg=""].is-open .pf-tile-label{opacity:1;}
  .pf-tile.is-open .pf-tile-btn{border-color:var(--graphite);}
  .pf-tile-btn:focus-visible{outline:2px solid var(--graphite); outline-offset:2px;}
  .pf-panel{display:none;}

  /* open project */
  .pf-reader{grid-column:1 / -1; overflow:hidden; height:0; opacity:0; transition:height .5s var(--ease-quiet), opacity .35s ease;}
  .pf-reader.is-open{opacity:1;}
  .pf-reader-inner{padding:clamp(28px, 4vw, 48px) 0 clamp(8px, 2vw, 16px); border-top:1px solid var(--rule);}
  .pf-reader-img{margin:0 0 clamp(24px, 3vw, 36px);}
  .pf-reader-img img{display:block; width:auto; max-width:100%; max-height:72vh; margin:0;}
  .pf-reader-text{max-width:68ch; margin:0;}
  .pf-reader h3{font-family:var(--display); font-size:clamp(26px, 3.2vw, 36px); line-height:1.2; color:var(--black); margin:0 0 8px; text-transform:uppercase; letter-spacing:0.02em;}
  .pf-loc{font-family:var(--quote); font-style:italic; color:var(--slate); font-size:clamp(17px, 1.6vw, 20px); line-height:1.5; margin:0 0 clamp(16px, 2vw, 22px); text-align:left; hyphens:none;}
  .pf-facts{list-style:none; margin:0 0 clamp(20px, 2.6vw, 28px); padding:0; font-size:14.5px; line-height:1.75; color:var(--graphite);}
  .pf-text p{font-size:var(--para); line-height:1.8; color:var(--graphite); margin:0;}
  .pf-svc{margin-top:clamp(20px, 2.6vw, 28px); display:flex; flex-direction:column; gap:10px;}
  .pf-chain{margin:0; font-family:var(--index); font-size:13.5px; line-height:1.9; text-align:left; hyphens:none;}
  .pf-svc-done{color:#8E8E89; font-weight:400;}
  .pf-svc-open{color:var(--black); font-weight:600;}
  .pf-svc-next{color:#C6C6C1; font-weight:400;}
  .pf-arr{color:#A9A9A5; margin:0 2px;}
  .pf-svc-done, .pf-svc-open, .pf-svc-next{white-space:nowrap;}
  .pf-svc-for{font-family:var(--quote); font-style:italic; font-size:15px; color:var(--slate); margin-right:10px;}
  @media (max-width: 860px){ .pf-text p{text-align:left; hyphens:manual;} }

  /* also delivered */
  .pf-more{margin-top:clamp(48px, 6vw, 80px); padding-top:clamp(28px, 3.4vw, 40px); border-top:1px solid var(--rule);}
  .pf-more-title{font-family:var(--display); font-size:clamp(22px, 2.4vw, 28px); line-height:1.2; color:var(--black); margin:0 0 clamp(18px, 2.4vw, 28px);}
  .pf-more-grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2.4fr); gap:clamp(24px, 4vw, 64px);}
  .pf-more-label{font-family:var(--index); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate); margin:0 0 12px; text-align:left;}
  .pf-more-group ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:15px; line-height:1.6; color:var(--graphite);}
  .pf-more-name{font-weight:500; color:var(--black);}
  .pf-more-role{color:var(--slate);}
  @media (max-width: 820px){ .pf-more-grid{grid-template-columns:1fr;} }

  .pf-head{width:fit-content; max-width:100%; margin:0 0 clamp(28px, 4vw, 48px);}
  .pf-quote{margin:0; text-align:right;}
  .pf-quote .pf-subhead{margin:0 0 8px; text-align:right;}
  .pf-sign{font-family:var(--quote); font-style:italic; font-size:17px; color:var(--slate); margin:0; text-align:right;}
  @media (max-width: 820px){ .pf-grid{grid-template-columns:repeat(2, 1fr);} }
  @media (max-width: 520px){ .pf-grid{grid-template-columns:1fr;} .pf-tile-btn{aspect-ratio:4/3;} .pf-tile--wide .pf-tile-btn{aspect-ratio:2.2/1;} }
  @media (max-width: 600px){ .pf-head{width:auto;} .pf-quote, .pf-quote .pf-subhead{text-align:left;} .pf-sign{text-align:right;} }
  @media (prefers-reduced-motion: reduce){ .pf-reader,.pf-tile-bg,.pf-tile-label{transition:none;} }


/* ---- draft lines 381-386 ---- */
  .portfolio-section .section-title{margin-bottom:14px;}
  .pf-subhead{
    font-family:var(--quote); font-style:italic; font-weight:400; color:var(--slate);
    font-size:var(--quote-size); line-height:1.5; margin:0 0 26px;
    text-align:left; hyphens:none;
  }

/* ---- draft lines 591-779 ---- */
  /* ============ Selected Portfolio v10: L2 block, dissolve tiles, glass ============ */
  .pp-block{position:relative; display:grid; grid-template-columns:1.68fr 1fr 1fr; gap:clamp(16px, 2.2vw, 28px); align-items:stretch;}
  .pp-tile{position:relative; min-width:0;}
  .pp-tile--lead{grid-row:span 2;}
  .pp-btn{position:relative; display:block; width:100%; aspect-ratio:1/1; border:0; margin:0; padding:0; background:transparent; cursor:pointer; text-align:center; -webkit-tap-highlight-color:transparent; font:inherit; color:inherit;}
  .pp-tile--lead .pp-btn{aspect-ratio:auto; height:100%; min-height:100%;}
  .pp-btn:focus-visible{outline:2px solid var(--graphite); outline-offset:3px;}
  .pp-art{position:absolute; inset:0; overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 9%, rgba(0,0,0,.55) 20%, #000 40%);
            mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.18) 9%, rgba(0,0,0,.55) 20%, #000 40%);}
  .pp-bg{position:absolute; inset:0; background-image:var(--img); background-size:cover; background-position:center; filter:grayscale(1);}
  .pp-bg--soft{filter:grayscale(1) blur(7px); transform:scale(1.06); transition:opacity .6s ease;
    -webkit-mask-image:linear-gradient(to bottom, transparent 30%, #000 82%); mask-image:linear-gradient(to bottom, transparent 30%, #000 82%);}
  .pp-dusk{position:absolute; inset:0; background:linear-gradient(to top, rgba(20,20,19,.62) 0%, rgba(20,20,19,.28) 22%, rgba(20,20,19,0) 45%);}
  .pp-name{position:absolute; left:0; right:0; bottom:clamp(34px, 3.2vw, 44px); padding:0 12px;
    font-family:var(--display); font-weight:400; font-size:clamp(16px, 1.55vw, 21px); line-height:1.2; letter-spacing:.07em; text-transform:uppercase; color:#fff;}
  .pp-tile--lead .pp-name{font-size:clamp(19px, 1.9vw, 25px);}
  .pp-hint{position:absolute; left:0; right:0; bottom:clamp(12px, 1.3vw, 18px); display:flex; justify-content:center; align-items:center;
    font-family:var(--text); font-size:10.5px; letter-spacing:.06em; color:rgba(255,255,255,.62); transition:color .3s ease;}
  .pp-arrow{display:none; transition:transform .35s var(--ease-quiet);}
  .pp-tile--ph .pp-art{background:#F4F4F2 repeating-linear-gradient(45deg, transparent 0 22px, rgba(122,122,119,.07) 22px 24px);}
  .pp-tile--ph .pp-dusk, .pp-tile--ph .pp-bg{display:none;}
  .pp-tile--ph .pp-name{color:var(--black);}
  .pp-tile--ph .pp-hint{color:#9C9C98;}
  @media (hover:hover) and (pointer:fine){
    .pp-hint-t{display:none;}
    .pp-arrow{display:block;}
    .pp-btn:hover .pp-hint{color:#fff;}
    .pp-tile--ph .pp-btn:hover .pp-hint{color:var(--graphite);}
    .pp-btn:hover .pp-bg--soft{opacity:.55;}
  }
  .pp-tile.pp-hide{display:none;}

  /* text-only tiles */
  .pp-note{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; aspect-ratio:1/1; min-width:0;
    padding:clamp(18px, 2.2vw, 30px); background:#F7F7F5;}
  .pp-note-name{font-family:var(--display); font-size:clamp(15px, 1.45vw, 19px); line-height:1.25; letter-spacing:.07em; text-transform:uppercase; color:var(--black); margin-bottom:8px;}
  .pp-note-line{font-family:var(--text); font-size:13px; line-height:1.6; color:var(--slate); font-weight:400;}
  .pp-note-loc{font-family:var(--quote); font-style:italic; font-size:14.5px; line-height:1.5; color:var(--slate);}
  .pp-note--pmc .pp-note-name{font-size:clamp(13.5px, 1.2vw, 16px); margin:8px 0 0;}
  .pp-note-role{font-family:var(--text); font-size:12.5px; line-height:1.5; font-weight:500; color:var(--graphite); margin-bottom:2px;}
  .pp-note-gap{margin-top:8px;}
  .pp-note--stage{position:relative; align-items:flex-start; justify-content:flex-start; text-align:left;}
  .pp-note--stage .pp-note-name{margin-bottom:4px;}
  .pp-stages{position:absolute; left:clamp(18px, 2.2vw, 30px); right:clamp(18px, 2.2vw, 30px); bottom:clamp(18px, 2.2vw, 30px);}
  .pp-stages-line{position:absolute; left:6px; right:6px; top:5px; height:1px; background:#C8C8C4;}
  .pp-stages-done{position:absolute; left:0; top:0; width:50%; height:1px; background:var(--graphite);}
  .pp-stages-dots{position:relative; display:flex; justify-content:space-between;}
  .pp-d{width:11px; height:11px; border-radius:50%; background:#fff; border:1px solid #B9B9B5;}
  .pp-d--f{background:var(--graphite); border-color:var(--graphite);}
  .pp-d--c{border:2px solid var(--black);}
  .pp-stages-lb{display:flex; justify-content:space-between; margin-top:8px; font-family:var(--text); font-size:11px; color:var(--slate);}
  .pp-stages-lb .pp-cur{color:var(--black); font-weight:600;}

  /* glass */
  .pp-glass{z-index:6; display:flex; align-items:flex-end; gap:clamp(20px, 2.6vw, 32px); isolation:isolate;
    background:linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(246,247,248,.46) 55%, rgba(255,255,255,.58) 100%);
    -webkit-backdrop-filter:blur(24px) saturate(1.25) brightness(1.03); backdrop-filter:blur(24px) saturate(1.25) brightness(1.03);
    border:1px solid rgba(255,255,255,.95); outline:1px solid rgba(0,0,0,.06); outline-offset:0;
    box-shadow:0 40px 80px -40px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,1), inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -30px 60px -40px rgba(120,125,130,.18);
    opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .6s var(--ease-quiet);}
  .pp-glass[hidden]{display:none;}
  .pp-glass.is-inline{scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 84px);}
  .pp-glass.is-in{opacity:1; transform:none;}
  .pp-glass.is-overlay{position:absolute; inset:-14px; padding:14px;}
  .pp-pic{flex:none; aspect-ratio:1/1; background-image:var(--img); background-size:cover; background-position:center; filter:grayscale(1); transition:filter .9s ease .15s;}
  .pp-glass.is-in .pp-pic{filter:none;}
  .pp-glass.is-overlay .pp-pic{height:100%;}
  .pp-pic.is-ph{background:#F4F4F2 repeating-linear-gradient(45deg, transparent 0 22px, rgba(122,122,119,.08) 22px 24px);}
  .pp-story{flex:1 1 auto; min-width:0; padding:0 clamp(8px, 1vw, 14px) 2px 0;}
  .pp-title{font-family:var(--display); font-weight:400; font-size:clamp(21px, 2vw, 25px); line-height:1.2; letter-spacing:.05em; text-transform:uppercase; color:var(--black); margin:0 0 4px;}
  .pp-content .pf-loc{font-size:15.5px; margin:0 0 12px;}
  .pp-content .pf-facts{font-size:12.5px; line-height:1.65; margin:0 0 12px;}
  .pp-content .pf-text p{font-size:13.5px; line-height:1.72; text-align:justify; -webkit-hyphens:auto; hyphens:auto;}
  .pp-content .pf-svc{margin-top:12px;}
  .pp-content .pf-chain{font-size:11.5px; line-height:1.8;}
  .pp-x{position:absolute; top:14px; right:16px; z-index:2; display:flex; padding:10px; margin:0; border:0; background:none; color:var(--graphite); cursor:pointer;}
  .pp-x:hover{color:var(--black);}
  .pp-x:focus-visible{outline:2px solid var(--graphite); outline-offset:2px;}
  .pp-tapclose{display:none; margin:14px 0 0; text-align:center; font-family:var(--text); font-size:10.5px; letter-spacing:.06em; color:#C4C4C0;}
  @media (hover:none), (pointer:coarse){
    .pp-x{display:none;}
    .pp-tapclose{display:block;}
    .pp-glass{cursor:pointer;}
  }
  .pp-glass.is-inline{position:relative; grid-column:1 / -1; margin:0 -8px; padding:8px;}
  .pp-glass.is-inline .pp-pic{width:min(48%, 520px);}
  .pp-glass.is-narrow{flex-direction:column; align-items:stretch; gap:0; padding:8px 8px 18px;}
  .pp-glass.is-narrow .pp-pic{width:100%;}
  .pp-glass.is-narrow .pp-story{padding:14px 6px 0;}
  .pp-glass.is-narrow .pp-title{font-size:20px;}
  .pp-glass.is-narrow .pf-loc{font-size:14.9px;}
  .pp-glass.is-narrow .pf-facts{font-size:12px;}
  .pp-glass.is-narrow .pf-text p{font-size:13px;}
  .pp-glass.is-narrow .pf-chain{font-size:11px;}

  /* banners + drawers */
  .pp-banners{margin-top:clamp(28px, 4vw, 56px); display:flex; flex-direction:column; gap:clamp(16px, 2.2vw, 28px);}
  .pp-banner{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:100%; aspect-ratio:6/1;
    border:0; margin:0; padding:0 16px 14px; background:#F4F4F2; cursor:pointer; font:inherit; color:inherit; -webkit-tap-highlight-color:transparent;}
  .pp-banner--villa{background:#F4F4F2 repeating-linear-gradient(45deg, transparent 0 22px, rgba(122,122,119,.07) 22px 24px);}
  .pp-banner:focus-visible{outline:2px solid var(--graphite); outline-offset:3px;}
  .pp-banner-eyebrow{font-family:var(--index); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--graphite);}
  .pp-banner-name{font-family:var(--display); font-weight:400; font-size:clamp(20px, 2.2vw, 28px); line-height:1.2; letter-spacing:.07em; text-transform:uppercase; color:var(--black);}
  .pp-banner .pp-hint{bottom:12px; color:#9C9C98;}
  @media (hover:hover) and (pointer:fine){ .pp-banner:hover .pp-hint{color:var(--graphite);} }
  .pp-banner[aria-expanded="true"] .pp-arrow{transform:rotate(180deg);}
  .pp-drawer[hidden]{display:none;}
  .pp-drawer-inner{padding:clamp(22px, 3vw, 36px) 0 clamp(8px, 1.5vw, 16px);}
  .pp-credit, .pp-villa-text, .pp-lede{width:66.666%; max-width:none;}
  .pp-credit{margin-bottom:clamp(26px, 3.4vw, 40px);}
  .pp-credit p, .pp-villa-text p{font-size:var(--para); line-height:1.8; color:var(--graphite);}

  @media (max-width: 1099px){
    .pp-block{grid-template-columns:1fr 1fr;}
    .pp-tile--lead{grid-column:1 / -1; grid-row:auto;}
    .pp-tile--lead .pp-btn{aspect-ratio:4/3; height:auto; min-height:0;}
    .pp-banner{aspect-ratio:4/1;}
  }
  @media (max-width: 599px){
    .pp-block{grid-template-columns:1fr;}
    .pp-tile--lead .pp-btn{aspect-ratio:4/5;}
    .pp-note{aspect-ratio:auto; min-height:0; padding:26px 22px;}
    .pp-note--stage{padding-bottom:84px;}
    .pp-banner{aspect-ratio:2.6/1;}
  }
  @media (prefers-reduced-motion: reduce){
    .pp-glass, .pp-pic, .pp-bg--soft, .pp-arrow, .pp-hint{transition:none;}
  }

  /* ---- v11 additions ---- */
  .pp-glass::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 68%, rgba(255,255,255,.22) 100%);}
  .pp-glass > *{position:relative;}
  .pp-glass > .pp-x{position:absolute;}
  /* subheading + two-thirds line */
  .pp-lede{border-bottom:1px solid var(--rule); padding-bottom:clamp(10px, 1.2vw, 14px); margin-bottom:clamp(18px, 2.4vw, 26px);}
  .pp-sub{margin:0; font-family:var(--quote); font-style:italic; font-weight:400; font-size:clamp(19px, 1.8vw, 22px); line-height:1.4; color:var(--graphite);}
  .pp-villa-text p, .pp-credit p{text-align:justify; -webkit-hyphens:auto; hyphens:auto;}
  /* Villa Reya gallery: one large + three beside, colour only inside the drawer */
  .pp-gallery{display:grid; grid-template-columns:2fr 1fr; gap:clamp(14px, 1.8vw, 22px); margin-top:clamp(26px, 3.4vw, 40px);}
  .pp-gallery-side{display:grid; grid-template-rows:repeat(3, 1fr); gap:clamp(14px, 1.8vw, 22px);}
  .pp-ph{position:relative; display:flex; align-items:center; justify-content:center; min-height:120px; background:#F4F4F2 repeating-linear-gradient(45deg, transparent 0 22px, rgba(122,122,119,.07) 22px 24px);}
  .pp-ph--lead{aspect-ratio:4/3;}
  .pp-ph span{font-family:var(--text); font-size:11px; letter-spacing:.06em; color:#A3A39F;}
  .pp-shot{background-size:cover; background-position:center;}
  /* Before Niyarch slim strip */
  .pp-banner--strip{aspect-ratio:auto; background:none; border-top:1px solid #CFCFCB; border-bottom:1px solid #CFCFCB; padding:clamp(20px, 2.4vw, 28px) 16px clamp(34px, 3.4vw, 42px);}
  .pp-banner--strip .pp-hint{bottom:10px;}
  /* Articles: date on the tile and in the opened article */
  .article-date{margin:auto 0 0; font-family:var(--text); font-size:12px; letter-spacing:.04em; color:var(--slate); text-align:left; hyphens:none;}
  .article .art-toggle{margin-top:0;}
  .art-date{margin:0 0 10px; font-family:var(--text); font-size:12.5px; letter-spacing:.04em; color:var(--slate); text-align:left; hyphens:none;}
  .art-reader-inner > .art-content{max-width:none; width:66.666%;}
  .art-content .art-sub{margin-bottom:0;}
  .art-content .art-body{border-top:1px solid var(--rule); margin-top:clamp(12px, 1.6vw, 18px); padding-top:clamp(18px, 2.4vw, 26px);}
  .art-reader h3 + .art-date{margin-top:-4px;}
  /* justified paragraphs everywhere, laptop and phone */
  .pf-text p, .art-body p, .prose p, .svc-panel-inner p, .careers-body p{text-align:justify; -webkit-hyphens:auto; hyphens:auto;}
  @media (max-width: 860px){
    .pp-credit, .pp-villa-text, .pp-lede{width:100%;}
    .art-reader-inner > .art-content{width:100%;}
  }
  @media (max-width: 599px){
    .pp-gallery{grid-template-columns:1fr;}
    .pp-gallery-side{grid-template-rows:none; grid-template-columns:repeat(3, 1fr);}
    .pp-gallery-side .pp-ph{aspect-ratio:1/1; min-height:0;}
    .pp-ph span{font-size:9.5px; text-align:center; padding:0 4px;}
  }

  /* ---- v12: Before Niyarch — Kalpak at two-thirds, four projects stacked ---- */
  .pp-block--before{grid-template-columns:2fr 1fr; grid-template-rows:repeat(4, minmax(0, 1fr));}
  .pp-block--before .pp-tile--lead{grid-column:1; grid-row:1 / span 4;}
  .pp-block--before .pp-tile--lead .pp-btn{aspect-ratio:1/1; height:auto; min-height:0;}
  .pp-note--row{aspect-ratio:auto; align-items:flex-start; justify-content:center; text-align:left; padding:clamp(12px, 1.5vw, 20px) clamp(16px, 1.8vw, 24px); min-height:0; overflow:hidden;}
  .pp-note--row .pp-note-name{font-size:clamp(14px, 1.3vw, 17px); margin-bottom:5px;}
  .pp-note--row .pp-note-line{font-size:clamp(11.5px, 1vw, 12.5px); line-height:1.55;}
  .pp-note--pmc2 .pp-note-role{font-size:clamp(11px, .95vw, 12px); margin-bottom:5px;}
  .pp-note-soc{font-family:var(--display); font-size:clamp(11.5px, 1vw, 13.5px); letter-spacing:.06em; text-transform:uppercase; color:var(--black); line-height:1.4;}
  @media (max-width: 1099px){
    .pp-block--before{grid-template-columns:1fr 1fr; grid-template-rows:none;}
    .pp-block--before .pp-tile--lead{grid-column:1 / -1; grid-row:auto;}
    .pp-block--before .pp-tile--lead .pp-btn{aspect-ratio:4/3;}
  }
  @media (max-width: 599px){
    .pp-block--before{grid-template-columns:1fr;}
    .pp-block--before .pp-tile--lead .pp-btn{aspect-ratio:1/1;}
    .pp-note--row{padding:16px 18px;}
  }

/* ---- draft lines 812-874 ---- */
  /* B3 phone: open banner reads 'Tap to close' */
  @media (hover: none), (pointer: coarse){
    .pp-banner[aria-expanded="true"] .pp-hint-t{font-size:0;}
    .pp-banner[aria-expanded="true"] .pp-hint-t::after{content:"Tap to close"; font-size:10.5px; letter-spacing:.06em;}
  }

  /* C1 KDS text tile — clickable, opens text-only glass */
  .pp-tile--text{display:flex;}
  .pp-tile--text > .pp-note{width:100%;}
  .pp-btn--cover{position:absolute; inset:0; aspect-ratio:auto !important; height:100%; background:transparent;}
  .pp-tile--text .pp-hint{top:clamp(14px, 1.6vw, 20px); right:clamp(14px, 1.6vw, 20px); left:auto; bottom:auto; color:#9C9C98;}
  @media (hover:hover) and (pointer:fine){ .pp-tile--text .pp-btn:hover .pp-hint{color:var(--graphite);} }
  .pp-glass.is-text .pp-pic{display:none;}
  .pp-glass.is-text .pp-story{max-width:66.666%; padding-left:clamp(10px, 1.6vw, 22px);}
  .pp-glass.is-text.is-narrow .pp-story{max-width:none; padding:18px 10px 0;}

  /* C2 Villa Reya — picture tile (Kalpak treatment) that opens as glass in place */
  .pp-block--villa{grid-template-columns:1fr !important;}
  .pp-tile--villa .pp-btn{aspect-ratio:3/1;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 7%, #000 18%);
            mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 7%, #000 18%);}
  .pp-tile--villa .pp-bg{background-position:center 40%;}
  .pp-tile--villa .pp-name.vr-head{bottom:calc(clamp(34px, 3.2vw, 44px) + 22px); font-size:clamp(18px, 1.9vw, 25px);}
  .vr-sub{position:absolute; left:0; right:0; bottom:clamp(34px, 3.2vw, 44px); font-family:var(--index); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85);}
  .pp-glass.is-solo{position:relative; flex-direction:column; align-items:stretch; gap:0; padding:14px; margin:0 -14px;}
  .pp-block--villa .pp-glass.is-solo .pp-pic{width:100%; height:auto; aspect-ratio:2000/1126;}
  .pp-glass.is-solo .pp-story{padding:clamp(20px, 2.6vw, 30px) 4px 4px;}
  .pp-glass.is-solo .pp-lede, .pp-glass.is-solo .pf-text{width:66.666%;}
  .pp-glass.is-solo .pp-x{color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); top:22px; right:24px;}
  @media (max-width: 599px){
    .pp-tile--villa .pp-btn{aspect-ratio:16/9;}
    .pp-tile--villa .pp-bg{background-position:center center;}
    .pp-tile--villa .pp-name.vr-head{font-size:14px; letter-spacing:.05em; bottom:46px; padding:0 10px;}
    .vr-sub{bottom:30px; font-size:9.5px;}
    .pp-tile--villa .pp-hint{bottom:10px;}
    .pp-glass.is-solo{margin:0 -8px; padding:8px 8px 18px;}
    .pp-glass.is-solo .pp-story{padding:14px 6px 0;}
    .pp-glass.is-solo .pp-lede, .pp-glass.is-solo .pf-text{width:100%;}
    .pp-glass.is-solo .pp-title{font-size:20px;}
  }

  /* C3 Before Niyarch — five compact, lighter rectangles, stack ends level with Kalpak */
  .pp-block--before .pp-note--row{justify-content:flex-start; padding:9px clamp(16px, 1.8vw, 24px) 8px; background:#FBFBFA;}
  .pp-block--before .pp-note--row .pp-note-name{margin-bottom:2px;}
  .pp-block--before .pp-note--row .pp-note-line{line-height:1.45;}
  @media (min-width: 1100px){
    .pp-block--before{grid-template-rows:1fr repeat(5, auto); row-gap:12px;}
    .pp-block--before .pp-tile--lead{grid-row:1 / span 6;}
    .pp-block--before > .pp-note--row:nth-child(2){grid-column:2; grid-row:2;}
    .pp-block--before > .pp-note--row:nth-child(3){grid-column:2; grid-row:3;}
    .pp-block--before > .pp-note--row:nth-child(4){grid-column:2; grid-row:4;}
    .pp-block--before > .pp-note--row:nth-child(5){grid-column:2; grid-row:5;}
    .pp-block--before > .pp-note--row:nth-child(6){grid-column:2; grid-row:6;}
  }
  @media (max-width: 599px){ .pp-block--before .pp-note--row{padding:10px 16px 9px;} }

  /* D1 body paragraphs at 90% — Selected Portfolio + Articles */
  #portfolio .pp-credit p{font-size:13.95px; line-height:1.8;}
  #portfolio .pp-glass .pf-text p{font-size:12.15px;}
  #articles .article-teaser{font-size:13.5px;}
  #artReader .art-body p{font-size:13.95px; line-height:1.8;}
  @media (max-width: 599px){ #portfolio .pp-glass .pf-text p{font-size:12px;} }


/* ---- draft lines 881-903 ---- */
  /* recognised building names under project names */
  .pp-tile .pp-aka{position:absolute; left:0; right:0; bottom:clamp(34px, 3.2vw, 44px); padding:0 12px; font-family:var(--quote); font-style:italic; font-size:clamp(12.5px, 1.1vw, 14.5px); color:rgba(255,255,255,.88);}
  .pp-tile.has-aka .pp-name{bottom:calc(clamp(34px, 3.2vw, 44px) + 22px);}
  .pp-tile--ph .pp-aka{color:var(--slate);}
  .pp-note-aka{font-family:var(--quote); font-style:italic; font-size:13px; line-height:1.3; color:var(--slate); margin:-1px 0 3px;}
  .pf-aka{font-family:var(--quote); font-style:italic; font-size:15px; color:var(--graphite); margin:0 0 2px;}
  /* Radha Govind Niwas — architect-of-record note */
  .pf-record{margin-top:clamp(14px, 1.8vw, 18px); padding-top:10px; border-top:1px solid var(--rule); font-family:var(--text); font-size:11.5px; line-height:1.55; letter-spacing:.02em; color:var(--slate); text-align:left; hyphens:none; -webkit-hyphens:none;}
  /* Villa Reya glass — W-2: clear white glass + faint colour glow of the photo (frozen 29 Sep) */
  .pp-glass.is-solo{overflow:hidden; background:linear-gradient(160deg, rgba(255,255,255,.97) 0%, rgba(250,251,252,.92) 45%, rgba(255,255,255,.96) 100%);
    border:1px solid #fff; outline:1px solid rgba(0,0,0,.07);
    box-shadow:0 44px 90px -44px rgba(0,0,0,.34), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.6), inset 0 -36px 70px -46px rgba(140,150,160,.22), inset 0 60px 90px -70px rgba(210,225,235,.35);}
  .pp-glass.is-solo::before{background:linear-gradient(112deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 38%, rgba(235,242,247,.55) 44%, rgba(255,255,255,0) 52%, rgba(255,255,255,0) 100%), linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 18%);}
  .vr-frost{display:none;}
  .pp-glass.is-solo .vr-frost{display:block; position:absolute; left:0; right:0; top:0; height:100%; z-index:-2; background-image:var(--img); background-size:cover; background-position:center bottom;
    filter:blur(26px) saturate(1.3) brightness(1.15); opacity:.16; pointer-events:none;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, transparent 55%, #000 68%, transparent 92%); mask-image:linear-gradient(to bottom, transparent 0%, transparent 55%, #000 68%, transparent 92%);}
  /* Radha note — phone 90% */
  @media (max-width: 599px){ .pf-record{font-size:10.35px;} }

  /* per-image framing (e.g. Devlok tall render) */
  .pp-tile .pp-bg{background-position:var(--tpos, var(--pos, center)); background-size:var(--tsize, cover);}
  .pp-pic{background-position:var(--pos, center);}

/* ---- draft lines 916-925 ---- */
/* V36 tile style (frozen): B&W image + bottom blur, whole image veiled 10% white; no top fade */
.pp-art{-webkit-mask-image:none !important; mask-image:none !important;}
.pp-tile--villa .pp-btn{-webkit-mask-image:none !important; mask-image:none !important;}
.pp-art::after{content:""; position:absolute; inset:0; background:rgba(255,255,255,.10); pointer-events:none; z-index:1;}
/* names sit above the veil and read ~10% stronger */
.pp-art .pp-dusk{z-index:2; background:linear-gradient(to top, rgba(20,20,19,.70) 0%, rgba(20,20,19,.32) 22%, rgba(20,20,19,0) 46%);}
.pp-art .pp-name, .pp-art .pp-aka, .pp-art .pp-hint, .pp-art .vr-sub{z-index:3; color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.38), 0 0 2px rgba(0,0,0,.25);}
.pp-art .pp-aka, .pp-art .vr-sub{color:rgba(255,255,255,.96);}
.pp-art .pp-hint{color:rgba(255,255,255,.78);}
.pp-tile--ph .pp-art::after{display:none;}

/* ---- draft lines 928-934 ---- */
/* V37 services chain: legible on glass, arrows never dangle, status readable */
.pf-chain{line-height:1.9 !important;}
.pf-step{white-space:nowrap;}
.pf-svc-open{color:#000 !important; font-weight:600 !important;}
.pf-svc-done{color:#4A4A48 !important; font-weight:400 !important;}
.pf-svc-next{color:#76766F !important; font-weight:400 !important;}
.pf-arr{color:#76766F !important; margin:0 3px 0 4px !important;}


/* ================= Niyarch additions (not in the design draft) ================= */

/* Projects added after the large tile + four: they continue in rows of three equal tiles */
.pp-block--rows{grid-template-columns:repeat(3, 1fr); margin-top:clamp(16px, 2.2vw, 28px);}
@media (max-width: 1099px){ .pp-block--rows{grid-template-columns:1fr 1fr;} }
@media (max-width: 599px){ .pp-block--rows{grid-template-columns:1fr;} }

/* Heading bar (laptop / desktop): "Selected portfolio" with its quote beside it, full size. Once the section reaches
   the menu bar the bar stays parked beneath it for the whole section (current projects, Architecture beyond the city,
   Before Niyarch) while the content slides under it. main.js sets --pf-top (menu bar bottom), --pf-gap (space under
   the menu bar) and --pf-block-w (collage width scaled so bar + five tiles fit one screen) and adds .pf-pin.
   Below 1100px the heading and quote simply stack and nothing is pinned. */
@media (min-width: 1100px){
  .portfolio-section .pf-main .pf-head{display:flex; align-items:center; gap:24px; width:auto; max-width:none; margin:0;}
  .portfolio-section .pf-main .section-title{margin:0; flex:none; white-space:nowrap;}
  .pf-main .pf-quote{flex:1 1 auto; min-width:0; margin:0; text-align:left;}
  /* the quote sits close to the heading, small, on two lines: as written when it has two lines, otherwise re-flowed
     (main.js picks 14px down to 11px so it fits) */
  .portfolio-section .pf-main .pf-quote .pf-subhead{margin:0; text-align:left; font-size:14px; line-height:1.2; text-wrap:balance;}
  .pf-main .pf-quote .pf-subhead[data-flow] br{display:none;}
}
.pf-main.pf-pin .pf-stick{position:sticky; top:var(--pf-top, 69px); z-index:8; background:var(--paper);
  margin-top:calc(var(--pf-gap, 24px) * -1); padding-top:var(--pf-gap, 24px); padding-bottom:14px;}
.pf-main.pf-pin .pp-block--main{max-width:var(--pf-block-w, none); margin-inline:auto;}
/* While a project panel is open, the page behind it fades to a pale wash (no blur): everything below the menu bar,
   the heading bar included. The menu bar stays crisp. The panel opens exactly over the tiles' own place, and a
   click on the wash closes it. */
.pf-veil{position:fixed; left:0; right:0; bottom:0; top:var(--pf-top, calc(var(--niy-adminbar, 0px) + 69px)); z-index:5;
  background:rgba(255,255,255,.88); opacity:0; pointer-events:none; transition:opacity .4s ease;}
.pf-main.pf-veiled .pf-veil{opacity:1; pointer-events:auto; cursor:pointer;}
.pf-main.pf-veiled .pf-stick{z-index:3;}
.pf-main.pf-pin .pp-glass.is-overlay{inset:0;}
@media (prefers-reduced-motion: reduce){ .pf-veil{transition:none;} }
/* anything the page scrolls to must stop below the parked bar. The page already adds its own scroll-padding
   (76px + admin bar), so this margin is the remainder. */
.pf-main.pf-pin .pp-block, .pf-main.pf-pin .pp-banner, .pf-main.pf-pin .pp-tile, .pf-main.pf-pin .pp-glass.is-inline{scroll-margin-top:calc(var(--pf-bar, 90px) + 7px);}/* Optional per-project status badge (off by default) */
.pp-badge{position:absolute; top:clamp(12px, 1.5vw, 18px); left:clamp(12px, 1.5vw, 18px); z-index:3;
  font-family:var(--index); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  background:rgba(20,20,19,.55); border:1px solid rgba(255,255,255,.4); padding:4px 9px;}
.pf-status-tag{display:inline-block; margin:12px 0 0; font-family:var(--index); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); border:1px solid var(--rule); padding:3px 9px;}