/* ==========================================================================
   Carmela Lorraine P. Marasigan - General Virtual Assistant
   Card-catalog world. Manila card stock, an oak drawer with a brass nameplate,
   and typed index cards. Palette and type are committed, not themed.
   ========================================================================== */

:root{
  /* ground + card stock */
  --manila:#e8dcc0;
  --manila-2:#e0d2b2;
  --card:#f6efdc;
  --card-2:#f1e8d0;
  /* ink */
  --ink:#211f1a;
  --ink-soft:#5c5648;
  /* drawer + hardware */
  --wood:#6b4b2f;
  --wood-dk:#4e3620;
  --brass:#b9962f;
  --brass-lt:#e0c98d;
  --brass-ink:#735613;
  /* directive */
  --tab:#b03a2e;
  --tab-dk:#8f2c22;
  /* rules */
  --rule:#cdbf9c;
  --rule-card:rgba(246,239,220,.22);

  --serif:"Bitter",Georgia,"Times New Roman",serif;
  --mono:"Courier Prime","Courier New",ui-monospace,monospace;

  --wrap:min(1120px,93vw);
  --pad-inline:clamp(1.05rem,4vw,1.5rem);
  --radius:4px;
  --shadow-card:0 18px 30px -26px rgba(33,31,26,.9);
  --shadow-stamp:0 12px 22px -16px rgba(33,31,26,.95);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--manila);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--tab);color:var(--card)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:3px}

/* --- shared bits ------------------------------------------------------- */
.wrap{width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-inline)}
.type{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.skip{position:absolute;left:1rem;top:-3rem;z-index:100;background:var(--ink);color:var(--card);
  padding:.7rem 1rem;border-radius:var(--radius);font-family:var(--mono);font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:1rem}
section{scroll-margin-top:5.5rem}

/* --- buttons ----------------------------------------------------------- */
.btn,.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  line-height:1.3;text-decoration:none;cursor:pointer;border-radius:var(--radius);
  padding:.8rem 1.25rem;
  transition:transform .18s var(--ease),background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn{
  background:var(--tab);color:var(--card);border:1.5px solid transparent;
  box-shadow:var(--shadow-stamp);
}
.btn:hover{background:var(--tab-dk);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:calc(.8rem - 1.5px) calc(1.25rem - 1.5px)}
.btn-ghost:hover{background:var(--ink);color:var(--card);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0)}
/* secondary control on the oak drawer surfaces */
.btn-ghost.is-dark{color:var(--card);border-color:rgba(246,239,220,.55)}
.btn-ghost.is-dark:hover{background:var(--card);color:var(--ink);border-color:var(--card)}
.link{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px}
.link:hover{color:var(--tab);border-color:var(--tab)}

