.portfolio-mobile-folder{display:none}

/* The larger CTA post-it belongs to the mobile homepage only.
   Keep this guard in the last-loaded homepage stylesheet so generic .postit rules cannot surface it on desktop. */
.home-page .mobile-home-postit{display:none!important}

@media(max-width:620px){
  .home-page .mobile-home-postit{display:flex!important}
}

/* Portfolio dossier — physical folder composition. */

.home-page .projects-sequence.portfolio-dossier{
  --portfolio-folder:#BC957D;
  --portfolio-folder-light:#d8b79f;
  --portfolio-paper:#DCD0DC;
  --portfolio-ink:#251b32;
  --portfolio-note:#f4ead7;
  position:relative;
  isolation:isolate;
  width:calc(100% - (var(--site-edge) * 2));
  height:auto;
  min-height:820px;
  margin:26px var(--site-edge) 0;
  overflow:hidden;
  border:1px solid rgba(157,133,198,.34);
  border-radius:34px;
  background:
    radial-gradient(circle at 85% 18%,rgba(157,133,198,.08),transparent 22%),
    rgba(43,28,71,.44);
  box-shadow:0 28px 70px -28px rgba(0,0,0,.78);
}

.portfolio-dossier__heading{
  position:absolute;
  z-index:60;
  left:clamp(30px,4vw,64px);
  top:clamp(28px,4vw,48px);
}


.portfolio-dossier__heading h2{
  margin:0;
  white-space:nowrap;
  font-family:Outfit,system-ui,sans-serif;
  font-size:clamp(42px,4.9vw,86px);
  line-height:.92;
  letter-spacing:-.05em;
  font-weight:900;
}

/* One physical folder, deliberately oversized and cropped on the left.
   Keep the approved 10deg angle unchanged. */
.portfolio-folder-object{
  position:absolute;
  z-index:10;
  left:-505px;
  bottom:-205px;
  width:1210px;
  height:860px;
  transform:rotate(10deg);
  transform-origin:58% 48%;
  filter:drop-shadow(0 32px 34px rgba(0,0,0,.34));
}

.portfolio-folder-cover{
  position:absolute;
  inset:0;
}

.portfolio-folder-cover::before{
  content:"";
  position:absolute;
  left:0;
  top:35px;
  width:1090px;
  height:742px;
  border:1px solid rgba(67,43,39,.22);
  border-radius:20px 18px 40px 26px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.18),transparent 23%),
    linear-gradient(180deg,var(--portfolio-folder-light),var(--portfolio-folder) 55%,#a77761);
  box-shadow:inset -16px 0 28px rgba(85,53,40,.12);
}

.portfolio-folder-cover::after{
  content:"";
  position:absolute;
  left:660px;
  top:42px;
  width:3px;
  height:730px;
  background:linear-gradient(180deg,transparent,rgba(77,47,39,.20) 10%,rgba(255,255,255,.15) 48%,rgba(77,47,39,.22) 92%,transparent);
  box-shadow:7px 0 16px rgba(64,39,33,.12);
}

.portfolio-paper-stack{
  position:absolute;
  z-index:20;
  left:590px;
  top:56px;
  width:612px;
  height:690px;
}

.portfolio-sheet-shadow,
.portfolio-sheet{
  position:absolute;
  width:560px;
  height:648px;
  border-radius:8px 6px 10px 7px;
  transform-origin:50% 50%;
}

.portfolio-sheet-shadow{
  left:22px;
  top:24px;
  z-index:0;
  background:rgba(32,20,26,.16);
  filter:blur(11px);
}

.portfolio-sheet--back-two{
  left:-18px;
  top:16px;
  z-index:1;
  background:var(--portfolio-paper);
  transform:rotate(-2.2deg);
  box-shadow:0 12px 18px -15px rgba(0,0,0,.38);
}

.portfolio-sheet--back-one{
  left:-6px;
  top:7px;
  z-index:2;
  background:var(--portfolio-paper);
  transform:rotate(1.4deg);
  box-shadow:0 12px 18px -15px rgba(0,0,0,.34);
}

