/* Midnapore Art College. One stylesheet, hand written, no framework - it is
   under 10 KB so a phone on 4G has it before the first paragraph is read. */
:root{
  --red:#a01818; --brick:#a04022; --deep:#7a2e14; --gold:#b08d3f;
  --ink:#1c1512; --ink2:#332620; --paper:#faf6f1; --paper2:#f3ece4;
  --body:#4f4139; --soft:#8a7469; --line:#e4dbd2;
  --serif:'Playfair Display',Georgia,serif; --bn:'Noto Serif Bengali',serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);
  font:400 16px/1.7 Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 26px}
.bn{font-family:var(--bn)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border-radius:8px}

/* top bar */
.top{position:sticky;top:0;z-index:60;background:rgba(28,21,18,.97);border-bottom:1px solid #2e241f}
.top .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand img{width:32px}
.brand .n{font:800 15px/1 var(--serif);color:#fff;display:block}
.brand .s{font:600 9px/1 Inter;letter-spacing:.18em;text-transform:uppercase;color:#a58d80;margin-top:5px;display:block}
.nav{display:flex;gap:22px;align-items:center}
.nav a{font:500 13.5px Inter;color:#c9b4a8;text-decoration:none;transition:color .15s}
.nav a:hover,.nav a.on{color:#fff}
.nav .sep{width:1px;height:18px;background:#3a2c25}
.nav a.school{color:#d88164;font-weight:600}
/* A centre teacher, a member of staff and a guardian all used to be told an
   address to type. One word in the menu, and the three doors under it. */
.signin{position:relative}
.signin-btn{display:flex;align-items:center;gap:6px;background:none;cursor:pointer;
  border:1px solid rgba(216,129,100,.5);border-radius:5px;padding:5px 11px;color:#e8d2c7;
  font:500 13.5px Inter}
.signin-btn svg{transition:transform .15s}
.signin.open .signin-btn,.signin-btn:hover,.signin.on .signin-btn{
  background:var(--brick);border-color:var(--brick);color:#fff}
.signin.open .signin-btn svg{transform:rotate(180deg)}
.signin-menu{display:none;position:absolute;top:calc(100% + 9px);right:0;min-width:262px;
  background:#fff;border:1px solid #e4dbd2;border-radius:11px;padding:6px;z-index:80;
  box-shadow:0 14px 34px rgba(28,21,18,.17)}
.signin.open .signin-menu{display:block}
.signin-menu a{display:block;padding:10px 13px;border-radius:8px;text-decoration:none;color:#241b15}
.signin-menu a:hover{background:#faf5f2;color:#241b15}
.signin-menu a b{display:block;font:700 14.5px Inter;color:#241b15}
.signin-menu a span{display:block;font:500 12.5px Inter;color:#8a7469;margin-top:1px}
.signin-menu a.all{border-top:1px solid #f1eae5;margin-top:4px;border-radius:0 0 8px 8px;
  font:600 12.5px Inter;color:#a04022}
.nav a.school:hover,.nav a.school.on{color:#f0a184}
.btn{display:inline-block;font:600 13px Inter;padding:9px 17px;border-radius:6px;text-decoration:none;
  transition:.15s;border:0;cursor:pointer}
.btn.solid{background:var(--brick);color:#fff}
.btn.solid:hover{background:#8c3720}
.btn.ghost{border:1px solid #4a3a32;color:#e5d7cd}
.btn.ghost:hover{border-color:#7a6055;color:#fff}
.btn.light{background:#fff;border:1px solid var(--line);color:var(--body)}
.btn.light:hover{background:var(--paper2)}
.btn.big{padding:13px 26px;font-size:14px;border-radius:7px}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:#e5d7cd;margin:4px 0;border-radius:2px}

/* hero and banners */
.hero,.banner{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.hero::after,.banner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1000px 480px at 78% 6%, rgba(160,64,34,.30), transparent 62%)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;
  align-items:center;padding-top:80px;padding-bottom:80px}
.banner .wrap{position:relative;z-index:1;padding-top:56px;padding-bottom:56px}
.kicker{font:700 11px Inter;letter-spacing:.24em;text-transform:uppercase;color:#d88164}
.hero h1{font:800 clamp(34px,5vw,58px)/1.06 var(--serif);margin:20px 0 0;color:#fff;letter-spacing:-.015em}
.hero h1 em{font-style:italic;font-weight:500;color:#e8b79e}
.banner h1{font:800 clamp(28px,4.2vw,44px)/1.14 var(--serif);margin:14px 0 0;color:#fff;letter-spacing:-.015em}
.bnline{font:500 18px/1.7 var(--bn);color:#c9ab9c;margin:18px 0 0}
.hero .lead,.banner p{color:#c2ada1;font-size:16.5px;margin:20px 0 0;max-width:34em}
.crumb{font:600 11px Inter;letter-spacing:.16em;text-transform:uppercase;color:#a58d80}
.crumb a{color:#d88164;text-decoration:none}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.facts{display:flex;gap:36px;flex-wrap:wrap;margin-top:42px;padding-top:24px;border-top:1px solid #33261f}
.facts div span{display:block;font:800 24px var(--serif);color:#fff}
.facts div small{font:600 10.5px Inter;letter-spacing:.15em;text-transform:uppercase;color:#8a7166}
.seal{justify-self:center;text-align:center}
.seal img{width:200px;margin:0 auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.45))}
.seal .cap{margin-top:18px;font:600 10px Inter;letter-spacing:.2em;text-transform:uppercase;color:#8a7166;line-height:2}

/* sections */
section{padding:76px 0}
section.tight{padding:52px 0}
section.dark{background:var(--ink);color:#fff}
section.dark h2{color:#fff} section.dark .sub{color:#a89489}
section.alt{background:var(--paper2)}
.eyebrow{font:700 11px Inter;letter-spacing:.22em;text-transform:uppercase;color:var(--brick)}
section.dark .eyebrow{color:#d88164}
h2{font:700 clamp(26px,3.3vw,36px)/1.16 var(--serif);color:var(--ink);margin:14px 0 0;letter-spacing:-.01em}
h3{font:700 20px var(--serif);color:var(--ink);margin:0 0 8px}
.sub{color:var(--soft);margin:14px 0 0;max-width:44em;font-size:16px}
.head{margin-bottom:42px}
.head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap}
.prose p{margin:0 0 16px}
.prose p:last-child{margin-bottom:0}

/* cards and grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px}
.card.link{text-decoration:none;display:block;transition:.18s}
.card.link:hover{box-shadow:0 16px 40px -24px rgba(60,30,15,.4);transform:translateY(-2px)}
.inst{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:.2s}
.inst:hover{box-shadow:0 18px 44px -22px rgba(60,30,15,.35);transform:translateY(-2px)}
.inst.link{text-decoration:none;color:inherit}
.inst.link .go{color:var(--brick);font-weight:600}
.inst.link:hover .go{text-decoration:underline}
.inst .band{padding:15px 26px;font:700 10.5px Inter;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;background:var(--red)}
.inst.b .band{background:var(--ink2)}
.inst .in{padding:28px 26px;flex:1;display:flex;flex-direction:column}
.inst .meta{font:600 12px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:2px 0 14px}
.inst .go{margin-top:auto;font:600 13.5px Inter;color:var(--brick);text-decoration:none;padding-top:6px}
.inst .go:hover{text-decoration:underline}

/* tables */
table.t{width:100%;border-collapse:collapse;font-size:15px;background:#fff;
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.t th{text-align:left;font:700 10.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
  padding:14px 18px;background:var(--paper2);border-bottom:1px solid var(--line)}
table.t td{padding:14px 18px;border-bottom:1px solid #f3ece4;color:var(--body);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t td:first-child{font-weight:600;color:var(--ink)}
table.t td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* notices */
.note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brick);
  border-radius:0 12px 12px 0;padding:22px 24px;text-decoration:none;display:block;transition:.18s}
.note:hover{box-shadow:0 14px 34px -20px rgba(60,30,15,.4);transform:translateY(-2px)}
.note time{font:700 10.5px Inter;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.note h4{font:700 17px/1.35 var(--serif);color:var(--ink);margin:9px 0 7px}
.note p{margin:0;font-size:13.5px;color:var(--soft)}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gal figure{margin:0}
.gal img{border-radius:10px;width:100%;background:var(--paper2)}
.gal figcaption{padding:11px 2px 0}
.gal .t{font:600 14.5px Inter;color:var(--ink)}
.gal .c{font-size:12.5px;color:var(--soft)}
.ph{background:repeating-linear-gradient(45deg,#efe7dd,#efe7dd 9px,#e8ded2 9px,#e8ded2 18px);
  border:1px dashed #cdbdab;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:#a8968a;font:600 10px Inter;letter-spacing:.16em;text-transform:uppercase;text-align:center;
  padding:16px;line-height:2}
section.dark .ph{background:linear-gradient(150deg,#2a201b,#201814);border-color:#3a2c25;color:#6b5449}

/* footer */
footer{background:var(--ink);color:#a89489;padding:64px 0 30px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px}
footer h5{font:700 10.5px Inter;letter-spacing:.2em;text-transform:uppercase;color:#d88164;margin:0 0 14px}
footer a{color:#a89489;text-decoration:none;display:block;padding:5px 0}
footer a:hover{color:#fff}
footer .fb{display:flex;align-items:center;gap:12px;margin-bottom:14px}
footer .fb .n{font:700 16px var(--serif);color:#fff}
footer .addr{line-height:1.9}
footer .hours{margin-top:16px;font-size:13px;line-height:1.75}
footer .hours div{display:flex;gap:10px;justify-content:space-between;max-width:290px;
  border-bottom:1px solid #241b16;padding:3px 0}
footer .hours div:last-child{border-bottom:0}
footer .hours span{color:#7a6459}
footer .hours b{color:#c9b4a8;font-weight:600;text-align:right}
footer .regn{margin-top:14px;font-size:12.5px;color:#7a6459}
footer .regn a{display:inline;color:#a89489}
.legal{margin-top:42px;padding-top:20px;border-top:1px solid #2e241f;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12px;color:#7a6459}

.empty{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:42px 26px;text-align:center;
  color:var(--soft);font-size:14.5px}

@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:40px;padding-top:52px;padding-bottom:56px}
  .seal{order:-1}.seal img{width:140px}
  .grid2,.grid3,.grid4,.gal{grid-template-columns:1fr}
  .grid4,.gal{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  section{padding:56px 0}
  .burger{display:block}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;background:#1c1512;flex-direction:column;
    align-items:flex-start;gap:0;padding:8px 26px 18px;border-bottom:1px solid #2e241f}
  .nav.open{display:flex}
  .nav a{padding:11px 0;width:100%;font-size:15px}
  .nav .sep{display:none}
  /* Stacked, not floating: on a telephone the whole menu is already a list, and
     a box hanging off the side of it has nowhere to hang. */
  .signin{width:100%}
  .signin-btn{width:100%;justify-content:space-between;font-size:15px;padding:10px 12px}
  .signin-menu{position:static;min-width:0;width:100%;margin-top:8px;box-shadow:none;
    background:#241b15;border-color:#3a2c25}
  .signin-menu a{color:#e5d7cd;padding:11px 12px}
  .signin-menu a:hover{background:#2e241f;color:#fff}
  .signin-menu a b{color:#fff;font-size:15px}
  .signin-menu a span{color:#a58d80}
  .signin-menu a.all{border-top-color:#3a2c25;color:#d88164}
}
@media(max-width:560px){
  .grid4,.gal{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}

  /* ---- the telephone ------------------------------------------------
     Measured at 375px on the live site rather than guessed at, and every
     rule below is here because something was actually wrong.

     The table of label-and-value: "Subhas Nagar, Midnapore, Dist. Paschim
     Medinipur" ran into a cell that had already given half the row to the
     word "Address", and six pixels went off the right-hand edge - enough
     to make the whole page slide sideways under a thumb, on the one page
     somebody opens to find out where the College is. */
  table.t td{padding:12px 13px;overflow-wrap:anywhere}
  table.t td:first-child{width:34%;padding-right:8px}
  table.t th{padding-left:13px;padding-right:13px;font-size:11.5px}

  /* Thumbs, not mouse pointers. The buttons were 34px and the links in the
     footer 13. A finger lands on about 44.

     The burger is given height only. Given min-width:44px as well it grew
     past the right edge of the header and put the whole page 11px over -
     a fix for a tap target that created a sideways scroll on every page.
     Measuring after the change is the only reason that was caught. */
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .burger{min-height:44px}
  .crumb a,.regn a,.fgrid a,table.t td a{display:inline-block;padding:9px 0}

  /* The smallest type on the site was 10.5px - a caption on a desk, an eye
     test on a telephone. The one left at 10px is "Estd. 2001" inside the
     logo, which is a mark rather than something anybody reads. */
  .kicker,.eyebrow{font-size:12px}
  .facts div small{font-size:12px;letter-spacing:.1em}
  .inst .band{font-size:11.5px;letter-spacing:.14em}
  .fgrid h5{font-size:12px}
}
}

/* ---- the admission form -------------------------------------------------
   Used once, by somebody who has never seen this site before, often on a
   telephone. Bigger than the rest of the site on purpose. */
.applyform .ff{margin-bottom:15px}
.applyform label{display:block;font:600 13px Inter;color:var(--body);margin-bottom:6px}
.applyform input[type=text],.applyform input[type=tel],.applyform input[type=email],
.applyform input[type=date],.applyform select,.applyform textarea{
  width:100%;padding:12px 13px;border:1px solid #ded6d1;border-radius:9px;background:#fff;
  font:500 15px Inter,sans-serif;color:var(--ink)}
.applyform textarea{line-height:1.6;resize:vertical}
.applyform input:focus,.applyform select:focus,.applyform textarea:focus{
  outline:0;border-color:var(--brick);box-shadow:0 0 0 3px rgba(160,64,34,.14)}
.applyform .two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:560px){.applyform .two{grid-template-columns:1fr;gap:0}}
/* Off the page, not display:none - a machine skips what is hidden and fills in
   what is merely somewhere else, which is the whole idea. */
.applyform .nothere{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.applyform .files{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:560px){.applyform .files{grid-template-columns:1fr}}
.applyform .fpick{display:block;border:1px dashed #d8cec7;border-radius:10px;padding:12px 14px;
  background:#fbf8f6;margin:0}
.applyform .fpick span{display:block;font:600 13.5px Inter;color:var(--ink);margin-bottom:7px}
.applyform .fpick input{font-size:13px;width:100%}
.applyform .payrow2{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.applyform .payrow2 img{border:1px solid var(--line);border-radius:9px;padding:7px;background:#fff}