/* --- header / drawer --------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,var(--wood),var(--wood-dk));
  box-shadow:0 24px 40px -30px rgba(33,31,26,.9), inset 0 1px 0 rgba(255,255,255,.14);
}
.site-header .wrap{padding-block:.7rem}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{
  display:inline-flex;flex-direction:column;gap:.24rem;text-decoration:none;
  background:var(--brass);color:#241a06;border-radius:3px;padding:.5rem .85rem;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
}
.brand b{font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.05em}
.brand span{font-family:var(--mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:#3a2a05}
.nav{display:flex;align-items:center;gap:.2rem;flex-wrap:wrap}
.nav a{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--card);opacity:.82;padding:.5rem .6rem;border-radius:3px;
  transition:background .18s var(--ease),opacity .18s var(--ease);
}
.nav a:hover{opacity:1;background:rgba(246,239,220,.12)}
.header-cta{margin-left:.4rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.header-cta .btn,.header-cta .btn-ghost{padding:.55rem .85rem;font-size:.66rem;letter-spacing:.07em}

.nav-toggle{
  display:none;align-items:center;gap:.5rem;
  background:transparent;color:var(--card);border:1.5px solid rgba(246,239,220,.5);
  border-radius:3px;padding:.5rem .8rem;
  font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
}
.nav-toggle .bars{display:inline-grid;gap:4px}
.nav-toggle .bars i{width:16px;height:2px;background:currentColor;display:block;transition:transform .2s var(--ease),opacity .2s var(--ease)}

@media (max-width:880px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:.2rem;
    background:linear-gradient(180deg,var(--wood),var(--wood-dk));
    border-bottom:3px solid var(--wood-dk);
    padding:.6rem var(--pad-inline) 1.1rem;display:none;
    box-shadow:0 30px 44px -30px rgba(33,31,26,.95);
  }
  .nav a{padding:.8rem .6rem;font-size:.84rem}
  .header-cta{margin:.5rem 0 0;flex-direction:column;align-items:stretch}
  .header-cta .btn,.header-cta .btn-ghost{width:100%;justify-content:center;padding:.8rem 1rem;font-size:.74rem}
  .nav.open{display:flex}
}

/* --- hero / index cards ------------------------------------------------ */
.hero{padding-top:clamp(2rem,5vw,3.6rem);padding-bottom:clamp(1.2rem,3vw,2.2rem)}
.fan{display:grid;gap:0}
.card{
  position:relative;background:var(--card);color:var(--ink);
  border:1px solid var(--rule);border-radius:3px;
  padding:clamp(1.2rem,3vw,2rem);
  box-shadow:var(--shadow-card);
}
.card + .card{margin-top:-6px}
/* mobile: headline full width, then the portrait ⟷ byline author-badge row */
.card.head{
  z-index:3;transform:rotate(-.4deg);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"title title" "photo byline";
  column-gap:1.1rem;row-gap:1.1rem;align-items:start;
}
.card.head h1{grid-area:title}
.card.head .byline{grid-area:byline;margin-top:0}
@media (min-width:760px){
  .card.head{
    grid-template-columns:1fr auto;
    grid-template-areas:"title photo" "byline photo";
    column-gap:clamp(1.4rem,3.5vw,2.6rem);row-gap:0;
  }
  .card.head .byline{margin-top:1rem}
}
.card.head2{z-index:2;transform:rotate(.5deg)}
.hero h1{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.9rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.02em;
  margin:.2rem 0 0;max-width:24ch;
}
.hero h1 .tab{color:var(--tab)}
.hero h1 em{font-style:italic}
.byline{margin:1rem 0 0;display:grid;gap:.25rem;max-width:72ch}
.byline > div{display:grid;grid-template-columns:6.5rem 1fr;gap:.6rem;align-items:baseline}
.byline dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink);font-weight:700}
.byline dd{margin:0;font-family:var(--mono);font-size:.8rem;line-height:1.6;color:var(--ink-soft)}
@media (max-width:560px){.byline > div{grid-template-columns:1fr;gap:0}}

/* hero photo - an ID portrait mounted on the card with archival corners */
.hero-photo{
  position:relative;margin:0;justify-self:start;
  grid-area:photo;
  width:clamp(88px,26vw,120px);
  rotate:-1deg;
}
@media (min-width:760px){
  .hero-photo{justify-self:end;width:clamp(152px,44vw,214px)}
}
.hero-photo img{
  width:100%;height:auto;border-radius:2px;
  /* card-stock mount: 8px cream frame, 1px rule edge, then the card's resting shadow */
  box-shadow:
    0 0 0 8px var(--card-2),
    0 0 0 9px var(--rule),
    var(--shadow-card);
}
/* four archival photo corners, drawn as CSS triangles over the print */
.hero-photo::after{
  content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:560/792;pointer-events:none;
  background-repeat:no-repeat;background-size:16px 16px;
  background-position:top left,top right,bottom left,bottom right;
  background-image:
    linear-gradient(to bottom right,rgba(78,54,32,.9) 50%,transparent 50%),
    linear-gradient(to bottom left,rgba(78,54,32,.9) 50%,transparent 50%),
    linear-gradient(to top right,rgba(78,54,32,.9) 50%,transparent 50%),
    linear-gradient(to top left,rgba(78,54,32,.9) 50%,transparent 50%);
}
.hero-photo figcaption{
  margin-top:.6rem;text-align:center;white-space:nowrap;
  font-family:var(--mono);font-weight:700;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brass-ink);
}
@media (min-width:760px){.hero-photo figcaption{margin-top:1.4rem}}
/* in the mobile badge row the AUTHOR field beside the portrait already names
   her, so the mounted-print label is dropped there - it returns at ≥760px */