.portfolio-sheet--main{
  left:0;
  top:0;
  z-index:3;
  overflow:visible;
  padding:54px 46px 48px;
  color:var(--portfolio-ink);
  border:1px solid rgba(55,39,42,.10);
  background:var(--portfolio-paper);
  box-shadow:0 18px 32px -18px rgba(0,0,0,.36);
}

/* Fixed project tabs: horizontal positions never change.
   The active tab visually belongs to the front sheet; inactive tabs sit behind it. */
.portfolio-tab-controls{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.portfolio-tab-hit{
  position:absolute;
  height:39px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  box-sizing:border-box;
  border:1px solid rgba(55,39,42,.18);
  border-bottom:1px solid rgba(55,39,42,.10);
  border-radius:10px 10px 3px 3px;
  background:var(--portfolio-paper);
  color:var(--portfolio-ink);
  font:850 13px/1 Outfit,system-ui,sans-serif;
  letter-spacing:-.012em;
  white-space:nowrap;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 -4px 10px -8px rgba(30,19,51,.42),0 2px 5px rgba(30,19,51,.10);
  transition:top .18s ease,transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

/* Fixed left-to-right order. Their resting Y offsets mimic tabs belonging to rear sheets. */
.portfolio-tab-hit--amanda{
  left:146px;
  top:-29px;
  width:126px;
  z-index:2;
  box-shadow:inset 0 4px 0 rgba(165,196,220,.98),0 -4px 10px -8px rgba(30,19,51,.42),0 2px 5px rgba(30,19,51,.10);
}

.portfolio-tab-hit--avventurieri{
  left:270px;
  top:-26px;
  width:145px;
  z-index:2;
  box-shadow:inset 0 4px 0 rgba(152,167,138,.94),0 -4px 10px -8px rgba(30,19,51,.42),0 2px 5px rgba(30,19,51,.10);
}

.portfolio-tab-hit--viboard{
  left:413px;
  top:-23px;
  width:142px;
  z-index:2;
  box-shadow:inset 0 4px 0 rgba(157,133,198,.94),0 -4px 10px -8px rgba(30,19,51,.42),0 2px 5px rgba(30,19,51,.10);
}

/* The front sheet covers the lower edge of inactive tabs, so they read as tabs of papers behind it. */
.portfolio-tab-hit:not([aria-current="true"]){
  filter:saturate(.92) brightness(.985);
}

.portfolio-tab-hit:not([aria-current="true"]):hover,
.portfolio-tab-hit:not([aria-current="true"]):focus-visible{
  transform:translateY(-2px);
  filter:saturate(1) brightness(1.02);
}

/* The selected tab rises above the front sheet and shares its paper surface. */
.portfolio-tab-hit[aria-current="true"]{
  top:-35px;
  height:42px;
  z-index:6;
  border-bottom-color:transparent;
  border-radius:10px 10px 0 0;
  background:var(--portfolio-paper);
  color:#1E1333;
  font-weight:900;
  filter:none;
}

/* Covers the seam between the active tab and the front sheet so they read as one piece of paper. */
.portfolio-tab-hit[aria-current="true"]::after{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  bottom:-7px;
  height:9px;
  background:var(--portfolio-paper);
  border-left:1px solid rgba(55,39,42,.18);
  border-right:1px solid rgba(55,39,42,.18);
  pointer-events:none;
}

.portfolio-tab-hit--amanda[aria-current="true"]{
  box-shadow:inset 0 4px 0 rgba(165,196,220,1),0 -7px 14px -11px rgba(30,19,51,.5);
}
.portfolio-tab-hit--avventurieri[aria-current="true"]{
  box-shadow:inset 0 4px 0 rgba(152,167,138,1),0 -7px 14px -11px rgba(30,19,51,.5);
}
.portfolio-tab-hit--viboard[aria-current="true"]{
  box-shadow:inset 0 4px 0 rgba(157,133,198,1),0 -7px 14px -11px rgba(30,19,51,.5);
}

.portfolio-tab-hit:focus-visible{
  outline:3px solid rgba(232,209,158,.92);
  outline-offset:2px;
}

.portfolio-sheet--main.is-switching{
  animation:portfolioSheetSwitch .34s cubic-bezier(.2,.8,.2,1);
}
@keyframes portfolioSheetSwitch{
  0%{opacity:.72;transform:translateY(8px) scale(.993)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

.portfolio-media .portfolio-photo{
  opacity:1;
  transition:opacity .24s ease,transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .34s ease,filter .34s ease;
}
.portfolio-media.is-empty .portfolio-photo{
  opacity:0;
  pointer-events:none;
}
.portfolio-project-tags[hidden]{display:none}


.portfolio-sheet--main h3{
  max-width:none;
  margin:0;
  color:var(--portfolio-ink);
  white-space:nowrap;
  font:900 36px/.96 Outfit,system-ui,sans-serif;
  letter-spacing:-.035em;
}

.portfolio-project-type{
  margin:14px 0 21px;
  color:rgba(37,27,50,.56);
  font-size:15px;
  line-height:1.4;
  font-weight:800;
}

.portfolio-project-copy p{
  margin:0 0 13px;
  color:rgba(37,27,50,.79);
  font-size:14px;
  line-height:1.63;
}

.portfolio-project-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:18px;
}

.portfolio-project-tags span{
  padding:6px 9px;
  border:1px solid rgba(30,19,51,.11);
  border-radius:999px;
  background:rgba(30,19,51,.07);
  color:var(--portfolio-ink);
  font:700 9px/1 "JetBrains Mono",monospace;
}

/* External project link: a small taped paper note in the visual gap between
   the dossier and the screenshots. It stays separate from the project sheet. */
.portfolio-project-note{
  position:absolute;
  z-index:52;
  left:clamp(520px,43vw,700px);
  top:610px;
  width:168px;
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:24px 20px 18px;
  border:1px solid rgba(76,59,48,.14);
  border-radius:2px 5px 3px 4px;
  background:var(--portfolio-note);
  color:var(--portfolio-ink);
  box-shadow:0 13px 23px -16px rgba(0,0,0,.62);
  transform:rotate(-3deg);
  transform-origin:50% 45%;
  font:850 18px/1.05 Outfit,system-ui,sans-serif;
  letter-spacing:-.025em;
  text-align:center;
  text-decoration:none;
  transition:transform .22s ease,box-shadow .22s ease;
}

.portfolio-project-note::before{
  content:"";
  position:absolute;
  left:50%;
  top:-10px;
  width:72px;
  height:25px;
  background:rgba(232,209,158,.58);
  border:1px solid rgba(124,101,70,.10);
  box-shadow:0 2px 5px rgba(30,19,51,.08);
  transform:translateX(-50%) rotate(1.8deg);
  opacity:.92;
}

.portfolio-project-note__arrow{
  flex:0 0 auto;
  font-size:19px;
  line-height:1;
}

.portfolio-project-note:hover{
  transform:translateY(-3px) rotate(-1.8deg);
  box-shadow:0 18px 27px -16px rgba(0,0,0,.68);
}

.portfolio-project-note:focus-visible{
  outline:3px solid rgba(232,209,158,.96);
  outline-offset:4px;
}

/* The three project tabs are structural parts of the paper sheets above.
   Amanda is active; Avventurieri and Viboard 2.0 remain visible as tabs in the stack. */

/* Real project screenshots. Group is intentionally pulled toward the paper stack. */
.portfolio-photo{
  --photo-rotation:0deg;
  --photo-hover-rotation:0deg;
  position:absolute;
  z-index:40;
  margin:0;
  padding:12px 12px 30px;
  border:1px solid rgba(30,19,51,.08);
  border-radius:5px;
  background:#fbf7ef;
  box-shadow:0 18px 34px -16px rgba(0,0,0,.45);
  transform:rotate(var(--photo-rotation));
  transform-origin:50% 55%;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .34s ease,filter .34s ease;
  will-change:transform;
}

.portfolio-photo--desktop{
  --photo-rotation:4.2deg;
  --photo-hover-rotation:1.7deg;
  width:520px;
  right:145px;
  top:115px;
}

.portfolio-photo--mobile{
  --photo-rotation:-6deg;
  --photo-hover-rotation:-2.4deg;
  width:445px;
  right:455px;
  top:360px;
}

.portfolio-photo--detail{
  --photo-rotation:6.8deg;
  --photo-hover-rotation:2.8deg;
  width:345px;
  right:58px;
  top:455px;
}

@media(hover:hover) and (pointer:fine){
  .portfolio-photo:hover{
    z-index:75;
    transform:translateY(-14px) rotate(var(--photo-hover-rotation)) scale(1.045);
    box-shadow:0 30px 54px -18px rgba(0,0,0,.62);
    filter:saturate(1.04);
  }
  .portfolio-photo-frame img{
    transition:transform .38s cubic-bezier(.2,.8,.2,1);
  }
  .portfolio-photo:hover .portfolio-photo-frame img{
    transform:scale(1.018);
  }
}

.portfolio-photo-frame{
  width:100%;
  overflow:hidden;
  background:#f0ebe3;
}

.portfolio-photo-frame img{
  display:block;
  width:100%;
  height:auto;
}

.portfolio-photo figcaption{
  position:absolute;
  left:12px;
  bottom:9px;
  color:rgba(30,19,51,.62);
  font:700 10px/1.1 "JetBrains Mono",monospace;
  text-transform:uppercase;
  letter-spacing:.06em;
}

@media(max-width:1380px){
  .portfolio-dossier__heading h2{font-size:68px}
  .portfolio-project-note{left:clamp(500px,43vw,610px);top:650px}

  .portfolio-folder-object{
    left:-600px;
    transform:rotate(10deg) scale(.92);
  }
  .portfolio-photo--desktop{right:95px;width:430px;top:170px}
  .portfolio-photo--mobile{right:285px;width:380px;top:440px}
  .portfolio-photo--detail{right:48px;width:280px;top:555px}
}

@media(max-width:1080px){
  .home-page .projects-sequence.portfolio-dossier{
    min-height:900px;
    border-radius:26px;
  }
  .portfolio-dossier__heading{left:24px;top:24px}
  .portfolio-dossier__heading h2{
    max-width:540px;
    white-space:normal;
    font-size:46px;
  }
  .portfolio-project-note{
    left:clamp(420px,43vw,470px);
    top:700px;
    width:154px;
    min-height:90px;
    font-size:17px;
  }
  .portfolio-folder-object{
    left:-680px;
    bottom:-160px;
    transform:rotate(10deg) scale(.83);
  }
  .portfolio-photo--desktop{right:48px;top:175px;width:320px}
  .portfolio-photo--mobile{right:175px;top:470px;width:290px}
  .portfolio-photo--detail{right:34px;top:600px;width:215px}
}

@media(max-width:720px){
  .home-page .projects-sequence.portfolio-dossier{
    min-height:940px;
    margin-top:18px;
  }
  .portfolio-dossier__heading h2{font-size:clamp(38px,11vw,48px)}
  .portfolio-dossier__eyebrow{font-size:9px}
  .portfolio-project-note{
    left:clamp(250px,42vw,300px);
    top:760px;
    width:138px;
    min-height:82px;
    padding:21px 14px 15px;
    font-size:16px;
  }

  /* Preserve the physical composition on mobile instead of rebuilding it as cards. */
  .portfolio-folder-object{
    left:-780px;
    bottom:-95px;
    transform:rotate(10deg) scale(.68);
  }
  .portfolio-photo--desktop{
    right:-22px;
    top:190px;
    width:225px;
  }
  .portfolio-photo--mobile{
    right:50px;
    top:480px;
    width:205px;
  }
  .portfolio-photo--detail{
    right:-12px;
    top:610px;
    width:150px;
  }
}


/* Avventurieri uses portrait Play Store screenshots, so its three photo slots are
   sized and staggered independently from Amanda's landscape screenshots. */
.projects-sequence[data-active-project="avventurieri"] .portfolio-photo--desktop{
  --photo-rotation:-5.5deg;
  --photo-hover-rotation:-2deg;
  width:260px;
  right:500px;
  top:180px;
}
.projects-sequence[data-active-project="avventurieri"] .portfolio-photo--mobile{
  --photo-rotation:2.8deg;
  --photo-hover-rotation:1deg;
  width:238px;
  right:285px;
  top:330px;
}
.projects-sequence[data-active-project="avventurieri"] .portfolio-photo--detail{
  --photo-rotation:6.2deg;
  --photo-hover-rotation:2.5deg;
  width:216px;
  right:75px;
  top:470px;
}

@media(max-width:1380px){
  .projects-sequence[data-active-project="avventurieri"] .portfolio-photo--desktop{width:230px;right:390px;top:210px}
  .projects-sequence[data-active-project="avventurieri"] .portfolio-photo--mobile{width:210px;right:210px;top:390px}
  .projects-sequence[data-active-project="avventurieri"] .portfolio-photo--detail{width:190px;right:40px;top:520px}
}

@media(max-width:1080px){
  .projects-sequence[data-active-project="avventurieri"] .portfolio-photo--desktop{width:190px;right:300px;top:220px}
  .projects-sequence[data-active-project="avventurieri"] .portfolio-photo--mobile{width:175px;right:150px;top:390px}
  .projects-sequence[data-active-project="avventurieri"] .portfolio-photo--detail{width:155px;right:20px;top:530px}
}

@media(max-width:720px){
  .projects-sequence[data-active-project="avventurieri"] .portfolio-photo--desktop{width:145px;right:205px;top:230px}
  .projects-sequence[data-active-project="avventurieri"] .portfolio-photo--mobile{width:135px;right:95px;top:395px}
  .projects-sequence[data-active-project="avventurieri"] .portfolio-photo--detail{width:120px;right:-5px;top:530px}
}

@media(prefers-reduced-motion:reduce){
  .portfolio-dossier *{transition:none!important;animation:none!important}
  .portfolio-photo:hover{transform:rotate(var(--photo-rotation))}
  .portfolio-project-note:hover{transform:rotate(-3deg)}
}


/* Mobile and tablet keep the layout language from main: heading, tab strip, preview, readable copy.
   Only the visual treatment changes to the physical folder/paper system used on desktop. */
@media(max-width:1180px){
  .home-page .projects-sequence.portfolio-dossier{
    width:calc(100% - 20px);
    height:auto!important;
    min-height:0!important;
    margin:50px 10px 0;
    padding:0 0 12px;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .home-page .portfolio-dossier__heading{
    position:relative;
    inset:auto;
    padding:0 5px 18px;
  }

  .home-page .portfolio-dossier__heading h2{
    max-width:none;
    white-space:normal;
    font:900 clamp(38px,11vw,50px)/.94 Outfit,system-ui,sans-serif;
    letter-spacing:-.045em;
  }

  /* Desktop dossier is hidden here; mobile uses the compact folder composition below. */
  .home-page .portfolio-folder-object,
  .home-page .portfolio-media{
    display:none!important;
  }

  .home-page .portfolio-mobile-folder{
    display:block;
    width:100%;
  }

  .portfolio-mobile-summary{
    position:relative;
    min-height:112px;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "kicker action"
      "title action";
    align-items:center;
    gap:8px 16px;
    padding:22px 22px 20px;
    overflow:hidden;
    border:1px solid rgba(67,43,39,.22);
    border-radius:18px 18px 28px 22px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.16),transparent 26%),
      linear-gradient(180deg,#d2aa91,var(--portfolio-folder) 62%,#a97862);
    color:var(--portfolio-ink);
    box-shadow:0 18px 38px -22px rgba(0,0,0,.58);
    cursor:pointer;
    list-style:none;
  }
  .portfolio-mobile-summary::-webkit-details-marker{display:none}

  .portfolio-mobile-summary::before{
    content:"";
    position:absolute;
    left:20px;
    top:10px;
    width:122px;
    height:13px;
    border:1px solid rgba(55,39,42,.12);
    border-bottom:0;
    border-radius:10px 10px 0 0;
    background:var(--portfolio-paper);
    transform:translateY(-8px);
    box-shadow:inset 0 4px 0 rgba(165,196,220,.96);
  }

  .portfolio-mobile-summary::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:10px;
    height:13px;
    border-radius:4px;
    background:var(--portfolio-paper);
    box-shadow:0 4px 10px -7px rgba(30,19,51,.48);
    transform:rotate(-.35deg);
    opacity:.95;
  }

  .portfolio-mobile-summary-kicker{
    grid-area:kicker;
    align-self:end;
    color:rgba(37,27,50,.57);
    font:700 9px/1 "JetBrains Mono",monospace;
    letter-spacing:.11em;
    text-transform:uppercase;
  }

  .portfolio-mobile-summary strong{
    grid-area:title;
    align-self:start;
    position:relative;
    z-index:1;
    font:900 25px/.95 Outfit,system-ui,sans-serif;
    letter-spacing:-.035em;
  }

  .portfolio-mobile-summary-action{
    grid-area:action;
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:7px;
    justify-self:end;
    padding:9px 11px;
    border:1px solid rgba(37,27,50,.12);
    border-radius:999px;
    background:rgba(255,255,255,.24);
    color:var(--portfolio-ink);
    font:800 11px/1 Outfit,system-ui,sans-serif;
    white-space:nowrap;
  }

  .portfolio-mobile-summary-arrow{
    display:inline-block;
    font-size:16px;
    transition:transform .22s ease;
  }

  .portfolio-mobile-summary-open{display:none}
  .portfolio-mobile-folder[open] .portfolio-mobile-summary-open{display:inline}
  .portfolio-mobile-folder[open] .portfolio-mobile-summary-closed{display:none}
  .portfolio-mobile-folder[open] .portfolio-mobile-summary-arrow{transform:rotate(180deg)}

  .portfolio-mobile-folder[open] .portfolio-mobile-summary{
    min-height:82px;
    margin-bottom:9px;
    border-radius:18px 18px 10px 10px;
  }

  .portfolio-mobile-folder[open] .portfolio-mobile-summary::after{
    opacity:.55;
  }

  .portfolio-mobile-folder:not([open]) .portfolio-mobile-tabs,
  .portfolio-mobile-folder:not([open]) .portfolio-mobile-body{
    display:none;
  }

  .portfolio-mobile-tabs{
    position:relative;
    z-index:3;
    display:flex;
    align-items:flex-end;
    gap:4px;
    padding:0 8px;
    overflow-x:auto;
    overflow-y:visible;
    scrollbar-width:none;
  }
  .portfolio-mobile-tabs::-webkit-scrollbar{display:none}

  .portfolio-mobile-tab{
    flex:0 0 auto;
    min-width:104px;
    height:44px;
    padding:0 14px;
    border:1px solid rgba(55,39,42,.17);
    border-bottom:0;
    border-radius:10px 10px 0 0;
    background:var(--portfolio-paper);
    color:var(--portfolio-ink);
    font:850 12px/1 Outfit,system-ui,sans-serif;
    letter-spacing:-.01em;
    white-space:nowrap;
    box-shadow:0 -5px 11px -9px rgba(30,19,51,.46);
    transform:translateY(5px);
    opacity:.82;
  }

  .portfolio-mobile-tab:nth-child(1){box-shadow:inset 0 4px 0 rgba(165,196,220,.98),0 -5px 11px -9px rgba(30,19,51,.46)}
  .portfolio-mobile-tab:nth-child(2){box-shadow:inset 0 4px 0 rgba(152,167,138,.94),0 -5px 11px -9px rgba(30,19,51,.46)}
  .portfolio-mobile-tab:nth-child(3){box-shadow:inset 0 4px 0 rgba(157,133,198,.94),0 -5px 11px -9px rgba(30,19,51,.46)}

  .portfolio-mobile-tab.is-active{
    position:relative;
    z-index:4;
    height:48px;
    transform:translateY(1px);
    opacity:1;
    color:#1E1333;
    font-weight:900;
  }

  .portfolio-mobile-tab:focus-visible{
    outline:3px solid rgba(232,209,158,.92);
    outline-offset:2px;
  }

  /* Tan folder shell around the paper, like the desktop dossier but flattened for mobile reading. */
  .portfolio-mobile-body{
    position:relative;
    z-index:2;
    margin-top:0;
    padding:15px 10px 12px;
    border:1px solid rgba(67,43,39,.20);
    border-radius:7px 16px 26px 20px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.12),transparent 24%),
      linear-gradient(180deg,#d2aa91,var(--portfolio-folder) 58%,#a97862);
    box-shadow:0 22px 48px -22px rgba(0,0,0,.58);
  }

  .portfolio-mobile-body::before{
    content:"";
    position:absolute;
    left:18px;
    right:14px;
    top:8px;
    height:8px;
    border-radius:999px;
    background:rgba(83,52,44,.13);
    filter:blur(4px);
    pointer-events:none;
  }

  .portfolio-mobile-sheet{
    position:relative;
    min-height:0;
    padding:14px 14px 18px;
    overflow:hidden;
    border:1px solid rgba(55,39,42,.11);
    border-radius:5px 5px 12px 8px;
    background:var(--portfolio-paper);
    color:var(--portfolio-ink);
    box-shadow:0 15px 26px -17px rgba(0,0,0,.46);
    transform:rotate(-.35deg);
    transform-origin:50% 8%;
  }

  .portfolio-mobile-sheet.is-switching{
    animation:portfolioSheetSwitch .34s cubic-bezier(.2,.8,.2,1);
  }

  /* Same preview slot from main, now presented as a loose print on top of the file sheet. */
  .portfolio-mobile-preview{
    position:relative;
    width:100%;
    height:178px;
    overflow:hidden;
    border:8px solid #fbf7ef;
    border-bottom-width:20px;
    border-radius:3px;
    background:#cbbdcc;
    box-shadow:0 12px 23px -15px rgba(30,19,51,.48);
    transform:rotate(.6deg);
  }

  .portfolio-mobile-preview img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
  }

  .portfolio-mobile-preview-cover{
    width:100%;
    height:100%;
    display:grid;
    align-content:end;
    gap:5px;
    padding:18px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.17),transparent 35%),
      linear-gradient(160deg,#c8b6ca,#9d85c6);
    color:var(--portfolio-ink);
  }

  .portfolio-mobile-folder[data-project="avventurieri"] .portfolio-mobile-preview-cover{
    background:
      linear-gradient(145deg,rgba(255,255,255,.16),transparent 35%),
      linear-gradient(160deg,#bac5ad,#98A78A);
  }

  .portfolio-mobile-preview-cover strong{
    max-width:16ch;
    font:900 28px/.94 Outfit,system-ui,sans-serif;
    letter-spacing:-.04em;
  }

  .portfolio-mobile-preview-cover span{
    font:700 10px/1 "JetBrains Mono",monospace;
    text-transform:uppercase;
    letter-spacing:.08em;
    opacity:.58;
  }

  .portfolio-mobile-copy{
    position:relative;
    padding:22px 5px 2px;
  }

  .portfolio-mobile-copy h3{
    margin:0;
    color:var(--portfolio-ink);
    font:900 28px/.98 Outfit,system-ui,sans-serif;
    letter-spacing:-.038em;
  }

  .portfolio-mobile-type{
    margin:10px 0 18px;
    color:rgba(37,27,50,.58);
    font-size:14px;
    line-height:1.4;
    font-weight:800;
  }

  .portfolio-mobile-text p{
    margin:0 0 13px;
    color:rgba(37,27,50,.80);
    font-size:14px;
    line-height:1.6;
  }

  .portfolio-mobile-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:17px;
    padding-right:70px;
  }

  .portfolio-mobile-tags span{
    padding:6px 8px;
    border:1px solid rgba(30,19,51,.11);
    border-radius:999px;
    background:rgba(30,19,51,.065);
    color:var(--portfolio-ink);
    font:700 9px/1 "JetBrains Mono",monospace;
  }

  .portfolio-project-note{display:none}

  .portfolio-mobile-link{
    width:max-content;
    max-width:100%;
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:20px;
    color:var(--portfolio-ink);
    font:850 14px/1.2 Outfit,system-ui,sans-serif;
    text-decoration:underline;
    text-decoration-thickness:1.5px;
    text-underline-offset:4px;
  }

  .portfolio-mobile-link:focus-visible{
    outline:3px solid rgba(122,63,103,.55);
    outline-offset:4px;
    border-radius:3px;
  }

}