@media (max-width:759px){.hero-photo figcaption{display:none}}

.rule-rows{margin:0;display:grid;gap:0}
.rule-row{display:grid;grid-template-columns:9rem 1fr;gap:1rem;align-items:baseline;
  padding:.7rem 0;border-bottom:1px dotted var(--rule)}
.rule-row dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink);font-weight:700}
.rule-row dd{margin:0;color:var(--ink-soft)}
@media (max-width:560px){.rule-row{grid-template-columns:1fr;gap:.2rem}}

.actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.5rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--ink);border:1px solid var(--rule);border-radius:3px;padding:.4rem .7rem;background:var(--card-2);
}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--tab)}

/* one authored moment: the cards rise into the drawer */
@media (prefers-reduced-motion:no-preference){
  .hero .reveal{opacity:0;transform:translateY(12px);animation:rise .6s var(--ease) forwards}
  .hero .card.head h1.reveal{animation-delay:.02s}
  .hero .card.head .byline.reveal{animation-delay:.14s}
  .hero .card.head .hero-photo.reveal{animation-delay:.22s}
  .hero .card.head2 .reveal:nth-child(1){animation-delay:.15s}
  .hero .card.head2 .reveal:nth-child(2){animation-delay:.25s}
  .hero .card.head2 .reveal:nth-child(3){animation-delay:.35s}
  .hero .card.head2 .reveal:nth-child(4){animation-delay:.45s}

  /* the mounted print lifts off the card and settles back.
     the transform lives on the img and the corner overlay, never the figure,
     so the filled `rise` animation on .hero-photo can't override it. */
  @keyframes photo-nudge{
    0%,100%{transform:none}
    40%{transform:translateY(-5px) rotate(1.6deg)}
  }
  .hero-photo.is-nudged img,
  .hero-photo.is-nudged::after{animation:photo-nudge .42s var(--ease)}

  /* pointer devices only - avoids a sticky hover on touch */
  @media (hover:hover) and (pointer:fine){
    .hero-photo img,
    .hero-photo::after{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
    .hero-photo:hover img,
    .hero-photo:hover::after{transform:translateY(-4px) rotate(1.4deg)}
    .hero-photo:hover img{
      box-shadow:0 0 0 8px var(--card-2),0 0 0 9px var(--rule),0 22px 34px -24px rgba(33,31,26,.9);
    }
  }
}
@keyframes rise{to{opacity:1;transform:none}}

/* --- sections ---------------------------------------------------------- */
.section{padding-block:clamp(2.4rem,6vw,4.2rem)}
.section.band{background:var(--manila-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.6rem;
  border-bottom:2px solid var(--ink);padding-bottom:.6rem}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.2rem);
  letter-spacing:-.01em;margin:0;line-height:1.15}
.sec-lede{max-width:62ch;color:var(--ink-soft);margin:1.2rem 0 0}