@media(max-width:360px){
  .portfolio-mobile-tab{min-width:96px;padding-inline:11px;font-size:11px}
  .portfolio-mobile-sheet{padding-inline:11px}
}


/* Mobile/tablet portfolio closed-state cleanup */
@media(max-width:1180px){
  .portfolio-mobile-summary{
    min-height:104px;
    margin-top:16px;
    grid-template-columns:minmax(0,1fr) 48px;
    grid-template-areas:
      "kicker action"
      "title action";
    gap:7px 14px;
    padding:21px 20px 18px;
    overflow:visible;
    border-radius:17px 24px 26px 22px;
    background:
      linear-gradient(145deg,rgba(255,255,255,.11),transparent 32%),
      linear-gradient(180deg,#d0aa92,var(--portfolio-folder) 68%,#aa7a64);
    box-shadow:0 15px 32px -20px rgba(0,0,0,.58);
  }

  /* One clear folder tab. The old fake paper strips made the closed state look like
     several unrelated UI elements stacked on top of each other. */
  .portfolio-mobile-summary::before{
    left:18px;
    top:-15px;
    width:126px;
    height:28px;
    border:1px solid rgba(67,43,39,.18);
    border-bottom:0;
    border-radius:14px 14px 0 0;
    background:#caa189;
    transform:none;
    box-shadow:none;
  }

  .portfolio-mobile-summary::after{display:none}

  .portfolio-mobile-summary-kicker{
    position:relative;
    z-index:1;
    align-self:end;
    font-size:9px;
    letter-spacing:.13em;
  }

  .portfolio-mobile-summary strong{
    max-width:100%;
    padding-right:2px;
    font:900 clamp(25px,7.4vw,31px)/.92 Outfit,system-ui,sans-serif;
    letter-spacing:-.042em;
    text-wrap:balance;
  }

  .portfolio-mobile-summary-action{
    width:46px;
    height:46px;
    padding:0;
    justify-content:center;
    align-self:center;
    border:1px solid rgba(37,27,50,.10);
    border-radius:50%;
    background:rgba(255,255,255,.19);
  }

  .portfolio-mobile-summary-arrow{
    font-size:22px;
    line-height:1;
  }

  .portfolio-mobile-folder[open] .portfolio-mobile-summary{
    min-height:76px;
    margin-top:16px;
    margin-bottom:10px;
    padding-top:18px;
    padding-bottom:16px;
    border-radius:17px 24px 16px 14px;
  }

  .portfolio-mobile-folder[open] .portfolio-mobile-summary::before{
    top:-15px;
  }
}


/* Tablet portfolio: use the compact folder presentation so copy and screenshots never clip. */
@media(min-width:621px) and (max-width:1180px){
  #projectsSequence{scroll-margin-top:calc(var(--nav-height) + 30px)}
  .home-page .projects-sequence.portfolio-dossier{
    width:calc(100% - (var(--site-edge) * 2));
    margin:34px var(--site-edge) 0;
    padding-bottom:30px;
  }
  .home-page .portfolio-dossier__heading{
    padding-left:clamp(12px,2vw,24px);
    padding-right:clamp(12px,2vw,24px);
  }
  .home-page .portfolio-mobile-folder{
    width:min(760px,100%);
    max-width:760px;
    margin:0 auto;
  }
  .portfolio-mobile-preview{
    height:auto;
    aspect-ratio:16/9;
  }
  .portfolio-mobile-sheet{
    padding:18px 20px 24px;
  }
  .portfolio-mobile-copy{
    padding:26px 8px 4px;
  }
  .portfolio-mobile-copy h3{font-size:34px}
  .portfolio-mobile-text p{font-size:15px;line-height:1.65}
}