/* --- catalog card grid ------------------------------------------------- */
.grid{display:grid;gap:1.1rem;margin-top:1.6rem}
@media (min-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.cat{
  background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:1.1rem 1.15rem;
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:.5rem;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.cat:hover{transform:translateY(-3px);box-shadow:0 22px 34px -24px rgba(33,31,26,.9)}
.cat .no{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tab);font-weight:700}
.cat h3{margin:0;font-family:var(--serif);font-size:1.08rem;font-weight:600;line-height:1.3}
.cat p{margin:0;font-family:var(--mono);font-size:.82rem;line-height:1.6;color:var(--ink-soft)}
.cat .see{margin-top:auto;padding-top:.55rem;border-top:1px dotted var(--rule);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--wood)}
.cat .see b{color:var(--tab);font-weight:700}

/* --- guide / cross-reference notes ------------------------------------- */
.notes{margin-top:1.6rem;display:grid;gap:1.2rem}
.note{display:grid;grid-template-columns:11rem 1fr;gap:1.3rem;padding-bottom:1.2rem;border-bottom:1px dotted var(--rule)}
.note:last-child{border-bottom:0;padding-bottom:0}
.note .meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.note .meta b{display:block;color:var(--tab);font-size:.76rem;margin-bottom:.25rem}
.note h3{margin:0 0 .3rem;font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.3}
.note p{margin:0;color:var(--ink-soft)}
.note p strong{color:var(--ink);font-weight:600}
@media (max-width:640px){.note{grid-template-columns:1fr;gap:.4rem}}

/* --- reference notes (FAQ) --------------------------------------------- */
.faq{margin-top:1.6rem;display:grid;gap:.7rem}
.faq details{background:var(--card);border:1px solid var(--rule);border-radius:3px;box-shadow:var(--shadow-card)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.15rem;position:relative;
  font-family:var(--serif);font-weight:600;font-size:1.05rem;line-height:1.5;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-weight:700;font-size:1.15rem;color:var(--tab);
}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--tab)}
.faq .answer{padding:0 1.15rem 1.2rem;color:var(--ink-soft);max-width:72ch}
.faq .answer p{margin:0 0 .7rem}
.faq .answer p:last-child{margin-bottom:0}

/* --- contact drawer ---------------------------------------------------- */
.contact-card{
  background:linear-gradient(180deg,var(--wood),var(--wood-dk));color:var(--card);
  border-radius:var(--radius);padding:1.75rem;display:grid;gap:1.6rem;
  box-shadow:0 24px 40px -30px rgba(33,31,26,.9), inset 0 1px 0 rgba(255,255,255,.14);
}
@media (min-width:700px){.contact-card{padding:2.6rem}}
@media (min-width:820px){.contact-card{grid-template-columns:1.4fr .6fr;align-items:center}}
.contact-card h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.1;margin:0}
.contact-card p{color:rgba(246,239,220,.82);margin:.8rem 0 1.4rem;max-width:52ch}
.contact-list{display:grid;gap:.7rem;align-content:center}
.contact-list .type{color:var(--brass-lt)}
.contact-list a{
  text-decoration:none;font-family:var(--mono);font-size:.82rem;font-weight:700;
  display:inline-flex;align-items:center;gap:.6rem;color:var(--card);
}
.contact-list a:hover{color:var(--brass)}
.contact-list a svg{flex:none}

/* --- footer / colophon ------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--card);padding:2.6rem 0;margin-top:0}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.6rem}
.foot .plate2{font-family:var(--mono);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.foot .plate2 span{display:block;font-weight:400;letter-spacing:.04em;text-transform:none;font-size:.8rem;opacity:.72;margin-top:.5rem}
.socials{display:flex;flex-wrap:wrap;gap:.6rem}
.socials a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;text-decoration:none;
  border:1px solid rgba(246,239,220,.4);border-radius:3px;padding:.45rem .75rem;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.socials a:hover{background:var(--card);color:var(--ink);border-color:var(--card)}
.legal{margin-top:1.8rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;opacity:.62}

/* --- dark surfaces keep a light focus ring ----------------------------- */
.site-header :focus-visible,
.site-footer :focus-visible,
.contact-card :focus-visible{outline-color:var(--card)}

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